5

我正在尝试让 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 设备上始终如一地运行？

谢谢！

4

2 回答 2

2

请看这个问题：Android 上的 HTML5 <video> 元素

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

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

于 2012-12-10T16:25:28.973 回答
1

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

您的源声明应该是：

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

我有一个小网站，它在 Android 上有一个工作 HTML5 视频（刚刚在运行 Android 2.2 的 HTC Desire 上对其进行了测试）。

于 2012-12-10T16:50:59.693 回答