Video

Video

Videos can be added to a project using either the video or video-inline directives. Video files can be hosted either locally or remotely.

Directives

The b-ber video element must be declared with an id and source attribute. The file name in the b-ber source attribute must not have an extension. The video should also include a poster attribute which points to an image in the _project/_images directory.

Video

The video directive, when rendered into XHTML, will add the poster image to the body of the project, which, when clicked, links to the corresponding full-size video in the figures section of the project.

::: video:my-id source:my-video poster:poster-image.jpg

Video-inline

The video-inline directive, when rendered into XHTML, will add the video directly into the flow of the project.

::: video-inline:my-id source:my-video poster:poster-image.jpg

Supported attributes

The video directive supports all of the same attributes as the HTML5 Video element. Boolean attributes must be assigned yes or omitted.

• autoplay
• buffered
• controls
• crossorigin
• height
• loop
• muted
• played
• preload
• poster
• width

Note: For the poster attribute, the poster image must exist in the _images directory.

Note: Using the src attribute will conflict with b-ber's file management. Do not use that attribute.

Markdown extensions

The video directive also supports an optional caption. Captions are added by enclosing a line of text within two colons directly underneath the video.

Samples

::: video:my-unique-id source:my-video poster:poster-image.jpg controls:yes

::: video:my-unique-id source:my-video poster:poster-image.jpg controls:yes
:: Here is the *caption* for my video.<br/>Inline HTML is also supported here.
::

Adding local videos

Add video files to the _media folder. Videos in different formats should all have the same base file name.

A note on file formats

b-ber suggests using a number of different formats to support various build types. For the Reader and Web builds, it's best practice to include mp4, ogv (OGG video), and webm formats. For EPUB builds, Apple suggests that video formats be in the .m4v format to play in the Books app on macOS and iOS, although .mp4 videos will also work.

_project/_media
            ├── my-video.m4v
            ├── my-video.mp4
            ├── my-video.ogv
            └── my-video.webm

Add the video directive to the Markdown.

# My Video

::: video:my-unique-id source:my-video poster:poster-image.jpg controls:yes

Note: The Books app on macOS and iOS requires that the controls attribute is specified or users will be unable to play the video.

When building the the project, b-ber will add the sources that match the file name (without the extension) that's defined in the source attribute.

<video id="_my-unique-id" controls="controls" poster="../images/poster-image.jpg">
    <source src="../media/my-video.m4v" type="video/x-m4v"/>
    <source src="../media/my-video.mp4" type="video/mp4"/>
    <source src="../media/my-video.ogv" type="video/ogg"/>
    <source src="../media/my-video.webm" type="video/webm"/>
    <p>Your device does not support the HTML5 Video API.</p>
</video>

b-ber always includes fallback text in case none of the media sources are supported on the end-user's browser or device.

Adding remote videos

Add the video directive to the Markdown with the video's URL as the source attribute. Don't forget to quote the source attribute if the URL contains spaces. For remote videos, the source attribute must contain the file extension (.mp4, .ogg, etc).

# My Video

::: video:my-unique-id source:'http://techslides.com/demos/sample-videos/small.mp4' poster:poster-image.jpg controls:yes

Supported third party platforms

b-ber additionally supports embedding videos from YouTube and Vimeo. Reader support for iframes is very patchy, however.

# My Third-Party Video

::: video:my-unique-id source:'https://player.vimeo.com/video/1234567890?api=1&player_id=my_iframe_id' poster:poster-image.jpg

Note: The Books app on macOS and iOS does not require .m4v files when videos are hosted remotely.

Formatting files

• For best results, poster images should be sized for a 16:9 aspect ratio (approx. 888 × 500 pixels)
• For web-only projects, it's necessary to include, at a minimum, both the ogg and mp3 file formats