微信项目Video遇到的坑

原创 牛粪 随笔 js 149阅读 2018-03-30 12:38:15 举报
版主的项目需求是进入该页面视频加载完毕则自动播放。不显示视频控件 循环播放 且保持原有样式

<html>
        <video id="myVideo"
                 src="xxxxx"
                 autoplay
                 x5-video-player-type="h5"
                 playsinline
                 webkit-playsinline="true"
                 loop
                 poster="xxxxx"
                 x-webkit-airplay="allow"
          ></video>
          <!--
                 src="xxxxx"                      视频路径
                 autoplay                           视频自动播放
                 x5-video-player-type="h5"          启用H5同层H5播放器
                 playsinline                        不全屏播放
                 webkit-playsinline="true"          不全屏播放ios
                 loop                               循环播放
                 poster="xxxxx"                   显示封面
                 x-webkit-airplay="allow"           不显示视频控件
          -->
 </html>         

 <javascript>

    let myVideo=document.getElementById("myVideo");
    document.addEventListener("WeixinJSBridgeReady", ()=> {
    //#专治ios 不播放问题#
    //设置 WeixinJSBridgeReady 自动播放 配合 autoplay x5-video-player-type="h5"
        myVideo.play(); //#专治各种不服# 强制视频播放
    }, false);

    myVideo.addEventListener('canplaythrough',()=>{//监听视频加载完毕
           myVideo.duration;//视频总时长
    });

    myVideo.addEventListener('play',()=>{//监听视频播放
           myVideo.currentTime;  //当前播放时间
    });

 </javascript>
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复