h5视频中遇到的问题以及解决办法

时间2024-01-26 18:46:03发布访客分类HTML浏览905

导读：收集整理的这篇文章主要介绍了html5教程-h5视频中遇到的问题以及解决办法，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 h5 视频中的坑详情...

收集整理的这篇文章主要介绍了html5教程-h5视频中遇到的问题以及解决办法，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

1. 自动播放问题：

通过autoplay属性

视频的自动播放需要在video标签上添加autoplay属性, 如：//

但是在很多浏览器里，如 iOS 下并不支持这个属性，在 iOS下必须给webview设置

self.wView.allowsInlineMediaPlayback = YES; self.wView.mediaPlaybackRequireSUSErAction = NO;

才能让这个属性生效从而让用户一进入页面就开始视频的自动播放

在微信下因为不允许视频直接播放，则必须通过用户的真实操作来触发调用video.play(),这就是各种微信的h5活动页面需要引导用户进行一下点击操作才开始的原因。

2. 页面内联播放问题：在iOS Safari 和一些安卓的一些浏览器下播放视频的时候，不能在h5页面中播放视频，系统会自动接管视频

如果需要在h5页面内播放视频，需要在视频标签上加上 webkit-playsinline，在iOS10以后，需要加上playsinline,建议同时加上这两个属性，同时需要app支持这种模式，手Q和微信都支持这种模式

/ (在htML)

webview.allowsInlineMediaPlayback = YES(在app内设置webview属性);

3. 视频的高度问题：在安卓下，一些浏览器如 QQ 浏览器和 UC 浏览器，系统会把视频的层级调到最高，所以如果想在页面上显示 dom 元素，都会被视频盖住，单纯的设置该dom的z-index是无效的

解决方案：

1. 在弹出会显示在视频上方dom的时候暂停视频播放

2. 将视频所在的dom的父元素的高度设为1

3. 处理完弹出的事件后将视频所在的父元素高度还原

4. 视频的默认播放图标

5. 在 iOS 下会有一个默认的播放图标，在 iOS 都会默认显示，不能通过 js 控制，但是可以通过css样式将其隐藏

     video::-webkIT-media-controls-start-playback-button {
     display: none;
}