Html5 Javascript play pause video

We faced couple of scenarios where we want to auto play videos when a webpage loads, or we want to play some attractive small video on home page backgrounds as a banner which plays in loop, So In this article we will learn how we can auto play HTML5 Videos through javascript, with simple javascript methods we can able to achieve how to play and pause video in html, we have to expose some html5 video methods to play and pause vide in html5 automatically, the simple method is to play and pause the video is.

ele.play() // to play the video

ele.pause() // to pause the video

On above code we have ele.play() where ele is the video element, and if you want to pause video you simply need to apply ele.pause() , this is new feature of HTML5 which supports different media types and play the video,HTML5 supports AAC, MP3 and Ogg Vorbis for audio and Ogg Theora, WebM and MPEG-4 for video as a media type to plat and we can apply operations on them

So lets go step by steps, we first implement basic video tag as below, html5 play pause video.

The above is the basic video tag and in source we have passed the video url , we can also apply some directly operated html5 video option, on which we can directly apply on the video tag and use them for example

<video width="420" controls autoplay muted loop>
        <source src="sample.mp4" type="video/mp4">
</video>

We have used controls, autoplay, muted, loop , which we can directly apply on video and can use them, which is also described below

CONTROL : To show control buttons bar at the bottoms of the video
AUTOPLAY : To auto play the videos on page load
MUTED : If you don’t want any sound on the video
LOOP : if you want to continuously run the video repeatedly

The above by default method will run on the video load only, but if you want some dynamic operations like you want to play pause video on button click and you want to create your on media interface you can use the below code and operations , some time we face html5 video not playing issue, so lets try to resolve that.

To Play HTML5 Video

document.getElementById('play-and-pause-button').addEventListener('click', function () {
    var mediaVideo = document.getElementById('video');
    if (mediaVideo.paused) {
        mediaVideo.play();
    } else {
        mediaVideo.pause();
    }
});

On above code we have a button on our DOM which have some id play-and-pause-button and we have a video element which we have provided the ID as #video now on click of the video button, we just target the video element and check if the media is paused then only by using play() we will play the video and same as we have pause() function as well

To mute HTML5 video Dynamically

mediaVideo.muted = true;

Note : This will only work on desktop not on mobile, for some security reasons and content maturity html5 video Auto playing not Supported on mobile and tablets