Google Chrome不会在移动设备上播放HTML5视频

Question

我在最新版Chrome中的Android手机上播放视频时遇到问题.在像Puffin浏览器这样的其他浏览器中,视频正在播放.出于测试目的,我尝试了所有常见格式:

mp4
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video>
<br />
webm
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /></video>
<br />
ogg
<br />
<video autoplay="autoplay" loop="loop" onended="this.play()"><source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /></video>

https://codepen.io/anon/pen/ozpVNP

根据Mozilla的第一个视频,即MP4中的H.264 + AAC应该播放.我还考虑了这篇文章,并尝试通过JavaScript播放视频,并试图删除type第一个video标签上的属性但没有成功.

如何在Chrome on Mobile上运行？

Answer 1

<video autoplay loop autobuffer muted playsinline>
     <source src="video/video-hat.mp4" type="video/mp4">
</video>

Answer 2

问题是Google希望用户自己启动任何媒体,因此如果您调试设备Chrome浏览器,您将收到警告" 无法在'HTMLMediaElement'上执行'播放':API只能由用户手势启动. "这意味着你需要附加视频初始化,例如,点击事件

Answer 3

似乎没有任何关于此的重要信息,所以我想发布我的发现.

我一直在使用Chrome 61和嵌入式浏览器的Android 5.0.1 Samsung S4和Safari 9和11上的Chrome桌面和移动设备上调试html5视频播放,使用AngularJS编写的自动javascript播放/暂停(下图).视频嵌入旋转木马中,因此有时可见,有时则不可见.综上所述:

• 我建议同时使用webm(vp8/vorbis)和mp4(h264/aac)格式.这些是最受支持的格式,并且具有相同比特率的等效质量.ffmpeg可以编码.
• 似乎Chrome移动设备更喜欢webm,如果能够获得它,那么先把它放在首位.
• 如果浏览器在将文件指向文件网址时播放文件,这并不意味着它会在嵌入视频标记时播放,但它会告诉您格式和编解码器是否支持如果它正在播放.对于拥有分辨率过高的视频源,Chrome mobile似乎非常挑剔.
• Safari(可能还有iOS)不会播放视频,除非由支持字节范围的服务器提供服务.例如,Apache,nginx和Amazon S3都支持它们,但许多较小的Web服务器(如WSGI服务器)不支持它们.
• 视频的顺序比源media属性更重要.始终首先拥有视频的低分辨率版本.以下示例使用1920x1080和1280x720.似乎移动浏览器遇到"太高分辨率"的视频,它只是停止处理其他来源并更喜欢海报.
• 拥有controls属性和手动播放vs通过javascript播放似乎没有任何区别.
• muted即使视频没有音频,该属性也会阻止android在播放时在状态栏中放置一个小的扬声器图标,但是在屏幕外.作为旁注,如果您打算使用声音自动播放视频,我也会考虑您的观众.我个人认为这是一个坏主意.
• 该preload属性似乎没有太大的区别.无论如何,浏览器将倾向于自动预加载所选的视频元数据.
• 拥有源type属性不会阻止视频播放.如果有什么帮助浏览器选择最佳选择的源
• JS video.oncanplay事件是查看视频标记是否成功的最佳方式.如果你没有这样,视频将无法播放,但浏览器不会告诉你原因.

HTML:

<video class="img-responsive-upscale ng-scope"
  video-auto-ctrl loop muted preload poster="0022.png">
  <source src="vid_small.webm" media="(max-width: 1280px)" type="video/webm">
  <source src="vid_small.mp4" media="(max-width: 1280px)" type="video/mp4">
  <source src="vid.webm" media="(max-width: 1920px)" type="video/webm">
  <source src="vid.mp4" type="video/mp4">
  <img src="0022.png" alt="something"
    title="Your browser does not support the <video> tag">
</video>

使用Javascript:

<script type="text/javascript">
angular.module('myproducts.videoplay', []).directive('videoAutoCtrl',
  function() {
  return {
    require: '^uibCarousel',
    link: function(scope, element, attrs) {
      var video = element[0];
      var canplay = false;
      var rs = ["HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA"];
      var ns = ["NETWORK_EMPTY", "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE"];

      function vinfo() {
        console.log("currentSrc = " + video.currentSrc);
        console.log("readyState = " + rs[video.readyState]);
        console.log("networkState = " + ns[video.networkState]);
        bufinfo();
      }

      function bufinfo() {
        // tr is a TimeRanges object
        tr = video.buffered
        if (tr.length > 0) {
          var ranges = ""
          for (i = 0; i < tr.length; i++) {
            s = tr.start(i);
            e = tr.end(i);
            ranges += s + '-' + e;
            if (i + 1 < tr.length) {
              ranges += ', '
            }
          }
          console.log("buffered time ranges: " + ranges);
        }
      }

      video.onerror = function () {
        console.log(video.error);
      }

      video.oncanplay = function () {
        canplay = true;
        if (!playing) {
          console.log("canplay!");
          vinfo();
        }
      }

      var playing = false;
      function playfulfilled(v) {
        console.log("visible so playing " + video.currentSrc.split('/').pop());
        playing = true;
      }

      function playrejected(v) {
        console.log("play failed", v);
      }

      function setstate(visible) {
        if (canplay) {
          if (visible) {
            p = video.play();
            if (p !== undefined) {
              p.then(playfulfilled, playrejected);
            }
          } else if (playing) {
            video.pause();
            console.log("invisible so paused");
            playing = false;
          }
        } else {
          console.log("!canplay, visible:", visible);
          vinfo();
        }
      }
      // Because $watch calls $parse on the 1st arg, the property doesn't need to exist on first load
      scope.$parent.$watch('active', setstate);
    }
  };
});
</script>