【转】Android 4.4中播放HTML5视频<video>的Bug
2017-05-27 11:12
567 查看
近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下:
<video width="480" height="280" poster="test.jpg" src="test.mp4" preload="auto"></video>
在4.3版本之前播放正常,新版本中播放时只能听到声音,而画面停留在最初的画面,也就是poster属性中的图片,但不会显示视频动画,只有点击暂停按钮,然后再次点击播放按钮时,视频动画才会显示正常。
网上查阅了很多国外论坛,发现两个类似的反馈,但解决方法不同,其中的一个办法是使用CSS3的-webkit-transform: translate3d(0, 0, 0)属性强制打开3D渲染,可以使视频播放正常,但这种方法会导致初始的poster图片只显示一下,然后一闪而过停留在视频播放界面,点击播放时,视频播放倒是一切正常。
另外在官方论坛找到一个类似的反馈报告: https://code.google.com/p/android/issues/detail?id=62145#makechanges
其中提到此问题可能是由于preload属性引起,只有设定preload="none"才可以显示视频,官方已经确认了这个bug,并表示已经解决,下个版本会更新。但经我测试,单独设置preload="none"并不会完全解决此问题,视频仍旧只有声音,画面停留在初始界面。
经我多次试验,将上述两种方法结合起来,最终解决了这个问题,代码如下:
<video width="480" height="280" poster="test.jpg" src="test.mp4" preload="none" ></video>
默认的poster显示正常,点击播放,视频声音画面显示也都正常。
这个Bug产生的原因我认为是在视频开始播放时没有启动3D加速,导致原始的poster图片未被刷新到视频画面。设置preload="none"禁止了视频的自动载入,确保了poster画面被正确载入;同时在点击播放视频时,-webkit-transform: translate3d(0, 0, 0)确保打开了3D加速,自动刷新了poster的原始画面。
当然以上原因都为猜测,解决办法也是临时的,因为这不符合HTML5标签的原始定义,未来还要看官方的下一个Android版本是否解决掉这个Bug。
比较稳定的版本开源video
https://github.com/videojs/video.js/releases
from:http://www.cnblogs.com/nidongde/p/6189516.html
<video width="480" height="280" poster="test.jpg" src="test.mp4" preload="auto"></video>
在4.3版本之前播放正常,新版本中播放时只能听到声音,而画面停留在最初的画面,也就是poster属性中的图片,但不会显示视频动画,只有点击暂停按钮,然后再次点击播放按钮时,视频动画才会显示正常。
网上查阅了很多国外论坛,发现两个类似的反馈,但解决方法不同,其中的一个办法是使用CSS3的-webkit-transform: translate3d(0, 0, 0)属性强制打开3D渲染,可以使视频播放正常,但这种方法会导致初始的poster图片只显示一下,然后一闪而过停留在视频播放界面,点击播放时,视频播放倒是一切正常。
另外在官方论坛找到一个类似的反馈报告: https://code.google.com/p/android/issues/detail?id=62145#makechanges
其中提到此问题可能是由于preload属性引起,只有设定preload="none"才可以显示视频,官方已经确认了这个bug,并表示已经解决,下个版本会更新。但经我测试,单独设置preload="none"并不会完全解决此问题,视频仍旧只有声音,画面停留在初始界面。
经我多次试验,将上述两种方法结合起来,最终解决了这个问题,代码如下:
<video width="480" height="280" poster="test.jpg" src="test.mp4" preload="none" ></video>
默认的poster显示正常,点击播放,视频声音画面显示也都正常。
这个Bug产生的原因我认为是在视频开始播放时没有启动3D加速,导致原始的poster图片未被刷新到视频画面。设置preload="none"禁止了视频的自动载入,确保了poster画面被正确载入;同时在点击播放视频时,-webkit-transform: translate3d(0, 0, 0)确保打开了3D加速,自动刷新了poster的原始画面。
当然以上原因都为猜测,解决办法也是临时的,因为这不符合HTML5标签的原始定义,未来还要看官方的下一个Android版本是否解决掉这个Bug。
比较稳定的版本开源video
https://github.com/videojs/video.js/releases
from:http://www.cnblogs.com/nidongde/p/6189516.html
相关文章推荐
- [转] Android 4.4中播放HTML5视频<video>的Bug
- HTML5 - 使用<video>播放视频
- html5实现视频播放<video>
- HTML5 视频播放 <video>
- html5 <video>播放mp4格式视频没有图像的解决办法
- 移动端 HTML5 <video> 视频播放优化实践
- HTML5 - 使用<video>播放视频
- Chromium为视频标签<video>全屏播放的过程分析
- HTML5 视频(二) <video> 使用 DOM 进行控制
- android 播放视频示例<转>
- HTML5 - 使用<video>播放视频
- 从零開始学android<mediaplayer自带播放器(视频播放).四十九.>
- html jsp中<video>无法播放视频,该视频是由xuggler压缩图片流形成的
- HTML5 音频播放 <audio> 视频<video>
- 从零开始学android<mediaplayer自带播放器(视频播放).四十九.>
- html5之<video>开发实现音乐播放控…
- html5 Video控件视频播放,电脑和手机上都能兼容。(mp4格式 电脑和android、ios都能播放)
- 深度分析:Android4.3下MMS发送到附件为音频文件(音频为系统内置音频)的彩信给自己,添加音频-发送彩信-接收彩信-下载音频附件-预览-播放(二,发送彩信<1>)
- <Win32_17>集音频和视频播放功能于一身的简易播放器
- 深度分析:Android4.3下MMS发送到附件为音频文件(音频为系统内置音频)的彩信给自己,添加音频-发送彩信-接收彩信-下载音频附件-预览-播放(三,接收彩信<1,接收短信>)