Android 上的 HTML5 <video> 元素

Posted 2023-02-19

技术标签:

【中文标题】Android 上的 HTML5 <video> 元素【英文标题】：HTML5 <video> element on Android 【发布时间】：2010-12-15 05:28:26 【问题描述】：

根据：

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

Android 2.0 应该支持 HTML5 视频元素。我无法使用摩托罗拉 Droid 让它工作，也无法在任何 HTML5 视频示例页面上成功查看视频。由于目前不支持 QuickTime 或 Flash，这是我能想到的将 mp4 视频嵌入网页的唯一其他方法。有没有人遇到过这种情况？

【问题讨论】：

我也有一个 Droid，但无法播放 html5 视频。即使是“所有人的视频”网站也不起作用。 “每个人的视频”重定向到我的一些愚蠢的首页 - 我什至无法尝试查看该页面上的一个演示！将视频放入内部/外部文件系统并访问它。示例：--

【参考方案1】：

我刚刚对此进行了一些实验，据我所知，您需要三件事：

type

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

AFAIK，这适用于所有支持视频的桌面浏览器、iPhone 和 Android。

这是标记：

<video id="video" autobuffer  >
<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 上进行了测试，效果很好。

【讨论】：

演示似乎无法在我的 Nexus One 上运行（当我点击“播放”时没有任何反应）顺便说一句，您提供的链接不适用于 2.3.3 Nexus One，消息：无法播放此视频 @RafaelRoman 我已经包含并回答了，这有望在 Nexus One 中工作（至少对我有用）：***.com/a/8952025/1108032 我无法让它在我的 4.0.4 平板设备上运行。我认为本地是要走的路在 Android 5.x 上不起作用，在点击播放之前视频是黑色的【参考方案2】：

Roman 的回答对我来说效果很好 - 或者至少，它给了我所期望的。在手机的原生应用中打开视频和 iPhone 完全一样。

调整您的观点并期望视频在其自己的应用程序中全屏播放并为此编码可能是值得的。令人沮丧的是，点击视频并不足以让它以与 iPhone 相同的方式播放，但看到它只需要一个 onclick 属性即可启动它，这并不是世界末日。

FWIW，我的建议是使用海报图片，并使其明显可以播放视频。我目前正在开展一个项目，该项目正是这样做的，客户对此很满意——当然，他们还免费获得了一个网络应用程序的 Android 版本，因为合同只是为了一个iPhone 网络应用程序。

只是为了说明，下面是一个有效的 Android 视频标签。漂亮又简单。

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

【讨论】：

在桌面浏览器上有一些奇怪的问题——在 chrome 和 firefox 中，如果你使用 controls 属性，当你按下暂停时会绕过 onclick 事件（所以视频实际上会暂停），但不知何故，当您单击播放时，什么也没有发生 - 您必须单击视频（而不是实际播放按钮）才能恢复视频。这行得通。我可以在 Android 上播放 h264 视频。文件后缀为 mp4。【参考方案3】：

这里我介绍了我的一个朋友如何解决在 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 事件，让它进行实际播放。这几乎对他有用——除了没有展示海报。最奇怪的部分来了——每次他设置标签的poster 属性时，他都会收到ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"。最后他发现了这个问题，这很奇怪——原来他在video标签中保留了source子标签，但从未使用过。奇怪的是，这正是导致问题的原因。现在看看他对video 部分的定义：

<video   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。

【讨论】：

我必须参考 JSInterface 添加 javascript 函数 playVideo(videoName) 才能使其正常工作 - 对于以前没有使用过这种技术的人来说可能并不明显。此外，我更喜欢在 startVideo 函数中使用 getExternalDirectory() 构建完整路径，并且只使用从 Javascript 传入的文件名。为我工作，除了当视频活动关闭并且 WebView 重新获得焦点时海报图像消失（我的 WebView 嵌入在 ViewPager 中）。谢谢。感谢 cmets。我添加了javascript调用脚本，广告也完全同意视频路径构建的评论，但是我认为这是每个人都可以根据自己的需要解决的问题，我也遇到了“标头主机的空值或空值”错误。这是未使用的源标签。这个源标签实际上是由 ios 应用程序（phonegap 应用程序）使用的，所以现在我只在 ios 上插入源标签，它工作正常。感谢您帮助解决这个奇怪的问题。【参考方案4】：

