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" >