Images

This page demonstrates images, audio, and video stored in modules/chapter1/images/. The estimated time shown below the title includes reading time for the text on this page plus the duration of embedded images, audio, and video.

Copy media files into modules/chapterN/images/ and reference them with the macros below. Local audio and video do not need extra markup; duration is detected automatically when the page loads. Each image:: macro adds 15 seconds of viewing time by default.

Image

The sample image below uses the default 15-second viewing allowance.

sample image

Image duration (manual override)

Override viewing time for complex diagrams, or exclude decorative images:

sample image
sample image

Passthrough diagram HTML can declare duration on the <img> tag:

Flow diagram

Audio

The sample audio clip is included from the chapter images directory.

Video

The sample video clip is included from the chapter images directory.

External media (manual duration)

When audio or video is hosted outside the course (or embedded from YouTube/Vimeo), the browser cannot always determine duration. Set the length in seconds with the role attribute on the macro.

This example uses a hypothetical external URL; only the declared duration is counted for estimated time.

For YouTube or Vimeo embeds, use the same pattern:

Alternatively, if you know the playback end point, you can use the end attribute (seconds from the start of the clip):

Passthrough iframe (manual duration)

When embedding video as raw HTML in a passthrough block, set the length in seconds on the <iframe> tag or on a wrapper element.

This example uses a placeholder URL; only the declared duration is counted for estimated time.

Alternatively, wrap the iframe in a div with the same pattern used by the video:: macro: