How can I create custom HTML5 video controls?

Question

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?

Answer 1

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>