Multimedia on the web is sound, music, videos, movies, and animations.

Audio

<!-- controls attribute specifies that audio controls should be displayed (such as a play/pause button etc) -->
<!-- loop attribute specifies that the audio will start over again, every time it is finished. -->
<!-- autoplay attribute specifies that the audio will start playing as soon as it is ready -->
<audio controls loop>
    <source src="assets/amanaki.ogg" type="audio/ogg">
    <source src="assets/amanaki.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

Video

<video width="650" height="500" controls>
     <source src="assets/lion_king.mp4" type="video/mp4">
     <source src="assets/lion_king.ogg" type="video/ogg">
     Your browser does not support the video tag.
 </video>

<div class="row">
    <div class="col-3">
        <h3>Media Video</h3>
    </div>
    <div class="col-9">
        <div class="btn-group" role="group" aria-label="">
            <button onclick="playVideo()" type="button" class="btn btn-secondary">Play</button>
            <button onclick="pauseVideo()" type="button" class="btn btn-secondary">Pause</button>
            <button onclick="stopVideo()" type="button" class="btn btn-secondary">Stop</button>
        </div>
        <video id="lionKingVideo" width="650" height="500" controls>
            <source src="assets/lion_king.mp4" type="video/mp4">
            <!-- <source src="assets/lion_king.ogg" type="video/ogg"> -->
            Your browser does not support the video tag.
        </video>
    </div>
</div>

<script>
var lionKing = document.getElementById("lionKingVideo"); 

function playVideo() { 
                console.log("paused: "+lionKing.paused);
                if (lionKing.paused) 
                    lionKing.play(); 
                else 
                    lionKing.pause(); 
}

function pauseVideo() { 
  if (lionKing.paused) 
         lionKing.play(); 
  else 
         lionKing.pause(); 
}

function stopVideo() { 
   lionKing.load();
}
</script>