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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
Mobile/14G60 |
NeteaseMusic/4.2.0 |
||
易信 |
Mozzilla/5.0(iPhone;CPU iPhone OS 10_3_3 like Mac OS X) |
AppleWebkit/603.3.8 |
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
本文来自网易实践者社区,经作者蔡娟授权发布。