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

Question

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

我正在使用 video.js 并监听对缩略图的点击，这反过来用 HTML5 视频替换该元素并自动播放。以下代码完全不能在 Android 模拟器上运行(单击缩略图没有任何作用)。当我在自己的 Droid Razr 上试用它时，它开始加载视频，然后浏览器卡住。这发生在 native 浏览器 和 Chrome 中，这告诉我它是设备 native 的东西。

$(".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 设备上始终如一地运行？

谢谢!

Answer 1

请回答这个问题:HTML5 <video> element on Android

显然，根据 http://developer.android.com/about/versions/android-2.0-highlights.html，Android 可以使用 HTML5 视频。 但是为了使这项工作有效，有一些严格的参数(请参阅对问题的已检查答复)。

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