Skip to main content
\( \newcommand{\lt}{<} \newcommand{\gt}{>} \newcommand{\amp}{&} \)

Section6.16Video

The <video> element is used to embed a video in output formed from HTML. It 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.

If you host the video content as part of your output, then the @source should be a relative file name that points to the file containing the video, but without an extension. The supported formats are MP4, Ogg, and WebM. Browser capabilities and provided files are searched preferentially in that order. 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.

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 simply provide this with the @youtube attribute, such as

youtube="hAzdgU_kpGo"

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-hosted video you may wish to provide your own preview image. The @preview attribute can take on the following values

default

Whatever the video playback provides (also the default action).

generic

PreTeXt supplies a Play-button image.

custom

Not implemented yet (2017-08-28). Send a request.

The mbx script (Chapter 8) may be used to download the provided preview images for YouTube videos. 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.

Contemplated extensions, as of 2017-08-28, would be specifying content from Vimeo, and/or Google Drive. Send requests if these are of use.