web-dev-qa-db-ja.com

モバイルでHTML5ビデオタグのMP4ビデオが再生されないchrome and mobile safari

私はhtml5ページでビデオを再生するこのコードを持っています：

  <video autoplay loop id="bgvid">
    <source src="video-background.mp4" poster="/poster.png" type="video/mp4">
  </video>

問題は、モバイルchrome（Android Phone）およびモバイルサファリ（iPhone）では機能しませんが、「すべての」ブラウザで機能します（Safari、Chrome、Firefoxでテスト済み）デスクトップおよびモバイルFirefox（Android Phone）でも使用できます。

どうすればこの問題を克服できますか？

編集：このコードを追加しました：

  var myVideo = document.getElementById("bgvid");

  function playVid() {
      myVideo.play();
  }

  function pauseVid() {
      myVideo.pause();
  }

関数playVid（）をトリガーするボタンを追加すると、機能します。したがって、問題は自動再生にあると思います。 loadイベントで関数をトリガーしようとしましたが、機能しません。

androidhtmlmobile-safarimp4mobile-chrome
11
Mario

非常に単純に、モバイルサファリでの自動再生はサポートされていません。すべてのAndroid browsersをテストしてください。

私は1つのトリックを使用しています（またはイベントを使用するためにいくつかのポップアップを表示しています）：

var ONLYONETIME_EXECUTE = null;
window.addEventListener('load', function(){ // on page load
 
      document.body.addEventListener('touchstart', function(e){
    
    if (ONLYONETIME_EXECUTE == null) {   

        video.play();

        //if you want to prepare more than one video/audios use this trick :             
          video2.play();
          video2.pause();
          // now video2 is buffering and you can play it programmability later 
          // My personal testing was maximum 6 video/audio for Android 
          // and maybe 3 max for iOS using single click or touch.
          // Every next click also can prepare more audios/videos.

        ONLYONETIME_EXECUTE = 0;
    }

  }, false)
 
}, false)


// It is very usually that user touch screen  ...

レビュー ：

私はiOS html5政治を理解していません。彼らはjavascript console logger（i quest now：ver 5.1 ios以降）のサポートを停止します。自動再生が無効になり、webrtc ...彼らは完璧に機能するデバイスを求めています。自動再生はロード時に危険な場合があります。近い将来、すべてのモバイルデバイスでhtml5が完全にサポートされるようになる予定です。

新しい更新：これは肯定的な答えのように見つかりました：

IOS 10のリリース以降、Appleにより、ビデオの自動再生がミュートされるようになりました： https://webkit.org/blog/6784/new-video-policies-for-ios/ =

5
Nikola Lukic