基于vue的video播放器的实现示例

/** HTML **/

 
 

 
 


 
 

  
 

 
 

  
 

/** 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) &＃63; this.options.playProcess : 0;
 });
 
  // 获取到视频长度
 this.videoPlayer.addEventListener("durationchange", e => {
  this.currentVideo.duration = this.videoPlayer.duration;
  // 存在播放历史记录
  this.videoPlayer.currentTime = (this.options.playProcess > 0) &＃63; 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;
  }
 }
}