移动端H5【video】浏览器劫持视频播放

在H5页面开发中会使用视频，现在是使用videojs组件进行开发，但是在部分浏览器，如夸克，QQ浏览器中，视频会被浏览器劫持，不仅样式会有变化，且视频的层次会变得特别高。解决问题2：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。解决问题1：视频转成gif 使用poster属性

别undefined辣

1609人浏览 · 2024-02-26 10:33:10

别undefined辣 · 2024-02-26 10:33:10 发布

<video>: 视频嵌入元素 - HTML（超文本标记语言） | MDN<video>标签的属性

src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

在H5页面开发中会使用视频，现在是使用videojs组件进行开发，但是在部分浏览器，如夸克，QQ浏览器中，视频会被浏览器劫持，不仅样式会有变化，且视频的层次会变得特别高。H5网页在手机上查看，出现的问题进行处理：

小米手机端自带浏览器打开网页，视频被劫持视频显示播放失败且页面空白。
苹果手机显示视频被劫持并全屏播放的问题和视频的层次会变高。下面是解决方法：

方法一：使用第三方播放器，一般插件做过封装以上两个问题都可以解决。下面推荐两个插件

插件下载 | MuiPlayer
几款优秀开源的HTML5 视频播放器 - 体验盒子 - 不再关注网络安全

方法二：

解决问题1：视频转成gif 使用poster属性做背景封面也可以使用js 方法。

解决问题2：如需实现页面内（非全屏）播放，需要在 video 标签中加入 playsinline 和 webkit-playsinline 和 x5-playsinline 属性。

<video
        muted
        autoplay
        loop
        webkit-playsinline // 这个属性是ios 10中设置可以让视频在小窗
        内播放，也就是不是全屏播放
        playsinline // IOS微信浏览器支持小窗内播放
        x5-playsinline 
        x5-video-player-type="h5" // 不要与x5-playsinline同时存在
        x-webkit-airplay="allow"
        x5-video-player-fullscreen="" // 全屏设置，设置为 true 是防
        止横屏
        x5-video-orientation="landscape|portrait" // 播放器的方向，
         landscape横屏，portraint竖屏，默认值为竖屏
        src="视频地址"
></video>