Android上的HTML5 <video>元素

根据:

http://developer.android.com/sdk/android-2.0-highlights.html

Android 2.0应该支持HTML5视频元素。 我还没有能够使用摩托罗拉Droid这个工作,并没有能够成功地在任何HTML5视频示例页面上查看视频。 由于目前还不支持QuickTime或Flash,这是我能想到的在网页中嵌入mp4视频的唯一方法。 有没有人有这个运气?

我刚刚做了一些实验,从我可以告诉你需要三件事情:

  1. 调用视频时,请勿使用类型属性。
  2. 您必须手动调用video.play()
  3. 视频必须编码为一些相当严格的参数; 使用Handbrake上的iPhone设置并选中“Web优化”按钮通常会有效果。

看看这个页面上的演示: http : //broken-links.com/tests/video/

在所有支持视频的桌面浏览器,iPhone和Android上,这都是AFAIK的作品。

这是标记:

<video id="video" autobuffer height="240" width="360"> <source src="BigBuck.m4v"> <source src="BigBuck.webm" type="video/webm"> <source src="BigBuck.theora.ogv" type="video/ogg"> </video> 

而我在JS中有这个:

 var video = document.getElementById('video'); video.addEventListener('click',function(){ video.play(); },false); 

我在三星Galaxy S上测试了这个,它工作正常。

罗曼的答案对我来说工作得很好 – 至少,这给了我所期待的。 在手机原生应用程序中打开视频与iPhone所做的完全一样。

这可能是值得调整你的观点,并期望视频播放全屏在自己的应用程序,并编码。 令人沮丧的是,点击视频并不足以让它像iPhone一样播放视频,但是看到它只需要一个onclick属性来启动它,这不是世界末日。

我的建议,FWIW,是使用一张海报图片,并且很明显它会播放视频。 我现在正在开发一个项目,而且客户也对此感到满意 – 同时他们也获得了免费的Android版本的网络应用程序,当然,因为合同只适用于iPhone网络应用程序。

为了说明,下面是一个可用的Android视频标签。 好而简单。

 <video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/> 

在这里,我介绍了我的一位朋友如何解决在Nexus One中以HTML格式显示视频的问题:

我从来没有能够使视频播放内联。 实际上,网上很多人都明确提到,自从Honeycomb开始支持HTML内联视频播放,我们正在和Froyo和Gingerbread进行斗争……对于小型手机,我认为全屏播放是非常自然的 – 否则不是那么多。 所以我们的目标是让视频全屏显示。 然而,这个线程中提出的解决方案并没有为我们工作 – 点击元素没有触发任何东西。 此外,视频控制显示,但没有海报显示,所以用户体验更怪。 所以他做了以下几件事:

将本地代码暴露给可通过javascript调用的HTML:

 JavaScriptInterface jsInterface = new JavaScriptInterface(this); webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(jsInterface, "JSInterface"); 

代码本身有一个称为本地活动来播放视频的功能:

 public class JavaScriptInterface { private Activity activity; public JavaScriptInterface(Activity activiy) { this.activity = activiy; } public void startVideo(String videoAddress){ Intent intent = new Intent(Intent.ACTION_VIEW); intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file activity.startActivity(intent); } } 

然后,在HTML本身,他不断让视频标签工作播放视频。 因此,最后他决定覆盖视频的onclick事件,使其实际播放。 这几乎为他工作 – 除了没有展示海报。 这里是最奇怪的部分 – 他一直在接收ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"每次他设置标签的poster属性的ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" 。 最后他发现这个问题非常奇怪 – 事实证明,他把source标签放在了video标签中,但从来没有使用过。 奇怪的是,这正是造成这个问题的原因。 现在看他的video部分的定义:

 <video width="320" height="240" controls="controls" poster='poster.gif' onclick="playVideo('file:///sdcard/test.3gp');" > Your browser does not support the video tag. </video> 

当然你也需要在页面的头部添加javascript函数的定义:

 <script> function playVideo(video){ window.JSInterface.startVideo(video); } </script> 

我意识到这不是纯粹的HTML解决方案,但是我们能够为Nexus One类型的手机做的最好的解决方案。 所有这个解决方案的信用都转到Dimitar Zlatkov Dimitrov。

