web-dev-qa-db-ja.com

Google Chrome=はモバイルでHTML5ビデオを再生しません

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

QR Code for CodePen

Preview on mobile

Mozilla 最初のビデオによると、MP4のH.264 + AACが再生されるはずです。また、 この記事 を考慮して、JavaScriptで動画を追加で再生し、最初のtypeタグのvideo属性を正常に削除しようとしました。

モバイルでChromeで動作させるにはどうすればよいですか？

htmlhtml5google-chromevideo
10
modiX

問題は、Googleがユーザーが自分でメディアを開始することを望んでいるため、 デバイスをデバッグするchrome browser の場合、警告 "「HTMLMediaElement」で「play」の実行に失敗しました：APIはユーザージェスチャによってのみ開始できます。 "したがって、たとえば、クリックイベント

8
Jaco
<video autoplay loop autobuffer muted playsinline>
     <source src="video/video-hat.mp4" type="video/mp4">
</video>
10
Кристина Александрова

これについての良い情報はないようですので、調査結果を投稿すると思いました。

Chrome=デスクトップとモバイルでAndroid 5.0.1 Samsung S4でChrome= 61と埋め込みブラウザ、およびSafari 9および11（AngularJSで記述された自動JavaScript再生/一時停止を使用）（以下）ビデオはカルーセルに埋め込まれているため、表示されることもあれば表示されないこともあります。

  • Webm（vp8/vorbis）とmp4（h264/aac）の両方の形式にすることをお勧めします。これらは最もサポートされている形式であり、同じビットレートに対して同等の品質を持っています。 ffmpegは両方をエンコードできます。
  • Chrome mobileはwebmを取得できればwebmを好むので、最初にそれを置いてください。
  • ブラウザがファイルをURLにリダイレクトするときにファイルを再生する場合、このしないは、ビデオタグに埋め込まれたときに再生することを意味しますが、フォーマットとコーデックがサポートされているかどうかはわかります遊びます。 Chromeモバイルは、解像度が高すぎるビデオソースを持つことについて非常にうるさいようです。
  • 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>
7
racitup

ビデオがデスクトップクロームとデスクトップモバイルビューで機能するが、iPhoneでは機能しないという問題がありました。ビデオタグに「playsinline」プロパティを追加する必要があることがわかりました。 ：]

1
An Le

Chromeで「データ保存」モードをオフにした後、この問題は修正されました。

0
Harinarayanan Nagarajan