vue-cli video原生笔记

vue-cli video原生笔记

最近在写vue项目，在写播放视频的时候遇到一些问题。谷歌浏览器现在已经不兼容flash播放器，以至于当时使用vue-video-player播放不了， 因为不是太复杂的需求，其他插件我也没试，就直接用了原生video标签。

<video 
 id="video"
 :src="videoUrl"
 controls="controls"         //向用户显示控件
 controlsList="nodownload"   //不可下载
 :poster="imgUrl"            //规定视频下载时显示的图像
 @play="aplay"               //播放时调用
 @pause="apause"			 //暂停时调用
></video>

autoplay 自动播放，但要配合muted（输出被静音）使用

因为需求，做了播放60s时做处理

    aplay() {
        var video = document.getElementById('video');
        var that = this
        video.addEventListener("timeupdate",function(){
          let timeDisplay;
        	//用秒数来显示当前播放进度
        	timeDisplay = Math.floor(video.currentTime);
          //当视频播放到 60s的时候做处理
        	if(timeDisplay == 60){
             that.hintVip()   //方法名 这里改了this指向
        	}
        },false)
    },
    //视频暂停
    apause() {
      console.log('apause');
    },