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

Question

我正在努力让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设备上一致运行？

谢谢!

Answer 1

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

您的源声明应该是：

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

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