h5页面自动播放视频、音频小白教程关于媒体文件自动全屏播放的实现方式_视频菜鸟教程网

在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。但是在我们可以通过相关事件来实现:经发现微信通过”WeixinJSBridgeReady”和”DOMContentL

h5页面自动播放视频、音频小白教程关于媒体文件自动全屏播放的实现方式

在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放。这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自己对浏览器进行设置才能支持autoplay。但是在我们可以通过相关事件来实现:

h5页面自动播放视频、音频小白教程关于媒体文件自动全屏播放的实现方式_视频菜鸟教程网

经发现微信通过”WeixinJSBridgeReady”和”DOMContentLoaded”这2个事件结合可以实现自动播放,那如果不是微信呢?我们可以可以加个触摸事件去实现。下面就给出代码简单的实现下

video.js代码:

;(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>

<script src="video.js"></script>
<script>
play.autoPlay('myvideo',true);//播放
play.pasuedclick('stop','myvideo',function(){//点击按钮停止        //....其他代码
});
</script>

备注:video中的属性是用于全屏播放的实现,如果在android的微信里面,上面的代码出现上下有黑边,导致不能全屏的情况,解决办法如下:

给video加上object-fit: fill;的style属性。

海计划公众号
(0)
上一篇 2020/04/05 01:58
下一篇 2020/04/05 01:58

您可能感兴趣的内容