HTML5 has a new features that allow HTML5 aware browsers to play audio and video files without having to have an add-on. This is convenient for developers because they can add video to their pages without having to assume that the user has installed the required add-on. (Of course, the user must have an HTML5 aware browser.) This tutorial is concerned with showing videos in HTML5 pages using Processing.js.
To illustrate how this can be done, this tutorial will develop a simple video player in a series of steps. The type of coding used to communicate with the video API can be used in many types of applications.
The video tag and video API are a super set of the corresponding audio elements. In fact, the coding for tutorials 0 to 3 are direct translations of the corresponding KISA coding with "Audio" replaced by "Video", "audio" replaced by "video" and KISA replaced by "KISVid", adding the "width" attribute to the <video> tags, and just a few other minor changes. The first real difference is the audio constructor introduced in KISA Tutorial 4 has no equivalent video constructor. Hence, the <video> tag is always required. Tutorial 5 is once again a translation of the corresponding KISA code except the audio constructor in the pde file is replaced by <video> tag in the .html file. Tutorial 6 is distinctly different. It introduces some of the unique features of the video that are not applicable to audio.
Those who have already studied the audio tutorials can typically skip to Tutorial 4 and then skip to Tutorial 6. Tutorial 7 is a standalone tutorial looking at the YouTube API for handling their videos. It can be used even by those who have not used the previous tutorials.
There are three types of files that can be played with the <video> tag. They include WebM which uses the .webm file type, MPEG-4 (.mp4 file types) and Theora which is seen in both .ogg and .ogv file types. However, at the time this was written, only Chrome could play all three file types. Because the author has experienced difficulties with .webm and .ogv file not being served properly from his servers, the tutorial only uses .mp4 and .ogg files. The problem is some servers do not use the proper mime type and some browsers can't handle the type specified. This is particularly true for Internet Explorer 9 which seems to be extremely picky about the mime type.
KISVid has been tested in HTML 5 aware versions of Firefox, Chrome, Opera, Safari 5.1, and Internet Explorer 9. Implimentations are not perfect. Safari 5.1 seems to have the most problems. It has a tendency to restart the video if it stalls because the lack data. Internet Explorer 9 seems to work well although it seems very picky about the mime type and seems somewhat slow about downloading. Download speed is a common problem with all the browsers. Chrome seems to work the best overall but one .ogg file caused an error even though the same file worked fine in Opera and Firefox. Another version of the same video ran great in Opera and Chrome but Firefox had strange problems with it. Hopefully implementations of video players will be improved as standards are clarified, browser bugs are worked out, internet download speeds improve and servers are updated to serve video files appropriately.
These are some things the author learned the hard way
The first part of the tutorial shows the video tag can be added to an HTML 5 page.