Android 上的 HTML5 <video> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1711078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 <video> element on Android
提问by jmans
According to:
根据：
http://developer.android.com/sdk/android-2.0-highlights.html
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0 should support the HTML5 video element. I haven't been able to get this to work using a Motorola Droid, and haven't been able to successfully view a video on any of the HTML5 video example pages out there. Since there currently isn't support for QuickTime or Flash, this is the only other thing I can think of for embedding mp4 video in a web page. Has anyone had any luck with this?
Android 2.0 应该支持 HTML5 视频元素。我无法使用摩托罗拉 Droid 使其工作，并且无法成功查看任何 HTML5 视频示例页面上的视频。由于目前不支持 QuickTime 或 Flash，这是我能想到的在网页中嵌入 mp4 视频的唯一其他方法。有没有人有这方面的运气？
采纳答案by stopsatgreen
I've just done some experimentation with this, and from what I can tell you need three things:
我刚刚对此做了一些实验，据我所知，您需要三件事：
- You must not use the typeattribute when calling the video.
- You must manually call video.play()
- The video must be encoded to some quite strict parameters; using the iPhone setting on Handbrake with the 'Web Optimized' button checked usually does the trick.
- 调用视频时不得使用type属性。
- 您必须手动调用 video.play()
- 视频必须编码为一些非常严格的参数；使用 iPhone 上的 Handbrake 设置并选中“Web Optimized”按钮通常可以解决问题。
Have a look at the demo on this page: http://broken-links.com/tests/video/
看看这个页面上的演示：http: //broken-links.com/tests/video/
This works, AFAIK, in all video-enabled desktop browsers, iPhone and Android.
AFAIK，这适用于所有支持视频的桌面浏览器、iPhone 和 Android。
Here's the markup:
这是标记：
<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>
And I have this in the JS:
我在 JS 中有这个：
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
I tested this on a Samsung Galaxy S and it works fine.
我在三星 Galaxy S 上对此进行了测试，效果很好。
回答by Irregular Shed
Roman's answer worked fine for me - or at least, it gave me what I was expecting. Opening the video in the phone's native application is exactly the same as what the iPhone does.
罗曼的回答对我来说很好 - 或者至少，它给了我我所期待的。在手机的原生应用中打开视频和在 iPhone 上是完全一样的。
It's probably worth adjusting your viewpoint and expect video to be played fullscreen in its own application, and coding for that. It's frustrating that clicking the video isn't sufficient to get it playing in the same way as the iPhone does, but seeing as it only takes an onclick attribute to launch it, it's not the end of the world.
可能值得调整您的观点并期望视频在其自己的应用程序中全屏播放，并为此编码。令人沮丧的是，点击视频并不足以让它以与 iPhone 相同的方式播放，但看到它只需要一个 onclick 属性来启动它，这并不是世界末日。
My advice, FWIW, is to use a poster image, and make it obvious that it will play the video. I'm working on a project at the moment that does precisely that, and the clients are happy with it - and also that they're getting the Android version of a web app for free, of course, because the contract was only for an iPhone web app.
我的建议，FWIW，是使用海报图像，并明确它会播放视频。我目前正在开展一个项目，正好做到了这一点，客户对此很满意——当然，他们还免费获得了 Android 版本的网络应用程序，因为合同仅用于iPhone 网络应用程序。
Just for illustration, a working Android video tag is below. Nice and simple.
只是为了说明，下面是一个有效的 Android 视频标签。好看又简单。
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
回答by Boris Strandjev
Here I include how a friend of mine solved the problem of displaying videos in HTML in Nexus One:
在这里我介绍一下我的一个朋友是如何解决 Nexus One 中显示 HTML 格式视频的问题的：
I never was able to make the video play inline. Actually many people on the internet mention explicitly that inline video play in HTML is supported since Honeycomb, and we were fighting with Froyo and Gingerbread... Also for smaller phones I think that playing full screen is very natural - otherwise not so much is visible. So the goal was to make the video open in full screen. However, the proposed solutions in this thread did not work for us - clicking on the element triggered nothing. Furthermore the video controls were shown, but no poster was displayed so the user experience was even weirder. So what he did was the following:
我从来没有能够让视频在线播放。实际上，互联网上很多人都明确提到自 Honeycomb 以来支持 HTML 中的内联视频播放，而我们正在与 Froyo 和 Gingerbread 作斗争......对于较小的手机，我认为全屏播放是很自然的 - 否则看不到那么多. 所以目标是让视频全屏打开。但是，该线程中提出的解决方案对我们不起作用 - 单击元素不会触发任何事件。此外显示了视频控件，但没有显示海报，因此用户体验更加奇怪。所以他做了以下事情：
Expose native code to the HTML to be callable via javascript:
将本机代码公开给 HTML 以便通过 javascript 调用：
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
The code itself, had a function that called native activity to play the video:
代码本身有一个调用本机活动来播放视频的函数：
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);
}
}
Then in the HTML itself he kept on failing make the video tag work playing the video. Thus, finally he decided to overwrite the onclickevent of the video, making it do the actual play. This almost worked for him - except for no poster was displayed. Here comes the most weird part - he kept on receiving ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"every time he set the posterattribute of the tag. Finally he found the issue, which was very weird - it turned out that he had kept the sourcesubtag in the videotag, but never used it. And weird enough exactly this was causing the problem. Now see his definition of the videosection:
然后在 HTML 本身中，他一直未能使视频标签正常播放视频。因此，最后他决定覆盖onclick视频的事件，使其进行实际播放。这几乎对他有用 - 除了没有显示海报。最奇怪的部分来了——ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"每次他设置poster标签的属性时，他一直在接收。最后他发现了这个问题，这很奇怪——原来他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>
Of course you need to also add the definition of the javascript function in the head of the page:
当然你还需要在页面头部添加javascript函数的定义：
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
I realize this is not purely HTML solution, but is the best we were able to do for Nexus One type of phone. All credits for this solution go to Dimitar Zlatkov Dimitrov.
我意识到这不是纯粹的 HTML 解决方案，而是我们能够为 Nexus One 类型的手机做的最好的解决方案。此解决方案的所有功劳都归于 Dimitar Zlatkov Dimitrov。
回答by Roman Nurik
If you manually call video.play()it should work:
如果您手动调用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>
回答by Anders Sundnes L?vlie
pointing my android 2.2 browser to html5test.com, tells me that the video element is supported, but none of the listed video codecs... seems a little pointless to support the video element but no codecs??? unless there is something wrong with that test page.
将我的 android 2.2 浏览器指向html5test.com，告诉我支持视频元素，但没有列出的视频编解码器......支持视频元素但没有编解码器似乎有点毫无意义？？？除非那个测试页有问题。
however, i did find the same kind of situation with the audio element: the element is supported, but no audio formats. see here:
但是，我确实发现了与音频元素相同的情况：支持该元素，但不支持音频格式。看这里：
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
回答by Tim Scollick
Nothing worked for me until I encoded the video properly. Try this guide for the correct handbrake settings: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
在我正确编码视频之前，没有什么对我有用。试试本指南以获得正确的手刹设置：http: //forum.handbrake.fr/viewtopic.php?f=7&t= 9694
回答by ad rees
Maybe you have to encode the video specifically for the device eg:
也许您必须专门为设备编码视频，例如：
<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>
There are some examples of encoding configurations that worked on here:
这里有一些编码配置的例子：
回答by TheLD
This works for me:
这对我有用：
<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>
Only when the .mp4 is on top and the videofile is not to big.
仅当 .mp4 位于顶部且视频文件不大时。
回答by Mike
Try h.264 in an mp4 container. I've had much success with it on my Droid X. I've been using zencoder.com for format conversions.
在 mp4 容器中尝试 h.264。我在我的 Droid X 上使用它取得了很大的成功。我一直在使用 zencoder.com 进行格式转换。
回答by Behrouz.M
According to : https://stackoverflow.com/a/24403519/365229
根据：https: //stackoverflow.com/a/24403519/365229
This should work, with plain 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(); }You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing. Tested with the latest version of Android Browser, Chrome, Safari.
这应该可以工作，使用纯 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 浏览器中它只会全屏显示但不会开始播放。使用最新版本的 Android 浏览器、Chrome、Safari 进行测试。
I've tested it on Android 2.3.3 & 4.4 browser.
我已经在 Android 2.3.3 & 4.4 浏览器上测试过了。
