Section 18 Video
First, a gratuitous reference to Exercise 10.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 18.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).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 .) On the
1
github.com/PreTeXtBook/pretext/issues/853<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.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".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 &). 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.2
camendesign.com/code/video_for_everybody/test.htm*.ogv extensionVideos 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 18.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.
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.This next video comes with a default poster from YouTube featuring Robert Plant. We’ve replaced it with a poster featuring Jimmy Page.
And if you don’t want to be reminded of Plant, Page, Bonham, or Jones, you can cover them up entirely.
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.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 24 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).
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.We test three equally-wide YouTube videos in a
<sidebyside> with a few variations.We test three equally-wide YouTube videos in a
<sidebyside> with a few variations, and now contained in a <figure>.We test three equally-wide author-hosted videos in a
<sidebyside> with a few variations.We test three equally-wide author-hosted videos in a
<sidebyside> with a few variations, and now contained in a <figure>.Subsection 18.3 Vimeo
We support videos from Vimeo 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
3
vimeo.comhttps://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.
4
vimeo.com/rickmerekivimeo.com/rickmerekiNow with an author-supplied poster.
5
vimeo.com/rickmerekivimeo.com/rickmerekiSubsection 18.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 (WEBVVT) format.
6
wikipedia.org/wiki/WebVTThttps://sites.google.com/site/chrisfoo/subtitlesThis 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.
