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应该播放。我还考虑this article帐户，并试图通过JavaScript播放视频，并试图删除第一个type标签上的video属性，但没有成功。

如何在Chrome on Mobile上运行？

Answer 1

问题是Google希望用户自己发起任何媒体，因此如果you debug your device chrome browser，您将收到警告“无法在'HTMLMediaElement'上执行'播放'：API只能由用户手势启动。”这意味着您需要附加视频初始化，例如，点击事件

Answer 2

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

我一直在使用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>

Answer 3

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

Answer 4

在Chrome中关闭“数据保存”模式后，问题已解决。

Answer 5

我有一个问题，视频在我的桌面Chrome和桌面移动视图上工作，但不是我的iphone。结果我需要在视频标签中添加“playsinline”属性。 ：]