HTML5 Video Tutorial

Semantic video embedding

If an online video is not meant to be part of an interactive multimedia presentation, that is best provided by SMIL along with its native metadata [1], the resource is described by (X)HTML markup.

In contrast to the complexity of video embedding with the embed element in HTML versions up to 4.01, or the object element in XHTML, (X)HTML5 introduced the video element that provides semantic meaning to video contents and full control over the embedded file [2]. Features such as height or width can be added optionally. An image representing a frame from the video can also be defined in case the video cannot be rendered. Alternate content can also be given in the form

						
<video src="sample.ogv" width="320" height="240" poster="sample.jpg">
  <p>Download the <a href="video.ogv">sample video</a> (OGV, 5.34 MB)</p>
</video>

Video controls can be shown or hidden in the browser by the controls attribute on the video element:

<video src="xyz.mov" controls="controls">
</video>

Since the video codec support is different in each browser, the same video can be provided in various formats, avoiding the need to download videos that cannot be played on the system, e.g.,

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg">
  <p>Download the <a href="video.ogv">sample video</a> (OGV)</p>
</video>

The type attribute declares the Internet Media Type (MIME type) of the video file. These specifications are described in IETF/ISOC Request for Comments (RFC) documents and are standardized by IANA registration [3]. The most common video Media Types are summarized in Table 1.

**Table 1** Common MIME types for video.
Media type	Specification	Description
`video/mpeg`	RFC 2045 [4], RFC 2046 [5]	MPEG-1 video
`video/mp4`	RFC 4337 [6]	MP4 video
`video/ogg`	RFC 5334 [7]	Ogg Theora or other video
`video/quicktime`	IANA registered [8]	QuickTime video
`video/x-ms-wmv`	MS KB 288102 [9]	Windows Media Video

The problem is that MIME types do not reflect the codecs of videos stored in container formats (e.g., H.264 in MPEG-4). They can be provided by the codecs parameter:

<video controls="controls">
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <p>Download the <a href="video.ogv">sample video</a></p>
</video>

The video element of (X)HTML5 provides playback support detection, including the canPlayType() method on the media element [10] or the onerror event listener.

Certain browsers cannot stream the video or automatically download the whole video file even if playback has not been started yet. One of the exceptions is Firefox 3.6+ which only downloads a fragment necessary to determine duration and render a frame from the video. This behavior can be overridden by the preload attribute. The attribute value none forces the browser to avoid downloading. The metadata attribute value hints that enough data should be downloaded only to show a frame and determine duration. The value auto downloads the whole video if possible. The effect of preload="none" can be simulated in browsers that do not support it by omitting the src attribute and source elements that are provided only if the user clicks a button:

<video controls="controls">
  Video not supported
</video>
<input type="button" value="Load video" onclick="document.getElementsByTagName('video')[0].src = 'video.mp4';">

Additionally, customized controls can be added to the video embedding since the DOM API for video in (X)HTML5 supports several events that can be implemented through JavaScript. For example:

<script>
  var video = document.getElementsByTagName('video')[0];
</script>
<input type="button" value="Play" onclick="video.play()">
<input type="button" value="Pause" onclick="video.pause()">

Currently, the src attribute value of the video tag should be a physical file which makes it impossible to embed videos from YouTube.

(X)HTML5 videos can be dynamically drawn on a canvas with JavaScript using the drawImage method:

<video src="video.mp4" controls="controls">
  Video not supported
</video>
<canvas id="canvas">
  Canvas not supported
</canvas>
<script>
  var ctx = document.getElementById('canvas').getContext('2d');
  var video = document.getElementsByTagName('video')[0];
  video.onloadeddata = function(e) {
    ctx.canvas.width = video.videoWidth;
    ctx.canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0);
  }
</script>

Machine-readable metadata

Certain metadata formats such as microformats and RDFa apply and reuse features of existing technologies (e.g., the rel attribute) [11] while others such as Creative Commons and Dublin Core introduce new annotations, typically through the namespace mechanism.

Metadata formats reusing attributes

The Web document attributes used by RDFa are ideal for metadata on generic objects as well as videos [12].

A common feature of video sharing portals is the review option which can be implemented with metadata support by using the hReview microformat (class="hreview").

Some or all rights of video authors are often reserved. Many licenses associated with videos are sophisticated and users cannot be expected to know them. The rel="license" microformat can be added to hyperlinks that point to the description of the license. In the case of the Creative Commons Attribution-ShareAlike license, for example, rel="license" should be

<video src="lesson1.ogv" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" />

The value of the href attribute provides the associated URI of the resource where the license is described.

Video licensing with HTML5 microdata

The concept of microdata has been introduced in HTML5 for labeling content in order to describe a specific type of information, such as licensing information to eliminate copyright issues and to contribute to advanced Web searches [13]. For example:

<footer>
  <p id="licenses">All videos are licensed under the <a itemprop="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share Alike license</a>.</p>
</footer>

Metadata from external vocabularies

Being a general Web resource description and modeling language, Resource Description Framework (RDF) can be used for describing any kind of resources that can be identified by a URI [14], including video files.

