vue.js 在微信公众号内实现视频播放

环境：我司从事在线教育行业，想要将老师的讲课视频实现在线播放并监控用户播放时长
关键词：vue.js、微信公众号、video视频播放
1. 微信公众号内可以直接使用video进行视频播放
2. 微信公众号内的视频无法自动播放，即使你加了autoplay="true"，网友们说可以将视频上传至腾讯视频，我们服务器是阿里云所以没尝试
3. ios手机中的播放可以不全屏播放，但是安卓手机点击播放自动全屏
4. 事件如下
    var video1 = document.getElementById("video1")
    video.currentTime   <!-- 播放的当前进度 -->
    video.duration   <!-- 视频总时长 -->
    video.pasued 视频播放暂停的状态
    video.pause()  让视频暂停
    video.play()  让视频播放
5. 解决苹果手机全屏问题
 <video id="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"  >
    Your browser does not support the video tag.
</video >
6. 领导要的效果是：记录用户播放时长
一开始跳进坑里，自己定制了播放条，后来发现有灰常简单的方法实现。


定制控制条的思路：
(1)video省略controls（2）写一个div用来充当播放条 （3）单击播放按钮时判断是进行播放还是进行暂停 （4）监控视频时长，形成进度条
<template>
   <div class="page page-current courseInfo">
        <div id="J_prismPlayer" >
          <video id="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" >
            Your browser does not support the video tag.
          </video >
          <div  class="control">
            <span id="bofang" @click="bofang()">播放</span>
            {{this.CurtimeText}}    <!-- 当前播放时间 --> 
            
            <progress v-bind:value="this.pgCurtime" v-bind:max="this.pgTotalTime" @click="progressFun($event)"></progress>
            <!-- 进度 -->
            {{this.TotalTimeText}}  <!-- 视频总时长 -->
            
          </div>
        </div>
    </div>
</template>
<script>
import {videoCount} from '../assets/js/api'  
export default {
  data() {
    return {
      pgCurtime:0, //未格式化的当前播放时间
      pgTotalTime:0, //未格式化的总时间
      CurtimeText:'00:00', //格式化的当前播放时间
      TotalTimeText:'00:00',//未格式化的总时间
    }
  },
  components: {
  },
  methods: {
     
    bofang(){
        var video=document.getElementById("video1");
        var bofang=document.getElementById("bofang");
        if(video.paused){
            video.play();
            document.getElementById("bofang").innerHTML="暂停";
        }else{
            video.pause();
            document.getElementById("bofang").innerHTML="播放";
           this.videoTime()  //暂停时将数据传给接口
        }
        if(video.duration==video.currentTime){
          this.videoTime()  
        }
    },
    videoTime(){
        let data = {
          watch_length:this.pgCurtime,
          total_time: this.pgTotalTime,   
        }
        let parame1 = qs.stringify(data);
        videoCount(parame1).then((res) => {
          if (res.code == 0) {
            console.log("提交成功")
          }
        }).catch((err) => {
          console.log(err)
        })
    },


    timeupdate(){
        var video1=document.getElementById("video1");
        this.pgCurtime = video1.currentTime;
        this.pgTotalTime = video1.duration;
        this.CurtimeText = this.getFormatTime(video1.currentTime)
        this.TotalTimeText = this.getFormatTime(video1.duration)
    },
    progressFun(){
        var video1=document.getElementById("video1");
        video1.currentTime = (event.offsetX / 205) * video1.duration;
    },
    // <!-- 格式化时间为00:00:00这种形式 -->
    getFormatTime(time) {
        var time = time;
        var h = parseInt(time/3600),
            m = parseInt(time%3600/60),
            s = parseInt(time%60);
        h = h < 10 ? "0"+h : h;
        m = m < 10 ? "0"+m : m;
        s = s < 10 ? "0"+s : s;
        console.log(h+":"+m+":"+s)
        if(h=='00'){
          return m+":"+s;
        }else{
          return h+":"+m+":"+s;
        } 
    },
  },
// 事实上有非常简单的方式，就是在created里增加监控时间
  created() { 
     this.videoSrc = document.getElementById("video1");
     var this1 =this


     if(this.videoSrc==null){
      setTimeout(function(){
        var video =document.getElementById('video1');
        video.addEventListener("timeupdate",this1.timeupdate)  //iphone的时间进度条
        video.addEventListener('play',function(){  
            alert("播放监控")   
        });
        video.addEventListener('pause',function(){  
            this1.videoTime()  //当用户暂停时，调用方法将数据传给接口
        }); 
      
      },5000);
     }
  }, 
}
</script>


<style rel="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: 0 4%;
    line-height: 45px;
    color:#aaacb4;
    font-size: 15px;}
progress { -webkit-appearance: none;padding:8px 10px;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>