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

Question

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.

possible duplicate of HTML5 Video autoplay on Mobile Browser — Alvaro Montoro
Have you found a solution for this issue? I have the same problem — George
poster goes to the video element, not the source element.. you can have multiple sources, but not multiple posters! — Brunis

Nikola Lukic Nikola Lukic · Accepted Answer · 2017-02-16T08:02:26

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/

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

1 Answers