HTML视频做背景

[TOC]

###本站主页效果图

HTML 代码

注意：PC端自动播放没问题，移动端自动播放是被禁止的，且点击播放会自动全屏，在以下代码中 x5-playsinline="" playsinline="" webkit-playsinline="" 解决了这两个问题

<video class="war3-homepage-video" 
x5-playsinline="" playsinline=""  webkit-playsinline=""   <!--手机端播放不全屏-->
autoplay muted loop <!--自动播放 静音播放 循环播放-->
> 
       <source src="http://video.xxroom.xyz/%E6%A8%B1%E8%8A%B1.mp4" type="video/mp4" />
</video>

js代码

注：解决微信不自动播放问题

//一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以
document.getElementById('autoplayVideo').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
	document.getElementById('autoplayVideo').play();
}, false);

css代码

.war3-homepage-video{
    position:fixed;
    top: 0;
    right:0;
    bottom: 0;
    min-width: 100%;
    /*min-height: 100%;*/
    width:auto;
    height:auto;
    z-index: -999;
    opacity: 0.9;
}

###插曲 事情起由那位大人闲主页丑，本想找图片及gif，但收费现象及翻墙速度慢，所以停止了大海捞针。于是还是用视频较为方便~感谢收看