Web_制作页面开场动画并解决自动播放问题

实例代码:

<!-- 用一个div容器 来包裹视频 -->
	<div id="myVideo" style="position:absolute;z-index:9999;width:100%; height:100%;"> 
	
	 <video onclick="play();"  muted="muted" id="videoplay" autoplay="autoplay" preload="auto"  style="width:100%; height:100%; object-fit: fill">     <source src="" type="video/mp4">    </video>  
	 
	</div>      
	
	<!-- 自动播放视频js代码开始 -->
	<script>  
	
	var ua = navigator.userAgent;
	
	var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
	
	isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
	
	isAndroid = ua.match(/(Android)\s+([\d.]+)/),
	
	isMobile = isIphone || isAndroid;
	
	if(isMobile){
	document.getElementById("videoplay").src= "video/c04.mp4";
	}else{
	document.getElementById("videoplay").src= "video/c04.mp4";
	}
	
	
	 var md=document.getElementsByTagName("video")[0];
	    md.addEventListener("ended",function(){
	        var box = document.getElementById("myVideo");
	         box.parentNode.removeChild(myVideo);
	    });
	
	 </script>

	<script>
	document.getElementById('videoplay').play(); 
	document.addEventListener("WeixinJSBridgeReady", function () {  
	document.getElementById('videoplay').play();  
	}, false); 
	</script>
	<!-- 自动播放视频js代码结束-->

解决封面动画没有 自动播放的问题:

网上说 加 autoplay="autoplay" preload="auto" 两个属性就行了 

但是经过本人 测试并没有效果

注意:还需要加 一个非常关键的属性 --->   muted="muted"

<video onclick="play();"  muted="muted" id="videoplay" autoplay="autoplay" preload="auto"  style="width:100%; height:100%; object-fit: fill">     <source src="" type="video/mp4">    </video>  

如果开场视频 加载较慢 可以使用 格式工厂 压缩视频

Mac端可以使用 HandBrake 进行压缩

 

参考过的一篇文章:https://blog.csdn.net/wwt20180911/article/details/84840485