网页背景H5视频自动播放--PC端、移动端兼容问题完美解决方案.docxVIP

? ? ? ? ? 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配兼容，这些问题很是头疼； 兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为大家详细讲解： PC端： PC端相应简单些，浏览器对video标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现； video// 设置后，音频会初始化为静音，注意浏览器只有设置静音，才能自动播放 muted// 视频会马上自动开始播放，不会停下来等着数据载入结束。autoplay=autoplay// 布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方 loop=loop// 一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。x5-playsinline=trueplaysinline=truewebkit-playsinline=true// 一个布尔属性，用于禁用使用有线连接的设备(HDMI、DVI等)的远程播放功能。x-webkit-airplay=allow// 这个视频优先加载preload=auto//