How to play a multimedia file using JavaScript?

In this tutorial, we will learn how to play a multimedia file using JavaScript.

The multimedia file is the audio and video files. The multimedia files can be of different formats. wav and mp3 are two examples of audio file formats, whereas mp4 and mkv are examples of video file formats.

In HTML, multimedia files can be shown easily using different tags. We use the video tag for showing a video, and for audio, we use the audio tag. These two tags are quite similar, and many attributes are the same in both tags. The "src" attribute defines the path or URL of their respective files. Multiple alternating multimedia file resources can also be defined using the source tag, which is placed inside the video or audio tag.

Play an Audio File using JavaScript

Audio files are digital files that contain sound or audio. In JavaScript, the document.getElementById() method is useful for getting different attribute values of an element. It takes the id of an element in the parameter and returns an element object of that element (in this case, it is an audio tag), and from that object, we can play the audio file by using the method play().

Syntax

Users can follow the below syntax to play a multimedia file (Audio).

document.getElementById('myaudio').play()

In the above syntax, ‘myaudio’ is the id of an audio tag and by using document.getElementById method, we get the element object which has the play method.

Example

In the example below, we have used an audio tag to show an audio file in HTML, which takes a source tag for specifying the audio file path or URL. A button with the text “Play” has an onclick event associated with the function playAudio(). When the user clicks on the button, the playAudio() function will be executed, and in that function, we use the document.getElementById method and pass the id of our audio tag for getting the element object. After that, we called the play method to play the audio file.

<html>
   <body>
   <h3>
      Play a multimedia file (<i>Audio</i>) in JavaScript
   </h3>
      <div>
      <audio id="myaudio" controls>
      <!-- Use your audio path or URL in the src -->
      <source src="/..." type="audio/mp3">
      </audio>
   </div>
   <br/>
   <button onclick="playAudio()">Play</button>
   <script>
      function playAudio(){
         document.getElementById('myaudio').play()
      }
   </script>
</body>
</html>

Play a Video File using JavaScript

Video files are digital files that contain both visuals and audio. In JavaScript, The document.getElementById() method is useful for getting different attribute values of an element. It takes the id of an element in the parameter and returns an element object of that element (in this case, it is a video tag), and from that object, we can play the video file by using the method play().

Users can follow the below syntax to play a multimedia file (Video).

Syntax

document.getElementById('myvideo').play()

In the above syntax, ‘myvideo’ is the id of a video tag and by using document.getElementById method, we get the element object which has the play method.

Example

In the example below, we have used a video tag for showing a video file in HTML, which takes a source tag to specify the video file path or URL. A button with the text “Play” has an onclick event associated with the function playVideo(). When the user clicks on the button, the playVideo function will be executed, and in that function, we use the document.getElementById method and pass the id of our video tag for getting the element object. After that, we called the play method to play the video file.

<html>
<body>
   <h2>
      Play a multimedia file (<i>Video</i>) in JavaScript
   </h2>
   <div>
      <video id="myvideo" width="600" height="280"controls>
      <!-- Use your video path or URL in the src -->
      <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" 
         type="video/mp4">
      </video>
   </div>
   <br/>
   <button onclick="playVideo()">Play</button>
    
   <script>
      function playVideo(){
         document.getElementById('myvideo').play()
      }
   </script>
</body>
</html>

Control a Multimedia File using JavaScript

We have seen how to play a multimedia file using JavaScript. Now, we will see how we can control a multimedia file using JavaScript. We will control a video file and build the functionalities like play, pause, and stop. We will use the document to take the same approach we have taken before.getElementById method, but in this case, we will not only use the play() method for playing the video but also use the pause() method to pause the video and the load() method to stop the video.

Users can follow the below syntax to control a multimedia file (Video).

Syntax

document.getElementById('myvideo').play() // for play
document.getElementById('myvideo').pause() // for pause
document.getElementById('myvideo').load() // for stop or re-load

In the above syntax, ‘myvideo’ is the id of a video tag and by using document.getElementById method, we get the element object with the play, pause, and load methods.

Example

In the example below, we have used a video tag for showing a video file in HTML, which takes a source tag to specify the video file path or URL. Three buttons with the text “Play,” “Pause,” and “Stop” has an onclick event associated with the functions playVideo(), pauseVideo(), and stopVideo(), respectively. When the user clicks on these buttons, their respective functions will be executed, and we use the document in that function.getElementById method to get the element object. After that, we called the play() or pause() or load() methods according to the function usage.

<html>
<body>
   <h3>
      Control a multimedia file (<i>Video</i>) in JavaScript
   </h3>
   <p> Click the below buttons to control the multimedia file (video) 
   </p>
   <div>
      <video id="myvideo" width="600" height="280"controls>
         <!-- Use your video path or URL in the src -->
         <source 
         src="https://www.tutorialspoint.com/videos/sample1080p.mp4" 
         type="video/mp4">
      </video>
   </div>
   <br />
   <div>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      <button onclick="stopVideo()">Stop</button>
   </div>
   <script>
      let video=document.getElementById('myvideo')
      function playVideo(){
         video.play()
      }
      function pauseVideo(){
         video.pause()
      }
      function stopVideo(){
         video.load()
      }
   </script>
</body>
</html>

Updated on: 15-Sep-2022

894 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements