Mp4 video in html5 video tag not playing in mobile chrome and mobile safari

问题

I have this code to play a video in a html5 page:

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

The problem is that it does not work in mobile chrome (Android Phone) and either in mobile safari (iPhone). But it works in "every" browser (tested with Safari, Chrome, Firefox) in desktop and also on mobile firefox (Android Phone).

How can I overcame this problem?

Edit: Added this code:

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

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

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

If I add a button that trigger the function playVid() it works. So I think the problem is on the autoplay. I tried to trigger the function with the load event but it does not works.

回答1:

Very simply there is no support for autoPlay on mobile safari . Please test all android browsers .

I use one trick (or show some popup to use event):

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  ...

Review :

I dont understand ios html5 politic . They stop supporting javascript console logger (i quest now :from ver 5.1 ios) .Auto play disabled , webrtc ... They wanna device who works perfect. Auto play can be dangerous on load. In near future i expect activation full html5 support on all mobile devices.

New update : I found this like positive answer :

Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

来源：https://stackoverflow.com/questions/32378805/mp4-video-in-html5-video-tag-not-playing-in-mobile-chrome-and-mobile-safari