Media Elements

JamsEDU supports various types of media elements by default. Adding images, audio, and video to a page is normally a complex process requiring lots of HTML code. We have made this process simple by automatically generating the HTML for you. For these features to work you must use JamsEDU's formatting for media elements. If you are familiar with HTML you will notice this is not the typical HTML code you would expect to use.

Images

You can also easily include images on any page with JamsEDU. We use JavaScript to automatically generate the HTML for this to work since the HTML can be rather complex to create manually. Simply add the class of left, right, or center to an img tag and we will handle image alignment for you. If you do not provide a class center will be used automatically. If you would like to add a figure caption to the image you can do so by adding the data-caption attribute. Below is an example of a centered image using the figure caption. Please note all images should be included relatively if they are hosted by the your website. Absolute URLs should only be used for images hosted outside your website.

<img src="assets/artistic-logo.jpg" alt="Caboodle Tech Artistic Logo" class="right" data-caption="Caboodle Tech Logo: Watercolor and Pen in a Decoupage faux Vitreography style">

PDF

Audio

Adding audio to a page is as simple as linking to the audio file and adding the data-audio attribute to the link. Below is an example that is using additional audio features:

<a href="assets/pearl-harbor-address.mp3" data-audio="ogg" data-transcript="assets/pearl-harbor-address.txt">
    President Roosevelt’s Pearl Harbor Address
</a>

Here are all the attributes you can add to an audio tag. Pay careful attention to the required formatting:

data-audio

A comma separated list of alternate formats this audio is available in; ogg, wav, and so on. This audio file must actually exist at the same location as the original href.

data-transcript

The URL – relative (most likely) or absolute – to a transcript of this audio.

data-artist

The name of the artist by itself or the name of the artist and a link to the artist/ original source of this audio, in the format of artist:url

data-author

This is used exactly the same as data-artist and will overwrite the data-artist tag; included for semantics.

Video

Including videos in your pages is as simple as linking to the video and adding the data-video attribute to the link. We use JavaScript to automatically generate the HTML for this to work since the HTML can be rather complex. Here is an example of adding a YouTube video:

<a href="https://youtu.be/NpEaa2P7qZI" data-video>
    Title of the video / video information.
</a>

Using external video hosting providers offers you many benefits, but if you would like to host the video yourself that is also possible. Here is a video being hosted directly by this site. You will notice that there are a few more options to indicate in the link.

<a href="assets/intro.mp4" data-video="ogg" data-captions="English:assets/captions.en.vtt" data-subtitles="" data-poster="assets/poster.png" data-self-hosted>
    Title of the video / video information.
</a>

Here are all the attributes you can add to a self hosted video. Pay careful attention to the required formatting:

data-video

A comma separated list of alternate formats this video is available in; ogg, webm, and so on. This video file must actually exist at the same location as the original href.

data-captions

A comma separated list of closed captioning files for this video. Use the format Language:path/filename.lang.extension where lang is the ISO language code and extension is the file extension, most likely .vtt.

data-subtitles

A comma separated list of subtitle files for this video. Use the format Language:path/filename.lang.extension where lang is the ISO language code and extension is the file extension, most likely .vtt.

data-poster

A URL – relative (most likely) or absolute – to the image to use as the video thumbnail (placeholder) before the user plays the video.

data-self-hosted

Add this tag to the end of the link to assist JamsEDU in detecting this video should be considered self hosted.