环境：我司从事在线教育行业，想要将老师的讲课视频实现在线播放并监控用户播放时长关键词：vue.js、微信公众号、video视频播放1.微信公众号内可以直接使用video进行视频播放2.微信公众号内的视频无法自动播放，即使你加了autoplay"true"，网友们说可以将视频上传至腾讯视频，我们服务器是阿里云所以没尝试3.ios手机中的播放可以不全屏播放，但是安卓手机点击播放自动全屏4.事件如下varvideo1document.getElementById("video1")video.currentTime!--播放的当前进度--video.duration!--视频总时长--video.pasued视频播放暂停的状态video.pause()让视频暂停video.play()让视频播放5.解决苹果手机全屏问题videoid"video1"src"资源地址"preload"auto"x-webkit-airplay"allow"x5-video-player-type"h5"x5-video-player-fullscreen"true"x5-video-orientation"portraint"width"100%"height"260px"webkit-playsinline"true"playsinline"true"autoplay"true"controls"true"Yourbrowserdoesnotsupportthevideotag./video6.领导要的效果是：记录用户播放时长一开始跳进坑里，自己定制了播放条，后来发现有灰常简单的方法实现。定制控制条的思路：(1)video省略controls（2）写一个div用来充当播放条（3）单击播放按钮时判断是进行播放还是进行暂停（4）监控视频时长，形成进度条templatedivclass"pagepage-currentcourseInfo"divid"J_prismPlayer"videoid"video1"src"资源地址"preload"auto"playsinline""x-webkit-airplay"allow"x5-video-player-type"h5"x5-video-player-fullscreen"true"x5-video-orientation"portraint"width"100%"height"100%"webkit-playsinline"true"playsinline"true"autoplay"true"Yourbrowserdoesnotsupportthevideotag./videodivclass"control"spanid"bofang"@click"bofang()"播放/span{{this.CurtimeText}}!--当前播放时间--progressv-bind:value"this.pgCurtime"v-bind:max"this.pgTotalTime"@click"progressFun($event)"/progress!--进度--{{this.TotalTimeText}}!--视频总时长--/div/div/div/templatescriptimport{videoCount}from'../assets/js/api'exportdefault{data(){return{pgCurtime:0,//未格式化的当前播放时间pgTotalTime:0,//未格式化的总时间CurtimeText:'00:00',//格式化的当前播放时间TotalTimeText:'00:00',//未格式化的总时间}},components:{},methods:{bofang(){varvideodocument.getElementById("video1");varbofangdocument.getElementById("bofang");if(video.paused){video.play();document.getElementById("bofang").innerHTML"暂停";}else{video.pause();document.getElementById("bofang").innerHTML"播放";this.videoTime()//暂停时将数据传给接口}if(video.durationvideo.currentTime){this.videoTime()}},videoTime(){letdata{watch_length:this.pgCurtime,total_time:this.pgTotalTime,}letparame1qs.stringify(data);videoCount(parame1).then((res){if(res.code0){console.log("提交成功")}}).catch((err){console.log(err)})},timeupdate(){varvideo1document.getElementById("video1");this.pgCurtimevideo1.currentTime;this.pgTotalTimevideo1.duration;this.CurtimeTextthis.getFormatTime(video1.currentTime)this.TotalTimeTextthis.getFormatTime(video1.duration)},progressFun(){varvideo1document.getElementById("video1");video1.currentTime(event.offsetX/205)*video1.duration;},//!--格式化时间为00:00:00这种形式--getFormatTime(time){vartimetime;varhparseInt(time/3600),mparseInt(time%3600/60),sparseInt(time%60);hh10?"0"+h:h;mm10?"0"+m:m;ss10?"0"+s:s;console.log(h+":"+m+":"+s)if(h'00'){returnm+":"+s;}else{returnh+":"+m+":"+s;}},},//事实上有非常简单的方式，就是在created里增加监控时间created(){this.videoSrcdocument.getElementById("video1");varthis1thisif(this.videoSrcnull){setTimeout(function(){varvideodocument.getElementById('video1');video.addEventListener("timeupdate",this1.timeupdate)//iphone的时间进度条video.addEventListener('play',function(){alert("播放监控")});video.addEventListener('pause',function(){this1.videoTime()//当用户暂停时，调用方法将数据传给接口});},5000);}},}/scriptstylerel"stylesheet/stylus"#J_prismPlayer{position:fixed;top:0;left:0;z-index:8888;height:210px;background:#000;width:100%;overflow:hidden;}.control{height:45px;background:rgba(34,37,44,.9);position:absolute;width:100%;top:165px;padding:04%;line-height:45px;color:#aaacb4;font-size:15px;}progress{-webkit-appearance:none;padding:8px10px;width:205px}/*FireFox浏览器已经完成的进度条，使用progress::-moz-progress-bar{}*//*谷歌浏览器-webkit-progress-bar指全部的进度条progress-value指已经完成的进度*/::-webkit-progress-inner-element{height:4px;border-radius:5px;}::-webkit-progress-bar{background:#6e747a;border-radius:5px;}::-webkit-progress-value{background:#00ba6b;border-radius:5px}::-moz-progress-bar{background:#00ba6b;border-radius:5px;}::-ms-fill{background:#00ba6b;}/style