Android 4.4中播放HTML视频的Bug

近期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” style=”-webkit-transform: translate3d(0, 0, 0)”></video>

默认的poster显示正常,点击播放,视频声音画面显示也都正常。

这个Bug产生的原因我认为是在视频开始播放时没有启动3D加速,导致原始的poster图片未被刷新到视频画面。设置preload=”none”禁止了视频的自动载入,确保了poster画面被正确载入;同时在点击播放视频时,-webkit-transform: translate3d(0, 0, 0)确保打开了3D加速,自动刷新了poster的原始画面。

当然以上原因都为猜测,解决办法也是临时的,因为这不符合HTML5标签的原始定义,未来还要看官方的下一个Android版本是否解决掉这个Bug。

如何解决webview不支持html5中audio标签

我们都知道html5有非常方便的audio标签可以嵌入音频文件,而Android的webview具有基本的浏览器内核,可以浏览基于html5的文档,但webview对html5的支持目前还是有很大差距的,很多html5支持的标签,在webview中并不支持。近期就遇到一个要在webview中嵌入mp3音频的需求,原本以为直接用html5的audio标签即可实现,没想到webview中只是显示了audio控件,但并不能播放。

html5-audio.png (640×300)

网上查了很多资料,比较统一的结论是android2.2不支持audio标签,2.3以上可以支持,但实践发现2.3以上的支持也并不好,貌似和音频文件的解码格式也有关系。

目前遇到的一些不同的情况列举如下:
1、<audio src=”www.example.com/01.mp3″ >对服务器端的音频文件支持。
2、<audio src=”01.mp3″ >最手机本地的音频文件不支持。

一种变通的方法:
1、<video src=”test.mp3″ poster=”test.jpg” onclick=”this.play();”></video>
使用video标签嵌入mp3文件,并添加onclick属性和背景图属性。

另一种比较保险的方法是制作swf文件,嵌入mp3音频,再使用jQuery Flash一类的插件实现html5文件中嵌入音频。