如何创建自定义HTML5视频控件？

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>