How to handle HTML5 media events using jQuery?

jQueryWeb DevelopmentFront End Technology

To handle HTML5 media events using jQuery, use the click() method.

Example

You can try to run the following code to learn how to handle HTML5 media events such as playing a song:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var x = $(".myPlayer").length; // Count total audio players
    var z = 0; // Start at first audio player

    $("#play-bt").click(function(){
       $(".myPlayer")[z].play();
       $(".message").text("Music started");
    })
    $("#stop-bt").click(function(){
       $(".myPlayer")[z].pause();
       $(".myPlayer")[z].currentTime = 0;
       $(".message").text("Music Stopped");
    })

});  
</script>
</head>
<body>

<audio class ="myPlayer" name="" src="/html/Kalimba.mp3" ></audio>

<div class ="message"></div>

<a id="play-bt" href="#">Play music</a><br>
<a id="stop-bt" href="#">Stop music</a><br>

</body>
</html>
raja
Published on 20-Dec-2017 09:12:42
Advertisements