H5 内嵌视频播放问题

作者: 谢小逸 | 来源:发表于2017-06-16 22:38 被阅读0次

H5 内嵌视频播放问题
微信小程序web-view界面视频没有声音
H5页面原生video标签移动端禁止全屏播放
uiwebview内嵌视频无法播放
Vue2-接入H5直播点播播放器(flv\mp4)
H5视频全屏播放
SpringBoot Java实现Http方式分片下载断点续传+
Android iframe中H5页面请求时无法携带cookie
iOS实现
iOS APP内嵌Webview跳转支付宝，完成后跳回APP

今天做了一个微信活动的H5，要求是滑动页面触发视频播放，视频播放完后隐藏视频，显示落地页，另外要求，禁用系统播放器。

针对ios

<video id="video" playsinline  webkit-playsinline ></video>

1、这个方式是针对 ios有效（safari、微信都有效）。

2、playsinline属性针对ios 10以上系统有效。

3、webkit-playsinline属性针对ios10以下系统有效。

这是安卓的，不会自动全屏，但是会有滚动条

<video width="100%" class="notaplink video2" preload="auto" id="video2" src="http://ccv.moonbasa.com/201706161818/cc1589767db09533255652275dcd1165/media/video/20170616/062a3578ab9f49dcae82c118b0260226_video.mp4">
            </video>
            
     <style>       
     video::-webkit-media-controls {
        display: none !important;
    }   
    //禁止页面的滚动条
    .scoll_dis {
        overflow: scroll;
        overflow-y: hidden;
    }
    </style>
    <body class="scoll_dis">
    </body>

由于两者有较大的差别，所以为了方便我运用了个判断，来区分两个不同的系统

   var browser = navigator.userAgent;
     if (!!browser.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        //ios
     }else{
         //Android
     }

触摸touch事件的监听

        document.addEventListener("scroll", touch, false);
        document.addEventListener('touchstart', touch, false);
        document.addEventListener('touchmove', touch, false);
        document.addEventListener('touchend', touch, false);
        function touch(e){
            
        }