在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。
;(function(w){
var play={
autoPlay:function(id,istouch){//媒体id,istouch是否开启触摸播放[自动播放视频]
var media=document.getElementById(id);
function toplay(){//播放
if(media.paused) media.play();
}
if(istouch) document.addEventListener('touchstart',toplay);
function wxhandle(){//微信播放
toplay();
document.addEventListener("WeixinJSBridgeReady", function(){toplay();}, false);
document.removeEventListener('DOMContentLoaded', wxhandle);
}
document.addEventListener('DOMContentLoaded',wxhandle);
},
pausedclick:function(id,vid,fn){//[按钮id,媒体id,回调].点击事件-停止播放,操作
var _self=this;
document.getElementById(id).addEventListener('click',function(){
document.getElementById(vid).pause();
fn();
});
},
};
w.play=play;
})(window);
<video id="myvideo" src="***.mp4" width="100%" height="100%" preload x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="true" webkit-playsinline playsinline="true">
<source src="***.mp4"></source>
</video>
<button id="stop">停止</button>