Video

Section 4.31 Video

A video is a natural way to enhance a document when rendered in an electronic format, such as HTML web pages. It might be additional information that is hard to communicate with text (marine invertebrates swimming), a lecture or presentation that augments your text, or even some artistic work, such as a symphony legally hosted on YouTube, when you could never hope to get copyright clearance yourself.

PreTeXt supports videos you own and distribute with your source, videos shared openly on the Internet via stable URLs, and videos available on YouTube. Go straight to to the end of this section to see how easy it is to incorporate a YouTube video.

HTML5 web browsers are able to play video files in three formats, summarized in the following table.

Table 4.31.1. HTML5 video formats

Format	Extension	Reference
Ogg, Theora	`.ogg`	Free and open, Wikipedia ¹ `en.wikipedia.org/wiki/Ogg`
WebM	`.webm`	Royalty-free, Wikipedia ² `en.wikipedia.org/wiki/WebM`
MPEG-4	`.mp4`	Patent encumbered, Wikipedia ³ `en.wikipedia.org/wiki/MPEG-4_Part_14`

Subsection 4.31.1 Video Element

The <video> element is used to embed a video in output formed from HTML. Subsections below describe the different ways to indicate the source of the video. The video may be placed inside a <figure> or can be a panel of a <sidebyside>. The former will have a caption, be numbered, and hence can be the target of a cross-reference (<xref>). The latter is anonymous, but allows for horizontal layout, and combinations with other panels.

Size is controlled by a @width attribute expressed as a percentage (on the <video> element when used in a figure, or as part of the <sidebyside> layout parameters). Height is controlled by giving the aspect ratio with the @aspect attribute on the <video> element. The value can be a ratio expressed like 4:3 or a decimal number computed from the width divided by the height, such as 1.333. The default for videos is a 16:9 aspect ratio, which is very common, so you may not need to specify this attribute.

Options include specifying a @start and an @end in seconds as integers (no units) if you only want to highlight a key portion of a video. The @play-at attribute can take the following values

embed: Play in place (the default action).
popout: Play in new window or tab, at 150% width.
select: Provide the reader the choice of the other two options.

In an educational setting, sometimes the preview images provided by YouTube can be distracting, or for an author-provided video you may wish to provide your own preview image. The @preview attribute can take on the following values

generic: PreTeXt supplies a Play-button image.
default: Whatever the video playback provides. This is identical to simply not including @attribute at all
Path to an image file: Typically, this will be a relative path, starting with images/. This image will be used as preview for the online version and the print version.

Subsection 4.31.2 Author-Provided Videos

If you own and possess your video content, then you can distribute it with your PreTeXt source, and it can be hosted as part of your HTML output. Then the @source should be a relative file name that points to the file containing the video. If you are able to provide more than one of the three formats in Table 4.31.1, then you can provide the filename without an extension. If a browser cannot play one format, it may be able to play another. PreTeXt will write the code to make that happen, preferentially in the order of the table (more open formats first!). In other words, you can provide files in more than one format and increase the likelihood that a reader’s browser will find a format it can playback.

Subsection 4.31.3 Network-Hosted Videos

If a video is shared openly on the Internet, you can simply provide the full URL in the @href attribute. All the other attributes are the same as for the author-provided case, above. Read Subsection 4.30.4 for some considerations when authoring a URL, since there are a few gotchas.

You can frequently discover the URL of a video by first playing it, and then using a context menu (e.g. via a right-click) to reveal an option to copy the video’s location. However, note that there are various techniques sites use to make such a URL temporary, or otherwise unusable. So do some research about potential uses and test carefully. Our example below is provided from a United States government site.

Also, some video-sharing sites do their best to never make it easy to access the video as a file, so the construction described here will not be successful. Instead, they have links to “Share” or to “Embed” which will run their own (proprietary) player in your web browser. YouTube and Vimeo are two popular examples, and we provide explicit support, see Subsection 4.31.4 for YouZTube, while Vimeo is similar. For other sites, you have limited success with the <interactive> element, with a construction such as:

<interactive iframe="https://www.dailymotion.com/embed/video/x8mc0pr"/>

Here is one example of a network-hosted video in MP4 format (from the HTML5 Video Test Page

⁴

tekeye.uk/html/html5-video-test-page

at Tek Eye

⁵

tekeye.uk/

Figure 4.31.2. Jōren Falls, Kano River, Japan

Subsection 4.31.4 YouTube Videos

For a video hosted at YouTube, find the 11-character identification string in the address of a video you are viewing. It will look something like hAzdgU_kpGo. Then, instead of the @source attribute, simply provide this identification string as the @youtube attribute, such as

youtube="hAzdgU_kpGo"

That’s it. All of the options above are then implemented and realized with YouTube’s embedded player.

This can be a great way to incorporate popular or artistic content, legally, which might be difficult or costly to acquire through copyright clearance.

Video cover image — Figure 4.31.3. The Eagles, “Hotel California”

The pretext script (Chapter 47) may be used to download the provided preview images for YouTube videos (only). Filenames will be formed from the @xml:id of the <video> element. These will be used in static versions of output, such as print. Once custom preview images are implemented for author-hosted video, their static representation will improve.

Additionally, a YouTube playlist can be included in one of two ways. You may set the @youtube attribute to be a space-separated list of several video IDs (an “itemized” playlist). Alternatively, you may set the @youtubeplaylist attribute to a YouTube playlist ID (a “named” playlist). At present, a named playlist will not get a thumbnail image from Youtube, and either the “generic” thumbnail will be used or you can supply your own @preview.

Figure 4.31.5. YouTube Playlist

Make a feature-request if a scheme similar to the one for YouTube, but for some other video-hosting service, would be useful for your project.

Note that when a project is hosted at Runestone Academy (Chapter 32) a YouTube video becomes an activity that is part of a student’s reading assignement. So just like an interactive exercise, it needs a @label attribute. See Best Practice 4.12.1 for more.

Prev Top Next