Derivatives and Integrals: An Annotated Discourse

Subsection 17.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 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.)

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".

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 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.

Subsection 17.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 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.

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.

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.

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

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 23 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.

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

Click to Pop-Out

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

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

Click Above to Play

Click to Pop-Out

Subsection 17.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 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.