CODEWITHSUNDEEP
jqueryvideohtml5-video
peace_love
peace_love

Reputation: 6461

How can I make a html 5 video play button only for mobile devices?

I want to create a video button especially for mobile devices. So on my page there should be only a "play" button, nothing else (no video window). If I click the "play" button, the video should automatically start fullscreen in my mobile device. And if I close this window or the video is finished, then the video should again disappear.

I am trying to achieve this with the following code, but the video doesn't want to hide:

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

$(document).ready(function(){
myVideo.hide();
});

function playPause() {
    if (myVideo.paused)
        myVideo.play();
        myVideo.show();
    else
        myVideo.pause();
        myVideo.hide();
}
<div style="text-align:center">
  <button onclick="playPause()">Play</button>
 
  <br><br>
  <video id="video1" width="420">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>

Upvotes: 0

Views: 743

Answers (1)

MarcelWeidum
MarcelWeidum

Reputation: 145

function playPause() {
    if (myVideo.paused) {
        myVideo.play();
        myVideo.show();
    } else {
        myVideo.pause();
        myVideo.hide();
    }
}

You forgot the brackets by if and else. And if you load jquery it should work!

Upvotes: 1

Related Questions