如何在vue中使用video實現(xiàn)一個播放器功能

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何在vue中使用video實現(xiàn)一個播放器功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

video事件

• loadstart: 在視頻開始加載時觸發(fā)，給currentTime賦值(歷史播放記錄或0)。

• durationchange: 元信息已載入或已改變，視頻的長度發(fā)生了改變。獲取到視頻長度(duration，并給currentTime賦值(歷史播放記錄或0))。

• playing: 在視頻開始播放時觸發(fā)（不論是初次播放、在暫停后恢復(fù)、或是在結(jié)束后重新開始）。

• pause: 播放暫停時觸發(fā)。

• timeupdate: currentTime改變, 更新播放進度。處理播放進度條

• seeked: 指定播放位置

• waiting: 緩沖

• ended: 播放結(jié)束, 重置狀態(tài)

• WeixinJSBridgeReady: 在微信中使用video，需要監(jiān)聽weixinJSBridgeReady事件, 在回調(diào)函數(shù)里執(zhí)行play()命令。

直播協(xié)議

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

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

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

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

封裝video

/** HTML **/
<div class="video">
 <!-- video player -->
 <video
  class="video__player"
  ref="videoPlayer"
  preload="auto"
  :autoplay="options.autoplay"
  :muted="options.muted"
  webkit-playsinline="true"
  playsinline="true"
  x-webkit-airplay="allow"
  x5-video-player-type="h6-page"
  x5-video-orientation="portraint"
  
 >
  <source :src="options.src" />
 </video>

 <!-- video poster -->
 <div
  v-show="showPoster"
  class="video__poster"
  :
 ></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;
 });
 
  // 獲取到視頻長度
 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;
 });
 
 // 播放結(jié)束
 this.videoPlayer.addEventListener("ended", e => {
  // 重置狀態(tài)
  this.videoPlay = false;
  this.showPoster = true;
  this.videoEnd = true;
  this.currentTime = this.currentVideo.duration;
 });
 
 // 監(jiān)聽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;
  }
 }
}

上述就是小編為大家分享的如何在vue中使用video實現(xiàn)一個播放器功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。