Android上的HTML5 <video>元素

90

根据：

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

Android 2.0应该支持HTML5视频元素。我无法使用Motorola Droid使它正常工作，也无法在任何HTML5视频示例页面上成功查看视频。由于目前不支持QuickTime或Flash，这是我想到的将mp4视频嵌入网页中的唯一其他方法。有人有运气吗？

android  video  mobile  html 
— 杰曼斯
source
2
我也有一个Droid，还无法播放html5视频。即使是“所有人的视频”网站也无法正常工作。
— haxney
“适合所有人的视频”重定向到了我一些愚蠢的首页-我什至都无法尝试观看该页面上的一个演示！
— jmans
将视频放在内部/外部文件系统中并进行访问。示例：-<视频控件='控件'> <源src =“ file：/storage/sdcard0/video_name.mp4” type ='video / mp4'>; </ video>
— Ravikiran

Answers:

78

我刚刚对此进行了一些实验，从我可以告诉你的情况来看，需要三件事：

  1. 调用视频时，不得使用type属性。
  2. 您必须手动调用video.play（）
  3. 视频必须按照一些非常严格的参数编码；通常，使用Handbrake上的iPhone设置并选中“ Web Optimized”按钮可以解决问题。

请看此页面上的演示：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上进行了测试，效果很好。

— 绿色停止
source
1
该演示似乎不适用于我的Nexus One（点击“播放”时什么也没有发生）
— itsadok，2010年
1
顺便说一句，您提供的链接在2.3.3 Nexus One上不起作用，消息：此视频无法播放
— Panthro，
@RafaelRoman我已添加并回答，希望可以在Nexus One中运行（至少对我
— 有用
我无法在4.0.4平板电脑设备上使用此功能。我认为本地人应该走的路
— 哈利（Harry）
1
在Android 5.x上无法使用，在单击播放之前视频是黑色的
— FiringSquadWitness
9

罗马的答案对我来说很好-至少，它给了我我所期望的。在手机的本机应用程序中打开视频与iPhone完全相同。

可能需要调整您的视点，并期望视频可以在其自己的应用程序中全屏播放，并为此进行编码。令人沮丧的是，单击视频不足以像iPhone那样播放视频，但是看到它只需要onclick属性即可启动它，这还不是世界末日。

我的建议FWIW是使用海报图像，并使其清楚地播放视频。目前，我正在开发一个项目，正是这个项目，客户对此感到满意-而且，他们当然免费获得了Android版本的Web应用程序，因为合同仅用于iPhone Web应用程序。

仅出于说明目的，下面是一个有效的Android视频标签。漂亮又简单。

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
— 不规则棚
source
在台式机浏览器中存在奇怪的问题-在chrome和firefox中，如果您使用该controls属性，则在您按下暂停时会绕过onclick事件（因此视频实际上已暂停），但是在您单击播放时不知怎么回事-您必须单击视频（而不是在实际播放按钮上）才能恢复视频。
— Kip
这有效。我可以在Android上播放h264视频。文件的后缀为mp4。
— neoneye 2011年
8

在这里，我介绍了我的一个朋友如何解决在Nexus One中以HTML显示视频的问题：

我从未能够使视频内联播放。实际上，互联网上有很多人明确提到自Honeycomb以来就支持HTML内联视频播放，而我们一直在与Froyo和Gingerbread进行斗争……对于较小的手机，我认为全屏播放是很自然的-否则可见的内容就不那么多了。因此，目标是使视频全屏打开。但是，此线程中提出的解决方案对我们不起作用-单击该元素不会触发任何操作。此外，显示了视频控件，但没有显示海报，因此用户体验甚至更奇怪。因此，他的工作如下：

将本机代码公开为HTML，以便可以通过javascript进行调用：

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标签的属性时，他都会不断收到。最终，他发现了这个非常奇怪的问题-原来他已将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所有。

— 鲍里斯·斯特兰杰夫（Boris Strandjev）
source
我必须添加引用JSInterface的javascript函数playVideo（videoName）才能使此功能正常工作-对于以前从未使用过此技术的人来说可能并不明显。另外，我更喜欢在startVideo函数中使用getExternalDirectory（）构建完整路径，并且仅使用从Javascript传入的文件名。对我有用，除了在视频活动关闭并且WebView重新聚焦（我的WebView嵌入在ViewPager中）时海报图像消失之外。谢谢。
— alan-p
谢谢你的意见。我添加了javascript调用脚本，广告也完全同意视频路径构造的注释，但是我认为这是每个人都可以解决的问题，
— Boris Strandjev 2012年
我也遇到“标头主机为空或空值”错误。这是未使用的源标签。这个源标签实际上是由ios应用程序（phonegap应用程序）使用的，因此现在我仅将源标签插入ios，并且可以正常工作。感谢您帮助解决这个奇怪的问题。
— Guillaume Gendre
5

