KISVid - Introduction

Keep It Simple Video

(KIS - Vid)

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.

HTML5 provides a Video API designed to be used by Javascript. This tutorial shows how Processing.js can use that API directly with no (or possibly minimal) Javascript. Those familiar with Javascript will quickly recognize that Processing.js programmers use nearly the same commands as would be used in Javascript.

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.

Because it has been difficult to find simple and readable descriptions of the HTML5 video tag, a link to "HTML5 Video Javascript API and Demo" has been included at the end of this page. It includes a listing of the video attributes and events. The demo is written in Processing.js and is glorified extension of the KISVid sketch developed in this tutorial.

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.

Some Reminders that may Save a Lot of Time and Frustration

These are some things the author learned the hard way

1. Many, if not most, browsers no longer allow "file:///" for the protocol for a local file. At the time this is written, Firefox and Safari 5.1 are notable exceptions. For other browsers, the files need to be on a server so you can use the protocol "http://". You can install a simple server on your computer. I use python.exe which comes with the Python27 package.
2. In general, browsers can use either ".ogg" or ".mp4" files but not both with the video tag and class. ".webm" can also be used on several browsers. Theora files sometimes have the ".ogv" instead of "ogg" file type. Chrome is a notable exception in that it can handle all three file types. Fortunately, there are file converters available on-line so it is reasonably easy to provide both file types.
3. Some browsers (including IE9) capable of handling HTML5 tags fail to do so if an appropriate DOCTYPE (<!DOCTYPE html>) is not the first line in the file. The author has suffered the consequences when the doctype was accidentally omitted.
4. Question: Can more than one video file be played at the same time? Answer: Yes. You will need an Video object for each file.
5. I do not have Internet Explorer 10 and Safari 6 available and have been unable to test these tutorials in it. If you use either of these browsers, I would appreciate your letting me know how they work.

Begin Tutorial

The first part of the tutorial shows the video tag can be added to an HTML 5 page.

Next >

Updated 1/23/13