今天做了一个微信活动的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){
}