h5頁面自動播放視頻、音頻_關於媒體文件自動全屏播放的實現方式

在移動端（ios和android）播放視頻的時候，我們即使定義了autoplay屬性，仍然不能自動播放。這是由於手機瀏覽器為了防止浪費用戶的網絡流量，在默認情況下是不允許媒體文件自動播放的，除非用戶自己對瀏覽器進行設置才能支持autoplay。但是在我們可以通過相關事件來實現：

 

經發現微信通過"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);

51220網站目錄 https://www.51220.cn

頁面調用:

<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屬性。