在浏览器中播放 HTML5 视频——什么适用于大多数 Android 设备？答案

【问题标题】：Playing HTML5 Videos in Browser -- What Works for Most Android Devices?在浏览器中播放 HTML5 视频——什么适用于大多数 Android 设备？
【发布时间】：2012-12-11 00:50:59
【问题描述】：

我正在尝试让 HTML5 视频在移动设备上播放。它们似乎在最新版本的 iOS 上运行良好，但我发现与 Android 设备有很多不一致。

我正在使用 video.js 并监听对缩略图的点击，这反过来将元素替换为 HTML5 视频并自动播放。以下代码在 Android 模拟器上完全不起作用（单击缩略图没有任何作用）。当我在自己的 Droid Razr 上尝试时，它开始加载视频，然后浏览器死机。这发生在原生浏览器和 Chrome 中，它告诉我这是设备原生的。

$(".video").live("click", function(e) {
    e.preventDefault();
    $(this).replaceWith("<video id='" + $(this).data("video-id") + "' class='video-js' preoload='auto' width='100%' height='100%' poster='" + $(this).data("video-poster-url") + "'><source type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' src='" + $(this).data("video-url")  + "'></video>");

    video  = _V_($(this));
    video.ready(function() {
       this.play();
       this.requestFullScreen();
    });
});

HTML 最终变成：

<video id='fv3530' class='video-js' preoload='auto' width='100%' height='100%' poster='/posters/fv3530.jpg'>
    <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src='/videos/fv3530.mp4'>
</video>

有人知道为什么这会导致 Android 设备完全死机，以及我可以做些什么来让视频在大多数 Android 设备上始终如一地运行？

谢谢！

【问题讨论】：

能否请您确认其中一个答案或开始赏金。谢谢。

标签： javascript android html video

【解决方案1】：

请提问：HTML5 <video> element on Android

显然，根据http://developer.android.com/about/versions/android-2.0-highlights.html，有可能在 android 上使用 HTML5 视频但是有一些严格的参数可以使这项工作（请参阅对问题的检查回复）。

在您的情况下，使用模拟器处理事件并不容易，尤其是html5等，因此您应该始终使用真实设备进行测试（非常推荐）。关于您的手机，它无法正常工作的可能原因是您使用了不受支持的视频编解码器。

【讨论】：

【解决方案2】：

从source 声明中删除type 属性。这通常会导致 Android 出现问题，尤其是旧版本。

您的来源声明应该是：

<source src='/videos/fv3530.mp4'>

我有一个small site，它在 Android 上有一个可用的 HTML5 视频（刚刚在运行 Android 2.2 的 HTC Desire 上测试过）。

【讨论】：