HTML 5 Video Scrip­ting with Java­script

Here again comes our heron with 600 kbit/s and 848x480 pixels. This time we will be able to fully disfruit the video by slow motion, one-frame-steps and a scene directory (as far as your browser does already support all of it).

Apart from the rewind function and the scene/shot selection, which we have implemented ourselves (see below), all the functionality is directly supported via Javascript.

Reference; the video tag: Javascript Functions, Properties and Event Handlers

For all of you who are a little bit impatient and who just wanna know the methods, properties and event handlers used with the video object in order to set something up themselves quickly here comes a table with the most used functions sorted by topic. Of course we have also elaborated oncarrying methods and concepts.

A video tag can be inserted with document.createElement("VIDEO") into the document; its properties can be controlled via video.src, .autoplay, .loop, .controls und .preload (see my introductory article). video.addEventListener('canplay', fnname, false) does finally add an event listener to our new video object. The function invoked by this mechanism expects an event object e as parameter. You can thereby access the video object via e.target. "error" is another event listener for a function like function(e) { alert(e.code); }.

You can detect the progress in fetching the video by video.networkState.

According to the status field video.networkState the following events exist: loadstart, progress (downloading), suspend (loading of video suspended/finished), abort (downloading aborted), error, emptied (on reload), stalled (trying to get data but none available).

video.currentSrc denotes the source from out of which the source is being fetched. video.canPlayType(type) == '' / 'maybe' / 'probably' determines whether the given format can not be loaded at all, can maybe or probably be loaded.

In order to start a video at the right time video.readyState exists:

Again we have matching events like loadedmetadata, loadeddata, waiting, playing, canplay and canplaythrough. At last we do also have events for the given user actions: play, pause, seeking, timeupdate, ended, ratechange and durationchange.

You may determine whether a given time period has already been buffered, played or whether it is seekable (seek = jump to a certain point in time). buffered, played and seekable are TimeRanges objects. The number of time periods can be determined with timeranges.length; the start and end point of a given time frame with timeranges.start(i) and timeranges.end(i). We do additionally have the boolean status flags seeking and ended which are set while seeking to a new position or whenever the end of the video has been reached. video.startTime at last gives the position from which on the last playback time period had been started.

Interestingly it is also possible to read out the actual video frame pixel by pixel, to alter it by pixelwsise operations and then show the result inside a canvas object. However this can not be done directly. At first you need to copy the actual frame with drawImage from the video into a canvas which will need to be hidden from the user. From there you can read the image with getImageData pixel by pixel. You may finally want to create an altered image with createImageData which thereupon needs to be filled by hand. The pixels are stored all in a one dimensional array with an entry for red, green, blue and alpha (opacity) in sequence for each pixel. After filling the newly created pixel array you may show the results with putImageData.

Sourcecodes of the Embedded Video

Let us first have a look at the HTML control elements for the video. There is nothing really special to be noted except that the buttons have been labeled with Unicode characters. Some of the Unicode characters have been selected with kcharselect while others can be looked up by their name like the RIGHT-POINTING TRIANGLE. Let us also have a short look at the embedded Javascript hook 'oncanplay' of the video tag as well as the onclick and onchange events of the slider, the option list and the push buttons.

If you want to have multiple videos in one web page you will need to assign them different id-s. The id-value (here: 'ReiherVideo') needs then to be exchanged for all onclick and onchange function invocations. Other elements do not need to be changed as they are identified automatically by InitControls(this) via their 'class=' name inside the VideoContainer.

Let us start by playing the video without considering the rewind functionality. We have the procedure PlayPause which calls PlayVideo and PauseVideo. We will never call video.play() and video.pause() directly because PlayVideo and PauseVideo need to adjust the button labels. video.play() should only be called if the video does not play yet because it may otherwise cause the player to start from the beginning. Even a video.pause() followed by a video.play() would not do what we want as the video would remain stopped (Apparently it takes some time for the .pause() action to take effect.).

If we click onto a scene in the scene list at the right side SelectScene is called. SelectScene does only need to set video.currentTime in order to make the jump. After that we call UpdateTime like each time after making a change to video.currentTime in order to make the time slider show the correct playback position (only exception to this rule is GotoPos which is called by direct clicks on the time slider so that there is no need to update the slider any more.).

UpdateTime is by the way also the hook which is directly called during video playback in order to update the time slider position. UpdateTime calls CheckForScene in sequence which sorts out the actually played scene basing on the playback position. It does so by accessing the DOM-tree of the scene selector where the option fields are child nodes listed in the correct order as they are displayed. Access to the DOM-tree is only necessary if we leave the current scene which is retained as long as our playback position lies withing curSceneStart and curSceneEnd

Somewhat tricky is also the implementation of the playback buttons because it is always the button with the currently selected playback speed that needs to turn into a pause button (We have different speeds like normal, fast forward, rewind and slow motion.). This can simply be done by resetting the labels of all buttons each time and by only turning the pressed button into a pause button afterwards.

The matching of the current playback speed requires ratedelta because the video.playbackRate may be adjusted a little bit whenever we set it especially when setting it to a real number (rounding).

Let us now explain the rewind function. It basically works by setting video.currentTime 25 times per second which can be done via setInterval. Unfortunately a simple implementation like this would not work. If the video position is updated faster than the browser can show it the display will remain the same during the whole rewind. The browser in deed waits some time if many changes to video.currentTime happen within a small time frame. The procedure UpdateTime detects whenever a new frame is shown and causes video.currentTime not to be changed again in the meantime. The variable last_frame_shown is set to true if the last frame has already been shown and a new frame may then be displayed.

The implementation of the other handles like Mute and AdjustVolume is very streight forward; I will leave their discovery to the reader.

In order not to leave you in doubt about the usability of the presented code: it is licensed by LGPL and may be used for free and of course free of any charge.