移动端视频播放H5踩坑记录(下)

西西吹雪2018-05-25 13:17

上篇:移动端视频播放H5踩坑记录(上)


4、视频文件格式

        我们常用的视频一般是mp4格式,但有时为了节省网络请求,我们会采用webm格式,为了兼容,于是我们在source标签内把webm格式文件写在前面,mp4格式放后。然而你会发现,QQ、UC浏览器不能播放webm格式视频,即使后面也设置了mp4格式的,仍然没有正常识别,因而造成视频无法播放。

5、播放音频

        由于iOS的限制,只有在用户操作之后执行audio.play方法才能有效播放音频,因此自动播放背景音乐这种需求,基本上都是诱导用户触摸屏幕后触发执行的。若音效并非在用户操作后立即播放,比如说摇一摇的音效或者需要等待一个异步请求的返回,这类情况可以先设置muted属性将音频设为静音,在用户操作后提前执行play以触发音频加载,之后才能正常使用脚本中调用pause/play方法。在部分安卓机上,非循环的音频重新播放前需要load一次才能重新播放。

        另外, iOS还限制了脚本设置音频的volumn属性是无效的,音量始终为1。部分安卓机上,多个音频是无法同时播放的,碰到这类需求时需要注意。 

总结:

能够实现视频内联播放的浏览器有:

1、无自带视频播放器的标准webkit内核浏览器:如Safari、Chome、搜狗等,设置webkit-playsinline、playsinline属性。

2、X5内核系列:微信内置浏览器、手机QQ内置浏览器,设置x5-video-player-type=h5、x5-video-player-fullscreen=true。

3、Firefox。

4、安卓机上,微博内置浏览器和QQ浏览器也可以正常播放内联视频。

 

附:移动端常见浏览器UA概览

系统:iOS 10.3.3

浏览器类型

操作系统信息

浏览器内核

版本

网络类型

浏览器类型/版本

Safari

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Version/10.0

Mobile/14G60

Safari/602.1

微博

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

Weibo(iPhone7,1__weibo__7.9.1__iphone__os10.3.3)

微信

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

MicroMessenger/6.5.15

手机QQ

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

QQ/7.1.8.452

QQ浏览器

Mozzilla/5.0(iPhone 6p;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Version/10.0

MQQBrowser/7.7.2

Mobile/14G60

Safari/8536.25

Sougou

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

SougouMobileBrowser/5.9.2

UC

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X;zh-CN)

AppleWebkit/537.51.1
(KHTML, likeGecko)

Mobile/14G60

UCBrowser/11.6.1.1003

Chrome

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.1.30
(KHTML, likeGecko)

CriOS/61.0.3163.73

Mobile/14G60

Safari/602.1

Firefox

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

FxiOS/8.3b5826

Mobile/14G60

Safari/603.3.8

手机百度

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

baiduboxapp/9.2.2.11(Baidu; P2 10.3.3)

百度浏览器

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Version/10.0

Mobile/14G60

Safari/600.1.4

猎豹

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Version/7.0

Mobile/14G60

Safari/9537.53

网易云音乐

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

NeteaseMusic/4.2.0

易信

Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X)

AppleWebkit/603.3.8
(KHTML, likeGecko)

Mobile/14G60

YiXin/1937

参考文章:

https://segmentfault.com/a/1190000006857675

http://www.360doc.com/content/16/0416/11/597197_551066431.shtml

http://blog.sina.com.cn/s/blog_74d6cedd0102vkbr.html

https://x5.tencent.com/tbs/guide/web/x5-video.html

https://zhuanlan.zhihu.com/p/27690199

https://github.com/bfred-it/iphone-inline-video


本文来自网易实践者社区,经作者蔡娟授权发布。