Home

How to embed video

E-Mail This PageE-Mail This PagePDF versionPDF version

We support HTML5 compliant video using the <video> tag, but we also want to insure that all users of the WWW can read Technoculture. Authors should include a transcript of the content of the file in pdf (or embed the transcript directly on the webpage if it's short). Very brief clips may be described merely with a title, if that is sufficient, as in this example:

A Brief Welcome to Technoculture, 3 seconds:



NOTE: Please note that the <video> tag height attribute is 16 pixels shorter than the <embed> tag's height attibute. This is to make room for the controller when using Internet Explorer. The <video> tag in HTML5 inserts the controller automatically and fades it out when not in use. The <embed> tag will override part of the video image if designers don't code the additional 16 bytes.

Sample Code:

<video width="320" height="240" controls>
<source src="../../issues/demo/welcome.webm" type='video/webm; codecs="vp8,
vorbis"' />
<source src="../../issues/demo/welcome.theora.ogv" type='video/ogg;
codecs="theora, vorbis"' />
<source src="../../issues/demo/welcome.mp4"/>

<embed src="../../issues/demo/welcome.mp4" width="320"
height="256" autoplay="false" controller="true" loop="false"
plugsinpage="http://www.apple.com/quicktime/">

</video>

The code assumes that you will supply us with video in three formats (Theora [Ogg] and WebM for HTML5 compliant webpages; mp4 for backwards compatibility).

We support the use of Miro Video Converter, an open source free video converter that can make all three formats. Simply start with a QuickTime movie (.mov) and then convert it into the three formats. You can also use Miro to convert Flash videos or other kinds of video to HTML5 suitable formats. Visit the Miro Video Converter website for more information. We can always help if you are having troubles.

Note that Internet Explorer 9 readers will have to download and install the free WebM plugin for IE9 in order to view WebM videos.

The code will work for Internet Explorer 8 and earlier as well, but it will take a while to load as it tests the other three formats first then turns to an <embed> tag linked to a mp4 file.