RDFa (RDF in attributes) provides the option to embed rich metadata within certain attributes of Web documents [15]. The set of attributes to be used for this purpose are about, src, rel, rev, href, resource, property, content, datatype, and typeof, all of which are supported in (X)HTML5. RDFa is indexed by Google and Yahoo and supported by the highest traffic video sharing website YouTube.

The Dublin Core vocabulary has several metadata that can be used for video contents such as MIME type, date and time, associated URI, country, and language [16].

Video licenses can be efficiently denoted by Creative Commons, which is also ideal for describing copyright in RDF with the properties cc:permits, cc:requires, cc:prohibits, cc:jurisdiction, cc:legalcode, cc:deprecatedOn; and the classes Work, License, Jurisdiction, Permission, Requirement, and Prohibition [17].

The digital management of rights can be performed by using the Open Digital Rights Language (ODRL) [18].

Education videos can be described by the IEEE Learning Object Metadata (LOM) [19].

Several metadata associated with videos are supported by multiple formats such as personal data on the staff (DC, FOAF, DOAC, Bio, etc.) or geographic positions (e.g., Geo [20]).

Due to the overlapping vocabularies of metadata technologies, certain formats have never been widely distributed (e.g., SOMA [21]).

Combining metadata

If no additional constraints apply, metadata can be arbitrarily mixed through multiple independently developed vocabularies. For example, Microformats can be combined with (X)HTML5 microdata. Another example is Dublin Core that can be used simultaneously with LOM or ODRL metadata [22].

Depending on the metadata formats, duplication might be eliminated by transforming metadata from one format to another (e.g., microformats to the far more generic RDFa [23]).

Video metadata in SEO

Apart from special approaches of search engines for labeling videos such as the Video Sitemap of Google [24], standard metadata formats can also be provided in a machine-readable way. Two examples are described in the following Chapters.

Facebook Share and RDFa Rich Snippets

The image and video resource URLs are required for Facebook Share (image_src and video_src). The medium property supports the values audio, image, video, news, blog and mult. Video size can be provided by using the video_width and video_height properties. The MIME type of videos can be identified by video_type (with the value application/x-shockwave-flash). A brief description of up to 200 characters can be written by using the description property. The title of the video, that can be a maximum of 60 characters long, can be added by the title property, i.e.,

<meta name="title" content="Smith plays BWV543" />
<meta name="description" content="Organist John Smith plays Praeludium and Fuge in A minor by J. S. Bach" />
<link rel="image_src" href="http://example.com/543thumb.jpg" />
<link rel="video_src" href="http://example.com/bach/543vid.swf" />
<meta name="video_width" content="640" />
<meta name="video_height" content="385" />
<meta name="video_type" content="application/x-shockwave-flash" />

All these properties are identified by Google.

Yahoo! SearchMonkey RDFa

Yahoo! Searchmonkey metadata can be provided on the object tag as follows:

<object type="application/x-shockwave-flash" width="480" height="385" data="http://www.youtube.com/v/a38-oj8VEXI&hl=en_US&fs=1&" rel="media:video" resource="http://www.youtube.com/v/a38-oj8VEXI&hl=en_US&fs=1&" xmlns:media="http://search.yahoo.com/searchmonkey/media/"
xmlns:dc="http://purl.org/dc/terms/">
<a rel="media:thumbnail" href="http://example.com/prev.jpg" />

The Media namespace xmlns:media is required and the only acceptable value is "http://search.yahoo.com/searchmonkey/media/". The GIF, JPEG, or PNG image with a resolution of 105×93 pixels that previews the video before the user clicks on the play button should be defined by the URI as the href attribute value of media:thumbnail. The video to be played when the user clicks the play button should be defined the resource of media:video.
All other tags are optional, including the Dublin Core namespace (xmlns:dc) and DC metadata (dc:date, dc:creator, dc:subject, dc:identifier, dc:license, dc:contributor, dc:description), the media metadata (media:title, media:height, media:width, media:duration, media:player, media:type, media:region, media:views), as well as review:rating [25].

Embedding videos as Flash

HTML5 has re-introduced the embed element for embedded contents that require plugins. Its name is identical to those of the HTML element used prior to XHTML object elements; however, the embed element has been modified in HTML5. The standard-compliant and browser-independent method for Flash embedding is Flash Satay which is also suggested by the World Wide Web Consortium [26]. The reason for the popularity of this method is the pre-installed Flash Player supported by most browsers. However, videos should be embedded as videos rather than generic or Flash objects.

Limitations

The advanced markup element of HTML5 dedicated to videos comes with a lack of consensus about codecs to support. To avoid a barrier for those videos already published in a special format, standardization would be required that considers not only the popularity of existing codecs, but also the emerging formats for High Definition video.

In spite of the large potential of video metadata, it cannot be fully exploited until social media and video sharing portals either remove all embedded metadata during upload, or apply a new, on-the-fly generated file without such metadata (even in another file format).

You can learn more about HTML5, video metadata, and standard-compliant video embedding from the book “Web Standards – Mastering HTML5, CSS3, and XML”.