H5 播放视频常见bug及解决方案

Posted 北执

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 播放视频常见bug及解决方案相关的知识,希望对你有一定的参考价值。

本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号

原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw

1. 自动播放问题

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

 <video autoplay><video/>

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

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

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

 

通过直接调用video.play()方法
在一些情况下我们想加入一些判断逻辑,如判断用户网络环境,在wifi下自动播放,在4g环境下给出提示,这中情况下就适合直接选中video并调用video.play来播放视频;

 

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

同时发现真实点击必须使用触发 touchendclickdoubleclick 或 keydown 事件等标准的事件才能触发,使用Zepto封装过的tap事件并不能触发播放器的播放;

 

2. 页面内联播放问题

在iOS Safari和一些安卓的一些浏览器下播放视频的时候,不能在h5页面中播放视频,系统会自动接管视频;

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

 

3. 视频的高度问题

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

解决方案:
1.在弹出会显示在视频上方dom的时候暂停视频播放
2.将视频所在的dom的父元素的高度设为1
3.处理完弹出的事件后将视频所在的父元素高度还原

4. 视频的默认播放图标

在iOS下会有一个默认的播放图标,如图所示:

 

在iOS都会默认显示,不能通过js控制,但是可以通过css样式将其隐藏

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

 

5.视频的刷新

Chimee - 简单易用的H5视频播放器解决方案

让我为你介绍一个神器:Chimee,一套可扩展的 H5 视频播放器解决方案

Android主流视频播放及缓存实现原理调研

HTML5播放器视频显示不完整!FLASH播放器正常显示!

常见的H5移动端Web页面Bug问题解决方案总汇

常见的H5移动端Web页面Bug问题解决方案总汇