HTML5 视频无法在手机上播放

Question

我正在尝试在我的网络上制作 HTML5 视频。在桌面上它工作得很好，但在我的手机上却不一样。相反，它似乎是典型的类似视频的图像，表明它应该是一个视频，但没有加载。我使用EasyHTML5Video 将我的视频转换为几种不同的格式，根据这个软件，它应该兼容很多平台...风格。

我的手机使用的是 Android 4.0。

HTML

<video id="video-background" preload="auto" autoplay="autoplay" poster="./images/starry_sky.jpg" loop="loop">
    <source src="./videos/time_lapse.m4v" type="video/mp4" />
    <source src="./videos/time_lapse.webm" type="video/webm" />
    <source src="./videos/time_lapse.ogv" type="video/ogg" />
    <source src="./videos/time_lapse.mp4" />
    <object type="application/x-shockwave-flash" data="./videos/flashfox.swf">
        <param name="movie" value="./videos/flashfox.swf" />
        <param name="allowFullScreen" value="false" />
        <param name="flashVars" value="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=false&loop=true&poster=./images/starry_sky.jpg&src=time_lapse.m4v" />
        <embed src="./videos/flashfox.swf" flashVars="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=false&loop=true&poster=./images/starry_sky.jpg&src=./videos/time_lapse.m4v"  allowFullScreen="false" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
        <img alt="time_lapse" src="./images/starry_sky.jpg"/>
    </object>
</video>

编辑

我尝试使用默认浏览器打开它。当我尝试使用 Google Chrome 时，对象标签内的图像已加载，但视频仍未加载。

Answer 1

根据this（相当老的）帖子，您可能需要添加以下 JavaScript 代码才能在 Android 上播放：

function myOnload() {
  var ua = navigator.userAgent;
  if (typeof ua != “undefined” && ua.match(/Android.* 2\.[0 – 2](\.[0 – 9]+)*[^.0 – 9]/i) !== null) {
    var vid = document.getElementById(“video”);
    vid.addEventListener(“click”, function() {
      vid.play();
    }, false);
  }
}
window.onload = myOnload;

另外，根据this SO question，你可能需要这样写video标签：

<video class="video" poster="/assets/video/posters/example.jpg" controls width="768" height="432" preload="none">
  <source src="/assets/video/example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="/assets/video/example.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>