基于vue的video播放器的實現示例

當現有video播放器不能滿足需求時，需要自己對video進行封裝。

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

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

RTMP(Real Time Messaging Protocol)是Macromedia開發的一套視頻直播協議，現在屬于Adobe。RTMP基于flash無法在IOS的瀏覽器里播放，但是實時性比HLS要好。

HTTP-FLV針對于FLV視頻格式做的直播分發流，延時低。但移動端不支持。

結論：HTTP-FLV延時低，優先使用。若設備不支持HTTP-FLV，使用flv.js。若設備不支持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.wxshucaidpc.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, // 是否播放結束 showPoster: true, // 是否顯示視屏封面 showLoading: false, // 加載中 currentTime: 0, // 當前播放位置 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; }); // 獲取到視頻長度 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; }); // 播放進度更新 this.videoPlayer.addEventListener('timeupdate', e => { this.currentTime = this.videoPlayer.currentTime; }, false ); // 指定播放位置 this.videoPlayer.addEventListener('seeked', e => { }); // 緩沖 this.videoPlayer.addEventListener('waiting', e => { this.showLoading = true; }); // 播放結束 this.videoPlayer.addEventListener('ended', e => { // 重置狀態 this.videoPlay = false; this.showPoster = true; this.videoEnd = true; this.currentTime = this.currentVideo.duration; }); // 監聽weixinJSBridgeReady事件，處理微信不能自動播放。但并不全部適用，加了暫停按鈕，手動播放。 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內核視頻兩種播放形態 H5直播Video標簽坑匯總 H5直播入門（理論篇） 全面進階 H5 直播

到此這篇關于基于vue的video播放器的實現示例的文章就介紹到這了,更多相關vue video播放器內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！