- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to handle HTML5 media events using jQuery?
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:
<!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>
- Related Articles
- How can I handle Server-Sent Events in HTML5?
- How to Handle JavaScript Events in HTML?
- How to handle a link click event using jQuery?
- How to handle a double click event using jQuery?
- How to bind events on dynamically created elements using jQuery?
- How to handle a mouse right click event using jQuery?
- How to bind jQuery events on elements generated through other events?
- How to handle jQuery AJAX error?
- How to handle Geolocation errors in HTML5?
- How to fire jQuery events with setTimeout?
- How to store and reproduce jQuery events?
- How to implement custom events in jQuery?
- How to handle jQuery AJAX success event?
- How to handle errors in HTML5 Web Workers?
- How we can prioritize jQuery events?
Advertisements