Toggles playback of audio and (native, Vimeo or YouTube) video, toggles or restarts animations in SVGs and restarts animated GIFs in a Bespoke.js presentation.
View the demo online.
This repository includes a demo folder that shows this plugin in action. To view it locally, you first need to clone this repository:
$ git clone https://github.com/opendevise/bespoke-multimedia && cd bespoke-multimedia
Next, install the dependencies inside the project folder using npm:
$ npm install
Finally, visit the file demo/index.html in your browser and navigate between slides to see the multimedia playback in action.
Download the production mode version or the development mode version, or use a package manager.
This plugin is shipped in a UMD format, meaning it is available as a CommonJS/AMD module or as a browser global.
For example, when using CommonJS modules:
var bespoke = require('bespoke'),
multimedia = require('bespoke-multimedia');
bespoke.from('.deck', [
multimedia()
]);When using browser globals:
bespoke.from('.deck', [
bespoke.plugins.multimedia()
]);This plugin does not currently expose any general options. However, each component has options that can be set using custom attributes.
- data-rewind (type: boolean, default: false)
-
If this attribute is present, the media stream is restarted each time playback is triggered.
- data-volume (type: integer, range: 0-10)
-
This attribute can be used to set the volume of the media stream. The value must be an integer between 0 (muted) and 10 (full volume). Any value outside this range will be coerced to the closest range limit. If this attribute is not specified, the volume of the media stream remains unmodified.
This plugin automatically plays all multimedia on the active slide, then later pauses it when the slide becomes inactive. The definition of “play” and “pause” depends on the media type.
The supported media types are:
-
Native HTML Audio (
<audio>element) -
Native HTML Video (
<video>element) -
Animated SVG (embedded using the
<object>element) -
Animated GIF (image with URL ending in
.gif)
The following sections describe how each media type is handled.
All audio elements on the active slide are played automatically when the slide is activated. When the slide is deactivated, the audio is paused.
You can use (most of) the built-in attributes supported by the <audio> element, such as preload and loop.
|
🔥
|
Using the autoplay and volume attributes is not recommended since they conflict with the behavior of this plugin.
|
In addition to the built-in attributes, this plugin also recognizes the custom attributes defined in Custom Attributes for Media Elements.
All video elements on the active slide are played automatically when the slide is activated. When the slide is deactivated, the videos are paused.
|
|
If the MIME type for the video is not set correctly on the server, the video may not appear. This restriction may be unique to Firefox. |
You can use (most of) the built-in attributes supported by the <video> element, such as controls, preload and loop.
|
🔥
|
Using the autoplay attribute is not recommended since it conflicts with the behavior of this plugin.
|
In addition to the built-in attributes, this plugin also recognizes the custom attributes defined in Custom Attributes for Media Elements.
All Vimeo videos on the active slide are played automatically when the slide is activated using Vimeo’s Universal JavaScript API. When the slide is deactivated, the videos are paused.
|
|
Video playback only works if the presentation is viewed through a web server. |
In order for the plugin to control Vimeo videos via the JavaScript API (and also distinguish between multiple videos), for each video, you must:
-
Include an
idattribute on the<iframe>element. -
Add
player_id=PLAYER_IDto the query string of the video URL, wherePLAYER_IDis the value of theidattribute. -
Add
api=1to the query string of the video URL. -
Add
autoplay=0to the query string of the video URL.
Refer to the example later in this section for details.
You can use (most of) the universal parameters supported by the Vimeo player, such as background and loop.
|
💡
|
At the time of writing, the background parameter was not yet documented.
If you set this parameter to 1, Vimeo will hide all the controls.
This setting provides an emersive playback experience, ideal for a presentation slide.
Note, however, that the video is muted by default in background mode.
If your video has sound, and you want the sound to be heard, you must specify the data-volume attribute.
|
This plugin also recognizes the custom attributes defined in Custom Attributes for Media Elements.
All YouTube videos on the active slide are played automatically when the slide is activated using YouTube’s IFrame API. When the slide is deactivated, the videos are paused.
In order for the plugin to control YouTube videos via the JavaScript API, for each video, you must:
-
Add
enablejsapi=1to the query string of the video URL. -
Add
autoplay=0to the query string of the video URL.
Refer to the example later in this section for details.
You can use (most of) the player parameters supported by the YouTube player, such as controls, loop and rel.
|
❗
|
In order for the loop parameter to take effect, you must specify the playlist parameter with a value equal to the value of the id attribute.
|
This plugin also recognizes the custom attributes defined in Custom Attributes for Media Elements.
All SVGs on the active slide that are embedded using an <object> element are automatically either reloaded or marked active (depending on how the SVG is configured) when the slide is activated.
When the slide is deactivated, any SVG previously marked active is marked inactive.
If the data-reload attribute is present on the <object> element, the plugin forces the browser to reload the SVG by reassigning the data attribute.
This should cause any animations defined in the SVG to restart.
If the data-reload attribute is not present, and the SVG DOM is reachable using JavaScript, the active CSS class is toggled on the root SVG element.
In this case, the animation must be configured to restart by way of a CSS rule.
This plugin recognizes the custom attributes defined in Custom Attributes for Image Elements.
|
📎
|
If the data-reload attribute is not present, the plugin instead toggles the CSS class on the root element of the SVG.
|
|
|
The CSS class can only be toggled on the root element if the SVG is loaded from the same domain (i.e., same-origin policy).
When the SVG is loaded from a different domain, you must add the data-reload attribute.
|
<object data="orange-circle.svg" type="image/svg+xml"></object>where the SVG orange-circle.svg has the following content:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<style>
svg.active:root #orange-circle { animation: 5s linear 0s normal forwards 1 running coast }
@keyframes coast { 100% { transform: translateX(400px) } }
</style>
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange"/>
</svg>All GIFs that have a data-reload attribute on the active slide are automatically reloaded when the slide is activated.
No action is taken when the slide is deactivated.
The plugin forces the browser to reload the SVG by reassigning the src attribute.
This should cause the GIF animation to restart.
This plugin recognizes the custom attributes defined in Custom Attributes for Image Elements.
|
📎
|
If the data-reload attribute is not present, the plugin takes no action on the GIF.
|