如果您手动调用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>
— 罗曼·努里克（Roman Nurik）
source
2
这使我进入电影图标，可以单击以在视频应用程序中查看MP4，但仍然无法看到内嵌视频。
— jmans 2010年
从Android 3.1开始支持嵌入式视频。
— 罗曼·努里克
谁能确认这可以在Honeycomb +设备上使用？我无法在3.2上运行。我可以听到声音，但看不到任何视频。
— dongshengcn
4

将我的android 2.2浏览器指向html5test.com，告诉我支持video元素，但是列出的视频编解码器都不支持...支持video元素但不支持编解码器似乎毫无意义吗？？？除非该测试页有问题。

但是，我的确发现了与audio元素相同的情况：支持该元素，但没有音频格式。看这里：

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

— 安德斯·桑德尼斯·洛夫利
source
对我来说，在SGS 2.1update1上使用html5test.com也是如此。您找到嵌入视频的方法了吗？当我打开测试网站broken-links.com/tests/video并单击播放图标时，该视频播放但未嵌入（如在台式机/ Firefox上），而是在媒体播放器中打开。
— Mathias Conradt 2010年
我的LG Optimus Black上也一样...但是断开链接上的演示仍然有效。我将尝试使用手刹进行编码。
— 2012年
4

在我正确编码视频之前，对我没有任何帮助。尝试使用本指南进行正确的手刹设置：http : //forum.handbrake.fr/viewtopic.php? f=7&t= 9694

— 蒂姆·斯科里克
source
也为我解决了该问题。但是mpeg4在其他浏览器上不起作用，因此我创建了2个视频层。首先是mpeg4，然后是h264：<视频宽度=“ 480”高度=“ 386”自动播放循环静音playsinline> <源src =“ assets / chat_letter_mpeg4.mp4” type =“ video / mp4”> <！-MPEG4 for android- -> <source src =“ assets / chat_letter_h264.mp4” type =“ video / mp4”> <！-h264用于其他所有内容-> <img alt =“” src =“ assets / chat_letter.png”> <！ -图片作为IE8的后备-> </ video>
— yodalr
1

也许您必须专门为设备编码视频，例如：

<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

— 广告
source
1

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

— 麦克风
source
1

这对我有用：

<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位于顶部且视频文件不大时。

— LD
source
0

它应该可以工作，但是请注意解决方案： Android 2.0和Webkit

Canvas可以直接使用，而Geolocation在模拟器中似乎根本不起作用。当然，我必须向其发送模拟位置才能使其正常工作，所以我不知道在实际的手机上会是什么样。我可以用video标签说同样的话。它实际上没有播放视频存在一些问题，但是我认为这是视频分辨率高于仿真器可以处理的事实。一旦有人在Motorola Droid或其他下一代Android设备上尝试此操作，我们就会知道更多

— 杰斯普
source
我将尝试解决分辨率问题，但是我使用的是实际设备，视频流（网络摄像头）的分辨率很低。
— jmans
0

这可能无法完全回答您的问题，但是我们使用的是3GP或3GP2文件格式。甚至最好使用rtsp协议，但Android浏览器也可以识别3GP文件格式。

您可以使用类似

self.location = URL_OF_YOUR_3GP_FILE

触发视频播放器。该文件将被流传输，并且在播放结束后，处理将返回到浏览器。

对我来说，这解决了当前在Android设备上实现视频标签的许多问题。

— 利维坦
source
嗨，我使用android Webview尝试过此操作，但是它不起作用，我还有其他设置需要做吗？我正在使用此链接中的代码。
— 克里斯（Kris）
不，我不知道有其他方法可以实现这一目标。
— leviathan
0

根据：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浏览器中它将进入全屏状态，但不会开始播放。已测试最新版本的Android浏览器，Chrome，Safari。

我已经在Android 2.3.3和4.4浏览器上对其进行了测试。

— 贝鲁兹
source
0

经过大量研究，在许多不同的设备上，到现在为止，我已经得出一个简单的结论，MP4即与MOV格式相比，它的支持要少得多。因此，我正在MOV所有浏览器上使用所有Android和Apple设备都支持的格式。我检测到该设备是移动设备还是台式机浏览器，并进行了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|\-[a-w])|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;
}
— 科比杜埃克
source
0

我尝试使用该.mp4格式在Android设备上播放视频，但效果不佳。因此，经过反复试验，我将视频转换为.webm格式和以下代码，而没有额外的javascript或JQuery：

<video id="video" class="video" muted loop autoplay>
    <source src="../media/some_video.webm" type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

它可以在较旧的Android设备上运行（到2020年至少已经使用了几年）。

— 克里斯·斯特恩
source
-4

谷歌（Android）手机（例如Galaxy S）和iPhone均支持HTML5。iPhone不支持Google手机支持的Flash。

— 克尔斯滕·鲍威尔
source
Google手机将Flash放到了Android 4.0（ICS）中，这个问题与iPhone无关。
— greg.kindel 2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.