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