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 开发者_JAVA百科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?

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>