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，您将收到警告＆＃34; 无法执行＆＃39;播放＆＃39; on＆＃39; HTMLMediaElement＆＃39;：API只能由用户手势发起。＆＃34; 这意味着您需要附加视频初始化，例如，点击事件

Answer 2

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

我一直在使用Chrome 61和嵌入式浏览器以及Safari 9＆amp; S 11，使用AngularJS（下面）编写的自动javascript播放/暂停。视频嵌入旋转木马中，因此有时可见，有时则不可见。总结：

我建议同时使用webm（vp8 / vorbis）和mp4（h264 / aac）格式。这些是最受支持的格式，并且具有相同比特率的等效质量。 ffmpeg可以对两者进行编码。
如果Chrome手机能够获得它，那么它似乎更喜欢webm，所以先把它放在首位。
如果浏览器在您将文件指向文件网址时播放文件，则此不会表示嵌入视频标记时会播放该文件，但它会告诉您格式是否为＆amp;如果它发挥作用，则支持编解码器。对于拥有分辨率太高的视频源，Chrome mobile似乎非常挑剔。
Safari（可能还有iOS）不会播放视频，除非由支持字节范围的服务器提供服务。例如，Apache，nginx和Amazon S3都支持它们，但许多较小的Web服务器（如WSGI服务器）不支持它们。
视频的顺序比源media属性更重要。始终首先拥有视频的低分辨率版本。以下示例使用1920x1080和1280x720。似乎移动浏览器遇到“太高分辨率”的视频，它只是停止处理其他来源并更喜欢海报。
拥有controls属性和手动游戏与通过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”属性添加到视频标签。：]

Answer 6

我整个下午都在解决iOS上的自动播放问题，发现您只是在禁用“ ECO MODE”，否则它将无法自动播放。

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

6 个答案: