HTML Media

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

Audio

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- 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>
<!-- 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>
<!-- 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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

 

 

 




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published. Required fields are marked *