H5的video和audio常见问题

#### 1. 写在前面
对于video和audio的常见问题,最常见的应该有两种:

1. video的全屏兼容问题;
2. audio的自动播放问题;

本篇文章,也就主要来对上面两个问题,进行一下说明,如果您想了解的不是上述的两个问题,那么就可以直接忽略下面的内容,以节省您宝贵的时间;

#### 2. video的全屏问题;

关于这个问题,相信大家已经查阅过好多资料了;

解决全屏问题,在github上,已经有一个比较不错的插件了,[iphone-inline-video](https://github.com/bfred-it/iphone-inline-video),可以直接去查看这个插件的使用,这里呢,我们也没有直接使用这个插件,而是使用的一个腾讯tgideas团队的插件:[移动端视频组件](https://tgideas.qq.com/doc/frontend/component/m/mmd.html),至于原因,这里也不作说明;

但是除此之外,有几个特别需要注意的问题:
1. video 的显示层级是很高的,所以尽量不要在视频上面覆盖元素(不然就算处理兼容都要累死);
2. 在QQ的X5内核的浏览器,上述的插件,依然无法做到页面内联播放,video播放之后,依然会全屏播放;

> 这里呢,其他客户端只考虑了微信和QQ,毕竟是比较大的传播平台;

使用上述插件,基本是把大部分移动设备的问题,都给解决了,除了QQ;

QQ的客户端,是QQ浏览器X5内核,实话说,这个内核的浏览器,兼容问题还是很多的,而且现在的更新维护也很少,但是因为QQ的关系,还不得不去做这个兼容,所以:

这里有一个说难不难,说简单也很难的解决方案,就是域名的关系,在QQ浏览器里,对qq.com加了白名单,所以在qq.com的域名下,很多问题就不是问题了,比如这里的全屏,甚至video层级过高的bug;

这里可以可以参考一个示例:[qq.com的示例](http://acts.book.qq.com/demo/video/index.html)

到这里,关于视频的部分,基本算是OK了;

> 如果您有更好的方法,解决在X5内核浏览器的全屏问题,请不吝指教,共享一下,谢谢。

#### 3. audio的自动播放问题;

首先说一下,audio的自动播放,只是出现在ios的设备上,所以接下来也只是对这部分进行说明;

那么现在的情况是怎么样的呢?
1. 标签的autoplay失效;
2. 页面打开之后,使用JS调用play方法失效;
3. 任何操作,如果您使用setTimeout的回调,调用play方法失效;

关于音频的自动播放,分为两种:
1. 页面打开之后,在没有任何操作的情况下自动播放(不可完成,除非你自家的客户端去修改浏览器内核)
2. 当做了一些操作时,播放音频;

而当你做了任何操作时,使用audio.play就已经生效了,所以如果是这样的话,是可以直接执行的。

但是,如果当操作之后,需要而一段时间,才执行播放音频的话,就需要注意了,这个时候,play方法是不会生效的;

说到这里,其实也就说到了本文想要说的一点:
1. 如果要保证之后使用JS调用play方法生效,那么就在某一次操作时,连续调用:audio.play,audio.pause两个方法,只要调用过一次之后,不管是之后点击播放音频,还是使用计时器延时播放音频,都可以正常;
2. 尤其是,多段音频连续播放的时候,可以使用多个audio标签,分别使用audio.play,audio.pause方法,触发解除不能自动播放的问题;
3. 反而顺便说一下video,如果是多段视频连接播放的话,也可以使用多个video标签,在第一次操作页面的时候,分别执行video.play和video.pause;

到此为止;

#### 4. 总结
本篇没有示例,说的内容也都是一些常见的问题,只是提供一种特殊使用场景的解决方案,欢迎指正;

本文地址:http://www.zhangyunling.com/896.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>