Skip to main content

Section 19 Video

View Source

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 and Vimeo videos, which are near the bottom of this page, so look there first if that meets your needs.

Subsection 19.1 Video Files

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 19.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 Issue #853 1  .) 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.) The next video has a preview/poster that is a fram part way into the introduction.

Figure 19.2. University of Puget Sound Promotional Video

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

Figure 19.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 edit the URL to be the character. Here are several 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, and has asymmetric margins.

Figure 19.4. Big Buck Bunny from “Video for Everybody” Test Page 2 
Figure 19.5. Big Buck Bunny, Controlled Start/End, Asymmetric Margins
Figure 19.6. Big Buck Bunny, Ogg container, *.ogv extension
Figure 19.7. Big Buck Bunny, MP4 format
Figure 19.8. Big Buck Bunny, WebM format
Figure 19.9. Big Buck Bunny, Automatic best format (temporarily broken)

Videos are assumed to have a 16:9 aspect ratio (width:height). If this is not the case, then you must specify the aspect ratio with either a ratio (e.g. 4:3) or as a number expressing the fraction width/height (e.g. 1.3333). Four decimal places should suffice for the latter. Note that you cannot change the aspect ratio, and you must supply the aspect ratio for any video that does not have the default ratio. This is a technical requirement that allows us to smoothly scale the videos on small devices (try this page on your mobile phone!).

Subsection 19.2 YouTube

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 www.youtube.com/watch?v=hAzdgU_kpGo. As described just above, you need to specify a different aspect ratio if the video does not have a 16:9 aspect ratio.

Note: some of these videos may not play if viewed locally, and maybe not even if you start up a local web server (such as can be easily done with Python). So if you are testing new features, be careful about assuming videos from cloud services are not working properly.

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

Figure 19.10. 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 19.11. First Drone Flight (Splashdown, 0:54 to 1:12)

This next video comes with a default poster from YouTube featuring Robert Plant. We've replaced it with a poster featuring Jimmy Page.

Video cover image
Figure 19.12. 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 entirely.

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

Videos were first designed mostly on the assumption that they are wrapped in a figure with a title (which is distinct from a caption). But you can just place a video “naked” inbetween a couple of paragraphs. This is nice if you don't want the clutter of numbers, and/or if you plan to exclude videos from some edition of your document.

Video cover image

We can pack two videos side-by-side, with a lot of horizontal control, using two panels in the sidebyside element. We have simply chosen here to not provide a caption (overall, or separately) as an illustration. The sizes are purposely a bit odd. See Section 25 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 19.14. Drone Flight
Figure 19.15. 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 19.16. Individual IDs specified in an “itemized” playlist
Figure 19.17. YouTube playlist ID specified in a “named” playlist

We test three equally-wide YouTube videos in a <sidebyside> with a few variations.

Figure 19.18. Medium Length
Figure 19.19. Short
Figure 19.20. A Really Long Caption That Will Wrap onto a New Line

We test three equally-wide YouTube videos in a <sidebyside> with a few variations, and now contained in a <figure>.

(a) Medium Length
(b) Short
(c) A Really Long Caption That Will Wrap onto a New Line
Figure 19.21. Author-Hosted videos as Sub-Figures

We test three equally-wide author-hosted videos in a <sidebyside> with a few variations.

Figure 19.22. Medium Length
Figure 19.23. Short
Figure 19.24. A Really Long Caption That Will Wrap onto a New Line

We test three equally-wide author-hosted videos in a <sidebyside> with a few variations, and now contained in a <figure>.

(a) Medium Length
(b) Short
(c) A Really Long Caption That Will Wrap onto a New Line
Figure 19.25. YouTube videos as Sub-Figures

Subsection 19.3 Vimeo

We support videos from Vimeo 3  in much the same way as YouTube videos. Now the identifier is a long integer. For example, the video up next would normally be found at https://vimeo.com/27246366. But instead, you can embed the video with as little as <video vimeo="27246366"/>. As of 2019-05-18, we intend to support as many of the options described above as possible. Widths and heights (via the aspect ratio) will perform as expected. We have not investigated start and end times.

Video cover image
Figure 19.26. “MOVE”, by Rick Mereki 4 , vimeo.com/rickmereki

Now with an author-supplied poster.

Video cover image
Figure 19.27. “MOVE”, by Rick Mereki 5 , vimeo.com/rickmereki

Subsection 19.4 Captions and Subtitles

Experimental support for captions and subtitles first. Look at the source, which mimics the actual HTML. The words of the titles and/or subcaptions (there is a difference!) come from a file in Web Video Text Tracks 6  (WEBVVT) format.

Figure 19.28. Big Buck Bunny with subtitles adapted from https://sites.google.com/site/chrisfoo/subtitles

This video is identical to the previous one, except it tests the use of a default <track>. The @default attribute on <track> can be set to the value yes to make one set of captions the default (and only one!). Test is a bit lame, the two <track> use the same file, but just have different labels for the player's menu. Track named US English Two will show as in-use at start-up.

github.com/PreTeXtBook/pretext/issues/853
camendesign.com/code/video_for_everybody/test.htm
vimeo.com
vimeo.com/rickmereki
vimeo.com/rickmereki
wikipedia.org/wiki/WebVTT