simulated click onLoad not working on mobile

Question

I tried making an alternative for autoplay video. It works fine on desktop but still needs a tap on mobile. Atleast on my Samsung Galaxy Express and Chrome I just tried. Idea was/is to make button display:none if autoplay is working well enough.
So I have Html video with play/pause button triggered with JS. And to make an autoplay I simulated the click function.
The click onLoad seems to kind of happen because it looks like a pause button when loading the page. But the video is not playing before tapping.
I do know HTML5 Video autoplay is not supported by mobile. I also know there have been similar questions. But know I would like to understand what is going on with the JS. And ofcourse would not mind a solution for autoplay mobile.

Here is my code.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Js Philosophy</title>
<script type="text/javascript">
function ClickButton()
{
document.getElementById('play').click();
}
</script>
</head>
<body onload="ClickButton()">
<script type="text/javascript">

  function vidplay() {
     var video = document.getElementById("Video1");
     var button = document.getElementById("play");
     if (video.paused) {
        video.play();
        button.textContent = "||";
     } else {
        video.pause();
        button.textContent = ">";
     }
  }
  </script>

        <div >

        <video id="Video1" width="100%" poster="/video/thumb1.jpg">
           <source src="/video/peakvideo.mp4" type="video/mp4" />
            <source src="/video/peakvideo2.mp4" type="video/mp4" />
             <source src="/video/peakvideo.webm" type="video/webm" />
             <source src="/video/peakvideo.ogv" type="video/ogv" />
             not supported
        </video>

        <div id="buttonbar" class="">
            <button id="play" onclick="vidplay()">&gt;</button>
        </div>
            </div>
            <div class="main">Ur stuff beginsss here under</div>
</div>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:13

You don't need to imitate a click. Just run your function after DOM loaded.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Js Philosophy</title>

  <script type="text/javascript">
    function vidplay() {
      var video = document.getElementById("Video1");
      var button = document.getElementById("play");
      if (video.paused) {
         video.play();
         button.textContent = "||";
      } else {
         video.pause();
         button.textContent = ">";
      }
    }

    document.addEventListener("DOMContentLoaded", function(event) {
      vidplay();
    });
  </script>
</head>
<body>
  <div>
    <video id="Video1" width="100%" poster="/video/thumb1.jpg">
      <source src="/video/peakvideo.mp4" type="video/mp4" />
      <source src="/video/peakvideo2.mp4" type="video/mp4" />
      <source src="/video/peakvideo.webm" type="video/webm" />
      <source src="/video/peakvideo.ogv" type="video/ogv" />
      not supported
    </video>

    <div id="buttonbar" class="">
      <button id="play" onclick="vidplay()">&gt;</button>
    </div>
  </div>

  <div class="main">Ur stuff beginsss here under</div>
</body>
</html>

You also had invalid markup. The last closing div.

Update

Found the documentation. It's forbidden on iOS. Also found duplicates:

Can you autoplay HTML5 videos on the iPad?

Autoplay an Audio File on Mobile Safari

How can I autoplay media in iOS >= 4.2.1 Mobile Safari?

Thanks I´ll look. The wrong markup was because I deleted some extra content. So I missed one div. Sorry for that. — Mik_A, Apr 02 '15 at 12:15
curiously works on native browser in Android My simulated Click did function somehow on chrome. But **document.addEventListener("DOMContentLoaded", function(event) { vidplay();** disables the play alltogether — Mik_A, Apr 02 '15 at 13:55
You need to remove onLoad from body tag if you use suggested solution. — Zakhar Day, Apr 02 '15 at 19:38

simulated click onLoad not working on mobile

1 Answers1