【转】Android 4.4中播放HTML5视频<video>的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" ></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

时间: 2024-10-21 05:16:35

【转】Android 4.4中播放HTML5视频<video>的Bug的相关文章

[转] Android 4.4中播放HTML5视频&lt;video&gt;的Bug

近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width="480" height="280" poster="test.jpg" src="test.mp4" preload="auto"></video> 在4.3版本之前播放正常,新版本中播放时

HTML5视频Video元素

一.视频文件格式     HTML5 支持三种视频文件格式(即编解码器).?1.Ogg Theora 使用的文件扩展名为 .ogg或 .ogv,支持它的浏览器包括 Firefox3.5+. Chrome 4+. Opera 10.5+ 以 及Android 版 Firefox.?2.MP4(H.264)使用的文件扩展名为.mp4 或 .m4v,支持它的浏览器包括Safari 3.2+. Chrome 4-?(参见提示).Internet Explorer 9+.iOS(MobileSafari)

iOS 在应用中播放本地视频文件

可以使用MPMoviePlayerController来播放本地视频文件 1.添加 Mediaplayer framework 并且在viewcontroller中#import <MediaPlayer/MediaPlayer.h> 2. 把视频文件拖拽到xcode中 3. 获取文件存放的路径 NSString*thePath=[[NSBundle mainBundle] pathForResource:@"yourVideo" ofType:@"MOV&quo

html5视频video积累

又是好几个月没有写东西,还是太懒散了~必须要教育下自己罗~ 这次做了个播放视频的移动H5,之前没有仔细玩过,好好记录下基本知识,还有遇到的一些坑,方便之后再次遇见后进行解决 一.基本 video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE 9.Chrome),都不支持的(IE6.7.8).但是由于H5在移动设备上展现,基本都是使用webkit内

HTML5视频video开发demo例子

HTML5的video可以使用DOM的方式进行控制.video元素同样拥有方法.属性和事件. 比如它拥有的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置. 其中的 DOM 事件能够通知您,比方说,video元素开始播放.已暂停,已停止,等等. 废话少说了,看下面的实例吧. 为视频创建简单的播放/暂停以及调整尺寸控件: <!DOCTYPE html> <html> <body> 欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共

HTML5视频video

直到现在,仍然不存在一项旨在网页上显示视频的标准. 目前,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 当前HTML5只支持三种格式的视频. 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No 注: Ogg =

HTML5视频Video 音频Audio

视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP mp4 RTMP 直播流 万能播放插件js ckplayerhttp://www.ckplayer.com/ m3u8是m3u的一种,是utf-8格式的,Apple 为了提高流播效率开发的技术,特点是将流媒体切分为若干 TS 片段(比如每10秒一段),然后通过一个扩展的 m3u 列表文件将这些 T

如何在Ubuntu QML应用中播放视频

在这篇文章中,我们将介绍如何在Ubuntu QML应用中播放一个视频.为了实现方便,我们可以事先用手机录下一个视频,并置于我们已经创建好的项目中. 首先,我们利用Ubuntu SDK来创建一个"QML app with Simple UI (qmake)"的项目.我们修改我们的Main.qml文件如下: import QtQuick 2.0 import Ubuntu.Components 1.1 import QtMultimedia 5.0 /*! \brief MainView

unity 播放外部视频

摘要: Unity支持的播放视频格式有.mov..mpg..mpeg..mp4..avi和.asf.只需将对应的视频文件拖拽入Project视图即可,它会自动生成对应的MovieTexture对象. 1.Unity3D中播放游戏视频的方式有两种,第一种是在游戏对象中播放,就好比在游戏世界中创建一个Plane面对象,摄像机直直的照射在这个面上.第二种是在GUI层面上播放视频.播放视频其实和贴图非常相像,因为播放视频用到的MovieTexture属于贴图Texture的子类 //电影纹理 publi