Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I create custom HTML5 video controls?

I'm interested in building a custom video player in HTML5. I have no problem embedding html5 video media utilizing the dual format of Ogg and h.264. My main issue is in referencing the API for the video tag element. What properties and event listeners do I have access to via javascript?

like image 680
Jim Jeffers Avatar asked Feb 17 '10 14:02

Jim Jeffers


1 Answers

For a basic UI all you need is play pause and volume.

HTMLVideoElement = document.getElementById("myvideo");
HTMLVideoElement.play();
HTMLVideoElement.pause();
HTMLVideoElement.volume = 1; /* values 0 to 1 */

These are nice

duration = HTMLVideoElement.duration;
currentTime = HTMLVideoElement.currentTime;

This will print out the complete list, but go beyond the HTML5 documented API with caution.

<video id="myvideo">
<source id="vidsource">
</video>
<script>
var HTMLVideoElement = document.getElementById("myvideo");
for (var key in HTMLVideoElement) { 
    document.write("<li>"+ key + ": " + HTMLVideoElement[key]);
} 
</script>
like image 79
Wayne Avatar answered Sep 27 '22 19:09

Wayne