With the HTML5’s <video> element, you can display the player and play the video which, in most cases, meet your needs. But the real power of the <video> tag comes with the script.
1. Getting Video Object
The first step is to get the object of the <video> element.
<video id="myVideo" width="320px" height="240px" controls="controls"> The video cannot be played. </video>
var video = document.getElementById("myVideo");
2. Properties
You can retrieve or change the settings of the video through properties:
- videoWidth, videoHeight
- width, height
- src: used to specify the source programmatically
- currentSrc: repesents the browser’s pick when multiple sources are specified
- currentTime
- duration
- ended
- error
- paused
- muted
- seeking
- volume: (0 – 1)
3. Methods
- play()
- pause()
- load()
- canPlayType(type) : “”, “maybe”, or “probably”
Note that the “canPlayType()” method does not return the boolean value.
video.src = "funny.mp4"; if (video.ended) { video.load(); } video.play();
function getPlayableVideoFormat() { if (video.canPlayType("video/mp4") != "") return "mp4"; else if (video.canPlayType("video/webm") != "") return "webm"; else if (video.canPlayType("video/ogg") != "") return "ogv" else return ""; }
4. Events
- play
- pause
- progress
- error
- timeupdate
- ended
- abort
- waiting
- loadedmetadata
You can map the event handler to the specific event using the “addEventListner(eventName, function, useCapture)“.
vidoe.addEventListener("ended", handleWhenEnded, false);