如果你手动调用video.play()它应该工作:

 <!DOCTYPE html> <html> <head> <script> function init() { enableVideoClicks(); } function enableVideoClicks() { var videos = document.getElementsByTagName('video') || []; for (var i = 0; i < videos.length; i++) { // TODO: use attachEvent in IE videos[i].addEventListener('click', function(videoNode) { return function() { videoNode.play(); }; }(videos[i])); } } </script> </head> <body onload="init()"> <video src="sample.mp4" width="400" height="300" controls></video> ... </body> </html> 

指向我的android 2.2浏览器html5test.com ,告诉我,视频元素是支持的,但没有列出的视频编解码器…似乎有点无意支持视频元素,但没有编解码器? 除非该测试页面出现问题。

不过,我确实发现了与音频元素相同的情况:元素被支持,但没有音频格式。 看这里:

http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/

没有任何工作,直到我正确地编码视频。 试试这个正确的手刹设置指南: http : //forum.handbrake.fr/viewtopic.php? f=7&t= 9694

也许你必须专门为该设备编码视频,例如:

 <video id="movie" width="320" height="240" autobuffer controls> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'> </video> 

这里有一些编码配置的例子:

https://supportforums.motorola.com

在mp4容器中试用h.264。 我在Droid X上取得了很大的成功。我一直使用zencoder.com进行格式转换。

这适用于我:

 <video id="video-example" width="256" height="177" poster="image.jpg"> <source src="video/video.mp4" type="video/mp4"></source> <source src="video/video.ogg" type="video/ogg"></source> This browser does not support HTML5 </video> 

只有当.mp4在顶部,而且视频文件不大时,

它应该工作,但看分辨率: Android 2.0和WebKit

Canvas可以直接使用,而Geolocation在模拟器中似乎完全不起作用。 当然,我必须把它发送给模拟地点才能使用,所以我不知道在实际的电话上这会是什么样子。 我可以用视频标签说同样的话。 有没有实际播放视频的问题,但我认为这是事实,视频是一个比模拟器可以处理更高的分辨率。 一旦有人在摩托罗拉Droid或其他下一代Android设备上试用这个功能,我们就会知道更多

这可能不完全回答你的问题,但我们使用3GP或3GP2文件格式。 更好的是,即使使用rtsp协议,但Android浏览器也会识别3GP文件格式。

你可以使用类似的东西

 self.location = URL_OF_YOUR_3GP_FILE 

触发视频播放器。 该文件将流式传输,播放结束后,处理将返回到浏览器。

对我来说,这解决了目前在android设备上执行视频标签的很多问题。

经过很多研究,在很多不同的设备上,到目前为止,我已经得出了一个简单的结论,即MP4MOV格式支持少得多。 所以,我在所有的浏览器上都使用MOV格式,它支持所有的Android和苹果设备。 我检测到天气设备是移动设备或桌面浏览器,并相应地设置SRC

 if (IsMobile()) { $('#vid').attr('src', '/uploads/' + name + '.mov'); } else { $('#vid').attr('src', '/uploads/' + name + '.webm'); } function IsMobile() { var isMobile = false; //initiate as false if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[aw])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true; return isMobile; } 

根据: https : //stackoverflow.com/a/24403519/365229

这应该工作,用简单的Javascript:

 var myVideo = document.getElementById('myVideoTag'); myVideo.play(); if (typeof(myVideo.webkitEnterFullscreen) != "undefined") { // This is for Android Stock. myVideo.webkitEnterFullscreen(); } else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") { // This is for Chrome. myVideo.webkitRequestFullscreen(); } else if (typeof(myVideo.mozRequestFullScreen) != "undefined") { myVideo.mozRequestFullScreen(); } 

您必须在全屏指令之前触发play(),否则在Android Browser中它将会全屏显示,但不会开始播放。 使用最新版本的Android浏览器,Chrome,Safari进行测试。

我已经在Android 2.3.3和4.4浏览器上测试过了。

Google(Android)手机(如Galaxy S和iPhone)均支持HTML5。 但iPhone不支持谷歌手机支持的Flash。