Search code examples
htmlvideoautoplay

HTML5 video not working in mobile browsers

HTML5 Video is not working on my mobile device. I have faced several issues while trying to load video on my mobile browsers. When I tried to remove controls, video itself is not showing in mobile browser. When I add controls, it loads but not playing using javascript play() function. All cases it works in desktop, but I need the same in mobile devices also

My html code is as follows

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    width:100%;
    max-width:500px;
    height:auto;
}
#either-gif-or-video video {
    display: none;
}
 @media (-webkit-video-playable-inline) {
#either-gif-or-video img {
    display: none;
}
#either-gif-or-video video {
    display: initial;
}
}
</style>
<script>

    window.onload = function() {
        startPlayback();

    }

    function fallback(video)
    {
        alert(video);
    }


    var video;
  var canvas;

  function startPlayback()
  {
    if (!video) {
      video = document.createElement('video');
      video.src = 'https://mytestsite.com/myvideo.mp4';
      video.autoplay = true;
      video.loop = true;
      video.muted = true;
      video.playsinline = true;
      video.controls = true;
      video.addEventListener('playing', paintVideo);
    }
    var promise = video.play();
    if (promise !== undefined) {
     promise.then(_ => {
       //alert('Autoplay started!');
     }).catch(error => {
       //alert('Autoplay was prevented.');
       // Show a "Play" button so that user can start playback.
     });
    }
  }

  function paintVideo()
  {
    if (!canvas) {
      canvas = document.createElement('canvas');
      canvas.width = 400;//video.videoWidth;
      canvas.height = 200;//video.videoHeight;
      //document.body.appendChild(canvas);
      document.getElementById("videoID").appendChild(canvas);

    }

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    if (!video.paused)
      requestAnimationFrame(paintVideo);
  }

</script>
<body  onclick="startPlayback()">
<h2>autoplay</h2>
<div id="videoID"></div>
<button onclick="startPlayback()" id="my-link">Start Playback</button>
</body>
</html>
Solution

  • You don't say what the problems is, but mobile browser video rules do change quite often so it is good to check the latest view.

    The following is a good source and contains the example below that works and can be used as a basis for your page:

    <video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

    The guidelines for autoplay are, at the time of writing (Feb 2021):

    < video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:

    • < video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
    • < video muted> elements will also be allowed to autoplay without a user gesture.
    • If a < video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
    • < video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
    • < video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

    Full HTML5 code example:

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Video Test</title>
</head>

<body>
  <h1>Video Test</h1>
  <video autoplay loop muted playsinline>
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
</body>

</html>

    Tested with iPhone 7 and iOS 11.2.6 and autoplays correctly.