當(dāng)現(xiàn)有video播放器不能滿(mǎn)足需求時(shí)，需要自己對(duì)video進(jìn)行封裝。

video事件 loadstart: 在視頻開(kāi)始加載時(shí)觸發(fā)，給currentTime賦值(歷史播放記錄或0)。 durationchange: 元信息已載入或已改變，視頻的長(zhǎng)度發(fā)生了改變。獲取到視頻長(zhǎng)度(duration，并給currentTime賦值(歷史播放記錄或0))。 playing: 在視頻開(kāi)始播放時(shí)觸發(fā)（不論是初次播放、在暫停后恢復(fù)、或是在結(jié)束后重新開(kāi)始）。 pause: 播放暫停時(shí)觸發(fā)。 timeupdate: currentTime改變, 更新播放進(jìn)度。處理播放進(jìn)度條 seeked: 指定播放位置 waiting: 緩沖 ended: 播放結(jié)束, 重置狀態(tài) WeixinJSBridgeReady: 在微信中使用video，需要監(jiān)聽(tīng)weixinJSBridgeReady事件, 在回調(diào)函數(shù)里執(zhí)行play()命令。直播協(xié)議

HLS(HTTP Live Streaming)由Apple提出的直播流協(xié)議。IOS和高版本Android都支持HLS。HLS主要由.m3u8和.ts兩種播放文件。HLS具有高兼容性，高可擴(kuò)展性，但會(huì)直播延時(shí)。HLS協(xié)議是將直播流分成一段一段的小段視頻去下載播放的，所以假設(shè)列表里面的包含5個(gè)ts文件，每個(gè)ts文件包含5秒的視頻內(nèi)容，那么整體的延遲就是25秒。

RTMP(Real Time Messaging Protocol)是Macromedia開(kāi)發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于Adobe。RTMP基于flash無(wú)法在IOS的瀏覽器里播放，但是實(shí)時(shí)性比HLS要好。

HTTP-FLV針對(duì)于FLV視頻格式做的直播分發(fā)流，延時(shí)低。但移動(dòng)端不支持。

結(jié)論：HTTP-FLV延時(shí)低，優(yōu)先使用。若設(shè)備不支持HTTP-FLV，使用flv.js。若設(shè)備不支持flv.js，則使用HLS，但HLS延遲大。

封裝video

/** HTML **/<div class='video'> <!-- video player --> <video ref='videoPlayer' preload='auto' :autoplay='options.autoplay' :muted='options.muted' webkit-playsinline='true' playsinline='true' x-webkit-airplay='allow' x5-video-player-type='h5-page' x5-video-orientation='portraint' > <source :src='http://www.piao2010.com/bcjs/options.src' /> </video> <!-- video poster --> <div v-show='showPoster' : ></div> <!-- video loading --> <div v-show='showLoading' class='video__Loading'> <span class='video__Loading-icon'></span> </div> <!-- video pause --> <div @click='handleVideoPlay' class='video__pause'> <span v-show='!videoPlay' class='video__pause-icon'></span> </div></div>

/** js**/props: { options: { type: Object, default: () => {} }},data() { return { videoPlay: false, // 是否正在播放 videoEnd: false, // 是否播放結(jié)束 showPoster: true, // 是否顯示視屏封面 showLoading: false, // 加載中 currentTime: 0, // 當(dāng)前播放位置 currentVideo: { duration: this.options.duration }, }},mounted() { this.videoPlayer = this.$refs.videoPlayer; this.videoPlayer.currentTime = 0; this.videoPlayer.addEventListener('loadstart', e => { this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0; }); // 獲取到視頻長(zhǎng)度 this.videoPlayer.addEventListener('durationchange', e => { this.currentVideo.duration = this.videoPlayer.duration; // 存在播放歷史記錄 this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0; }); this.videoPlayer.addEventListener('playing', e => { this.showPoster = false; this.videoPlay = true; this.showLoading = false; this.videoEnd = false; }); // 暫停 this.videoPlayer.addEventListener('pause', () => { this.videoPlay = false; if (this.videoPlayer.currentTime < 0.1) { this.showPoster = true; } this.showLoading = false; }); // 播放進(jìn)度更新 this.videoPlayer.addEventListener('timeupdate', e => { this.currentTime = this.videoPlayer.currentTime; }, false ); // 指定播放位置 this.videoPlayer.addEventListener('seeked', e => { }); // 緩沖 this.videoPlayer.addEventListener('waiting', e => { this.showLoading = true; }); // 播放結(jié)束 this.videoPlayer.addEventListener('ended', e => { // 重置狀態(tài) this.videoPlay = false; this.showPoster = true; this.videoEnd = true; this.currentTime = this.currentVideo.duration; }); // 監(jiān)聽(tīng)weixinJSBridgeReady事件，處理微信不能自動(dòng)播放。但并不全部適用，加了暫停按鈕，手動(dòng)播放。 document.addEventListener(’WeixinJSBridgeReady’, () => { this.videoPlayer.play(); }, false);},methods: { handleVideoPlay() { if (this.videoPlayer.paused) { // 播放 if(this.videoEnd) { // 重播 this.currentTime = 0; this.videoPlayer.currentTime = 0; } this.videoPlayer.play(); this.videoPlay = true; } else { // 暫停 this.videoPlayer.pause(); this.videoPlay = false; } }}[參考文章]: X5內(nèi)核視頻兩種播放形態(tài) H5直播Video標(biāo)簽坑匯總 H5直播入門(mén)（理論篇） 全面進(jìn)階 H5 直播

到此這篇關(guān)于基于vue的video播放器的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue video播放器內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！