我正在尝试让 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 设备上始终如一地运行?
谢谢!
最佳答案
请回答这个问题:HTML5 <video> element on Android
显然,根据 http://developer.android.com/about/versions/android-2.0-highlights.html,Android 可以使用 HTML5 视频。 但是为了使这项工作有效,有一些严格的参数(请参阅对问题的已检查答复)。
在您的情况下,使用模拟器处理事件并不容易,尤其是 html5 等,因此您应该始终使用真实设备进行测试(非常推荐)。关于您的手机,它无法正常工作的可能原因是您使用的是不受支持的视频编解码器。
关于javascript - 在浏览器中播放 HTML5 视频——什么适用于大多数 Android 设备?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13804830/