Skip to main content

Section 16 Video

First, a gratuitous reference to Exercise 11.2.3 about the derivative of a cosine.

You can specify a video by a filename if you host it as part of your document, or a URL giving a location on the Internet. There are a few extra features for YouTube videos, which are near the bottom of this page, so look there first if that meets your needs.

Embedded videos can make sense for a web version of your document. This is a video promoting the University of Puget Sound to potential new students, in WebM format. Support is limited to HTML5-capable browsers. The file format can be MP4, Ogg, or WebM, though this may vary depending upon the browser. Use a <video> element, within either a <figure> (numbered, captioned) or a <sidebyside> for more precise control. The @source attribute in this first example does not include an extension, and so three possibilities above will be searched for preferentially (you need only provide the video in one format, but providing additional versions will increase the chances every browser will find a compatible format).

Figure 16.1 University of Puget Sound Promotional Video

You can replace the “preview” image of a video with one of your own making. HTML refers to this as the poster, presumably because it advertises the video. The image you make should be of the same quality as the video, and with the same aspect-ratio, and is presumably one of the frames of the video. So a screenshot is the likely avenue. (Maybe we will have advice on how to do this easily, or see https://github.com/rbeezer/mathbook/issues/853.) On the <video> tag, include a @preview attribute which is the name of an image file, including a relative path. (JPEG or PNG formats are best. JPEG may be smaller for video screenshots, while PNG is lossless and so may work better for diagrams.)

Figure 16.2 University of Puget Sound Promotional Video

If you find the posters distracting or objectionable, you can cover them up by requesting a generic poster with the attribute-value pair: preview = "generic".

Figure 16.3 University of Puget Sound Promotional Video

You can use a very similar construction to point to a video hosted somewhere on the Internet, just use a complete URL for the <source> attribute. Note that if the URL has a query string (parameters following a question-mark), then any ampersands (&) will need to be escaped, so as to not confuse the XML processor (i.e. use &amp). Also, the question-mark character needs to not be URL-encoded (%3F), so presumably ed it to be the character. Here are two examples, the second one uses the @start and @stop attributes to limit the video to just the time between the 16-second and 30-second locations.

Figure 16.4 Sintel (Trailer @480p), https://durian.blender.org/
Figure 16.5 Big Buck Bunny from “Video for Everybody” Test Page at camendesign.com/code/video_for_everybody/test.htm

YouTube videos may be embedded with only knowledge of a video's “ID” or a “playlist ID”. A single video's YouTube ID is a string of eleven seemingly random characters that show up in the URL when you watch a video. For the Led Zeppelin performance below, the ID is hAzdgU_kpGo, which you might normally watch directly from the URL https://www.youtube.com/watch?v=hAzdgU_kpGo. Screen real estate is determined by specifying an optional @width attribute as a percentage, and aspect ratio is preserved on the assumption of HD video (16:9). (Enhancements will include other aspect ratios.)

If you have ever owned a drone, you sympathize with this guy. Way funnier than a cat video.

Figure 16.6 First Drone Flight (1:28)

If you are only interested in a piece of the action, you can limit the video with start and end attributes in seconds. You might make those times clear in the caption for readers getting the link out of a PDF. Some videos may not respect these parameters.

Figure 16.7 First Drone Flight (Splashdown, 0:54 to 1:12)

Videos may be placed “standalone” in a <sidebyside>, but are designed mostly on the assumption that they are wrapped in a figure with a title (which is distinct from a caption). This video comes with a deafult poster featuring Robert Plant. We've replaced it with Jimmy Page.

Figure 16.8 Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55)

And if you don't want to be reminded of Plant, Page, Bonham, or Jones, you can cover them up.

Figure 16.9 Kashmir (Live), Led Zeppelin. O2 Arena, London. December 10, 2007. (8:55)

We can pack two videos side-by-side, with a lot of horizontal control, using two panels in the sidebyside element. We have simply chose not to provide a caption (overall, or separately) as an illustration. The sizes are purposely a bit odd. See Section 22 for much more on side-by-side panels. These videos come from the “Topic” and “VEVO” areas of YouTube (respectively) and both have start/end times.

These next two videos are evenly spaced, one from YouTube, one from a source file hosted by the author. Now with separate captions, but identical margins (through very different choices of layout parameters than in the preceding pair of videos).

Figure 16.10 Drone Flight
Figure 16.11 UPS Promo

A YouTube “playlist” can be built in one of two ways. You may specify the youtube attribute to be a space-separated list of several video IDs. Alternatively, you may set the youtubeplaylist attribute to a YouTube playlist ID.

Figure 16.12 Individual IDs specified in an “itemized” playlist
Figure 16.13 YouTube playlist ID specified in a “named” playlist

Videos may be embedded, or popped-out to play in a new window or tab (at greater width), or a link will give the reader the option to choose either style of playback. The automatic pop-out option requires a static thumbnail image. (For YouTube, these images can be obtained automatically with the mbx script.)

Click Above to Play
(a)Embedded Only
(b)Pop-Out Only, w/ Start/End
(c)User Selection
Figure 16.14 YouTube Play Location Options (play-at attribute)

Each of the three options above may have a generic play button placed over the one provided by the video.

Click Above to Play
(a)Embedded Only
(b)Pop-Out Only, w/ Start/End
(c)User Selection
Figure 16.15 YouTube with Generic Preview

Now, the six combinations above with an author-hosted video.

Click Above to Play
(a)Embedded Only
(b)Pop-Out Only, w/ Start/End
(c)User Selection
Figure 16.16 Author-Hosted Play Location Options (play-at attribute)
Click Above to Play
(a)Embedded Only
(b)Pop-Out Only, w/ Start/End
(c)User Selection
Figure 16.17 Author-Hosted, Generic Preview, Experimental Aspect Ratios