Handling Media Events in HTML 5 audio and video

Example which allows to play the given video:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}
</script>
</head>
<html>
<body>
   <form>
   <video  width="300" height="200" src="/html5/foo.mp4">
       Your browser does not support the <video> element.
   </video>
   <input type="button" onclick="PlayVideo();"  value="Play"/>
   </form>
</body>
</html>

The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript:

Event Description
abort This event is generated when playback is aborted.
canplay This event is generated when enough data is available that the media can be played.
ended This event is generated when playback completes.
error This event is generated when an error occurs.
loadeddata This event is generated when the first frame of the media has finished loading.
loadstart This event is generated when loading of the media begins.
pause This event is generated when playback is paused.
play This event is generated when playback starts or resumes.
progress This event is generated periodically to inform the progress of the downloading the media.
ratechange This event is generated when the playback speed changes.
seeked This event is generated when a seek operation completes.
seeking This event is generated when a seek operation begins.
suspend This event is generated when loading of the media is suspended.
volumechange This event is generated when the audio volume changes.
waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Enjoyed this post? Share it!

 

Leave a comment

Your email address will not be published.