Android上的HTML5 <video>元素
根据：
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0应该支持HTML5视频元素。 我还没有能够使用摩托罗拉Droid这个工作，并没有能够成功地在任何HTML5视频示例页面上查看视频。 由于目前还不支持QuickTime或Flash，这是我能想到的在网页中嵌入mp4视频的唯一方法。 有没有人有这个运气？
我刚刚做了一些实验，从我可以告诉你需要三件事情：
- 调用视频时，请勿使用类型属性。
- 您必须手动调用video.play（）
- 视频必须编码为一些相当严格的参数; 使用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>
这里有一些编码配置的例子：
在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设备上执行视频标签的很多问题。
经过很多研究，在很多不同的设备上，到目前为止，我已经得出了一个简单的结论，即MP4比MOV格式支持少得多。 所以，我在所有的浏览器上都使用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。
