-
Notifications
You must be signed in to change notification settings - Fork 27
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
视频H5 video最佳实践 #11
Comments
666 |
感谢总结,解决了我一个大难题啦 |
666 |
6666 |
uc video播放也是默认全屏播放,怎么取消默认全屏播放啊??? |
@EasonShen1989 UC如果是ios设备由于系统托管原因会出现全屏播放,可以带上这个https://github.com/bfred-it/iphone-inline-video 库试试,如果是安卓访问应该不会全屏。如果有的话 属于浏览器行为。 |
感谢分享 |
video的属性 > webkit-playsinline |
@elizond0 安卓video自动托管和浏览器有关, 安卓chrome 用 |
太专业了, |
video.js 兼容性似乎还不错? |
@anribras video.js可以,很多兼容方案都可以借鉴。 |
写得很清晰,难得 |
使用video.js添加一个视频播放倍速功能,在安卓微信浏览器打开网址无作用 |
倍速常理来说是生效的。 你可以通过video原生的playbackRate来修改倍速看看效果,不生效的话有可能是微信自己劫持了video的playbackRate属性。 |
x5-video-player-type="h5" 在vivo在,同一机型和系统,居然其中一台不生效。。。有遇到的么? |
@L-Chris L x5这种属性是微信浏览器特有 所以应该去看看两台设备的微信版本是否相同, 目前我没有遇到这种。 |
如果video不可见,动态渲染到画布会很卡,看起来应该是自动暂停了,有什么解决方案,目前是把video添加到页面上并设置为1个像素。 |
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,这里介绍一些实践经验。
video的属性
这里就要补充下,如果是想做全屏直播或者全屏H5体验的用户,IOS需要设置删除 webkit-playsinline 标签,因为你设置 false 是不支持的 ,安卓则不需要,因为默认全屏。但这时候全屏是有播放控件的,无论你有没有设置control。 做直播的可能用得着播放控件,但是全屏H5是不需要的,那么去除全屏播放时候的控件,需要以下设置:同层播放
全屏处理
ios加playsinline属性,之前只带webkit前缀的在ios10以后,会吊起系统自带播放器,两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器,还可以引用一个库iphone-inline-video(具体用法很简单看它github,这里不介绍了,只需加js一句话,css加点),github地址加上playsinline webkit-playsinline这两个属性和这个库基本可以保证ios端没有问题了(不过亲测,只加这两个属性不引入库好像也是ok的,至今没有在ios端微信没有出现问题,如果你要兼容uc或者qq的浏览器建议带上这个库).
x5-video-player-type="h5"属性,腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核,使用这个属性在微信中视频会有不同的表现,会呈现全屏状态,貌似播放控件剥去了,至少加了这个属性后视频上层可以有其他dom元素出现了(非腾讯白名单机制的一种处理措施)。
自动播放
android始终不能自动播放,不多说。值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了(顺带音频也不能自动播放了),但微信提供了一个事件WeixinJSBridgeReady,在微信嵌入webview全局的这个事件触发后,视频仍可以自动播放,这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式,其他如手q或者其他浏览器,建议就引导用户出发触屏的行为操作出发比较好。
ios10以后对于video出了新策 感兴趣可以了解一波 https://webkit.org/blog/6784/new-video-policies-for-ios/
播放控制
对于video或者audio等媒体元素,有一些方法,常用的有play(),pause();也有一些事件,如
loadstart
,canplay
,canplaythrough
,ended
,timeupdate
....等等。在移动端有一些坑需要注意,不要轻易使用媒体元素的除
ended
,timeupdate
以外event事件,在不同的机子上可能有不同的情况产生,例如:ios下监听canplay
和canplaythrough
(是否已缓冲了足够的数据可以流畅播放),当加载时是不会触发的,即使preload="auto"
也没用,但在pc的chrome调试器下和android下,是会在加载阶段就触发。ios需要播放后才会触发。总之就是现在的视频标准还不尽完善,有很多坑要注意,要使用前最好自己亲测一遍。就是当第一次播放视频的时候ios端,如果网络慢,视频从开始播到能展现画面会有短暂的黑屏(处理视频源数据的时间),为了避免这个黑屏,可以在视频上加个div浮层(可以一个假的视频第一帧),然后用timeupdate
方法监听,视屏播放及有画面的时候再移除浮层。隐藏播放控件
据说腾讯的android团队的x5内核团队放开了视频播放的限制,视频不一定调用它们那个备受诟病的视频播放器了,
x5-video-player-type="h5"
属性这个属性好像就有点那个意思,虽然体验还是有点...(导航栏也会清理)但至少播放器控件没有了,上层可以浮div或者其他元素了,这个还是值得一提。还有一点值得说的是,带播放器控件的隐藏.比如这个videobox在android下隐藏,只用display:none貌似还是不行的,但加个z-index:-1,设置成-1就可以达到隐藏播放器控件的目的了。
参考文章
html5--移动端视频video的android兼容,去除播放控件、全屏等
MDN-Video
视频H5のVideo标签在微信里的坑和技巧
移动端HTML5
微信端视频播放问题
The text was updated successfully, but these errors were encountered: