JavaScript With HTML 5 Audio & Video

In this article, you will learn about the HTML 5 video and audio element. You will also learn how to control audio and video elements through JavaScript code.

You can add audio or video file in HTML 5 with special elements.

• <audio>…</audio>
• <video>…</video>

How to add video in HTML 5 document?

Use the following syntax:

    <video width="320" height="240" controls="controls">
       <source src="https://i.imgur.com/thdGMK3.mp4" type="video/mp4" />
       <source src="https://i.imgur.com/CcyBwFb.mp4" type="video/webm" />
       Your browser does not support the <video> element.
    </video>

View in Codepen

    <video width="320" height="240" controls="controls">
       <source src="https://i.imgur.com/thdGMK3.mp4" type="video/mp4" />
       <source src="https://i.imgur.com/CcyBwFb.mp4" type="video/webm" />
       Your browser does not support the <video> element.
    </video>

Some Rules for Audio & Video Element

Rule 1: add keyword “controls” this will enable the controls for your video
Rule 2: add multiple sources of video in different format.. the browser will select the suitable format to play the video.
Rule 3: make sure you define the type attribute with correct type of video.
Rule 4: define the width and height of the video.
Rule 5: all the above rules apply for audio also.
Rule 6: both video and audio are HTML DOM objects and have HTML 5 API, therefore, JavaScript can access them and manipulate them. You can also use CSS to style your audio or video player

Can You Embed YouTube Video?

You cannot embed a YouTube video in the video element, the special protection from YouTube prevent such actions. However, you may use iframe HTML element to embed YouTube videos.

<iframe width="560" height="315" 
src="https://youtu.be/cpvw_CRujg8"
frameborder="0" allowfullscreen></iframe>

What if the Browser do not understand the HTML audio
or video elements?

If the browser does not understand the audio or video tags. Create these elements in JavaScript only and set the different properties.

<script>
    let video = document.createElement(“video”);
    video.width=”400”;
    video.height=”500”;
    video.src =http://example.com/bunny.mp4;
    video.controls = true;
</script>

Audio and Video Player JavaScript API

The video and audio elements have methods, properties, and events so you can manipulate the HTML
elements using these DOM API.
In this section, we will write controls for our video.

HTML Code

<video id=”myVideo” width=”500” height=”500” >
    <source src=”bunny.mp4” type=”video/mp4”/>
    <source src=”bunny.ogg” type=”video/ogg”/>
</video>
<!—Now we will create 3 buttons for play, pause and rewind 
<button onclick=”playVideo()”>Play</button>
<button onclick=”pauseVideo()”>Pause</button>
<button onclick=”rewindVideo()”>Rewind</button>

JavaScript Code

let video = document.querySelector(“#myVideo”);
function playVideo(){
    video.play();
}
function pauseVideo(){
    video.pause();
}
function rewindVideo(){
    video.currentTime = 0;
}

See the Pen Create A Custom Control For HTML 5 Video by Girish (@Girish2500) on CodePen.

Another example: Play the next video automatically

In this example program, the video plays and then the JavaScript listener waits for an event called ‘ended’. This signal JavaScript code that the video has ended, and a function loads the next video source and plays it immediately.

HTML Code

<video id=”myVideo”>
<source src=”parrot.mp4” />
</video>

JavaScript Code

var video = document.getElementById(“myVideo”);
video.addEventListener(‘ended’,playNextVideo);
function playNextVideo(evt){
video.src = https://example.com/bunny.mp4;
video.play();
}

View in Codepen

See the Pen HTML 5 Video: Detect End of One Vid and Start Another by Girish (@Girish2500) on CodePen.