如果您手动调用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"   controls></video>

  ...

</body>
</html>

【讨论】：

这让我看到一个电影图标，我可以点击它在视频应用程序中查看 MP4，但仍然没有给我内嵌视频。从 Android 3.1 开始支持内嵌视频。任何人都可以确认这适用于蜂窝+设备吗？我无法让它在 3.2 上运行。我能听到声音，但看不到任何视频。【参考方案5】：

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

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

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

【讨论】：

对我来说与 SGS 2.1update1 上的 html5test.com 相同。你找到嵌入视频的方法了吗？当我打开测试站点broken-links.com/tests/video 并单击播放图标时，视频播放但不是嵌入的（如在桌面/Firefox 上），而是在媒体播放器中打开。在我的 LG Optimus Black 上也是如此……但断开链接的演示有效。我会尝试使用手刹进行编码。【参考方案6】：

在我正确编码视频之前，没有什么对我有用。尝试本指南以获取正确的手刹设置： http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

【讨论】：

也为我解决了这个问题。但是 mpeg4 不适用于其他浏览器，所以我创建了 2 个视频层。首先是 mpeg4，然后是 h264：

【参考方案7】：

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

<video id="movie"   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

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

这对我有用：

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

【讨论】：

【参考方案10】：

它应该可以工作，但请注意分辨率： Android 2.0 and webkit

Canvas 开箱即用，虽然地理定位似乎不起作用全部在模拟器中。我当然做过将其发送到模拟位置以将其发送到工作，所以我不知道这是什么就像在真正的手机上一样。一世可以用视频说同样的话标签。有问题不是实际上播放视频，但我认为这是视频的事实比什么分辨率更高模拟器可以处理。我们会知道更多一旦有人在摩托罗拉上尝试过 Droid 或其他下一代 Android 设备

【讨论】：

我会尝试调整分辨率，但我使用的是实际设备，而且视频流（网络摄像头）的分辨率很低。【参考方案11】：

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

你可以使用类似的东西

self.location = URL_OF_YOUR_3GP_FILE

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

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

【讨论】：

嗨，我用android WebView试过这个，但它不起作用，我还需要做其他设置吗？我正在使用代码in this link。不，我不知道有什么其他方法可以做到这一点。【参考方案12】：

根据：https://***.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 浏览器中它只会全屏显示，但它会没有开始玩。用最新版本的安卓浏览器测试，铬，Safari。

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

【讨论】：

【参考方案13】：

经过大量研究，在许多不同的设备中，到目前为止，我得出了一个简单的结论，即MP4 的支持比MOV 格式少得多。因此，我在所有浏览器上使用所有 Android 和 Apple 设备都支持的 MOV 格式。我检测到该设备是移动设备还是桌面浏览器，并相应地设置了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;

【讨论】：

【参考方案14】：

我尝试使用.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 年至少有几年的历史）。

【讨论】：

【参考方案15】：

Galaxy S 和 iPhone 等 Google (android) 手机均支持 HTML5。但 iPhone 不支持 Flash，而 Google 手机则支持。

【讨论】：

Google 手机在 Android 4.0 (ICS) 中放弃了 Flash，而且这个问题与 iPhone 无关。

以上是关于Android 上的 HTML5 <video> 元素的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 视频播放（）不播放 ionic 3“ios 和 android

Android 上的 HTML5 <video> 元素

Android 上的 HTML5 <audio> 标签

HTML5 视频全屏未填充在移动视图上的 android 浏览器上

在这个简单的页面中，Android Chrome 上的 HTML5 视频控件不会跨越整个视频宽度

html5 Android 应用上的 Google 导航