Smart Video

Provides automatic control of the videos loaded inside the panels. For example, the video will pause automatically when the panel closes, or the autoplay, if enabled, will stop when a video starts playing. Inside the accordion, videos can be added in the main panel container or inside layers.

The video types or providers supported by this module are: YouTube, Vimeo, HTML5, Video.js and SublimeVideo.

In order to have a video automatically controlled by the accordion, the video must have the as-video class. Also, there are some provider-specific requirements for the videos, as presented below.

YouTube

The videos need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by & .

Example:

<iframe class="as-video" src="http://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1&amp;wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>

Vimeo

The videos need to have the api=1 parameter appended to the URL of the video.

Example:

<iframe class="as-video" src="http://player.vimeo.com/video/43401199?api=1" width="500" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

HTML5

Simple HTML5 videos don't need any preparations other than having the as-video class.

Example:

<video class="as-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
    <source src="path/to/video.mp4" type="video/mp4"/>
    <source src="path/to/video.ogv" type="video/ogg"/>
</video>

Video.js

Each Video.js video must have a unique 'id' attribute. Another requirement is to not pass the video the data-setup attribute as the VideoJS documentation indicates. Instead, you can use the data-video attribute to pass additional options. Also, instead of adding the video-js andvjs-default-skin class names, you only need to add videojs .

Example:

<video id="video1" class="as-video videojs" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
    <source src="path/to/video.mp4" type="video/mp4"/>
    <source src="path/to/video.ogv" type="video/ogg"/>
</video>

Please note that, in order to use Video.js, you need to load the Video.js JavaScript and CSS files in your page. More information about how to use Video.js, in general, can be found on the official Video.js page .

SublimeVideo

Each SublimeVideo instance must have a unique 'id' attribute. Also, instead of adding thesublime class, as the SublimeVideo documentation indicates, add the sublime-video class.

Example:

<video id="video2" class="as-video sublime-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
    <source src="path/to/video.mp4" type="video/mp4"/>
    <source src="path/to/video.ogv" type="video/ogg"/>
</video>

Please note that, in order to use SublimeVideo, you will also need to load a script in your page which you need to download from the SublimeVideo page. More information about how to use SublimeVideo, in general, can be found on the official SublimeVideo page .

Notes

  • Most of the videos will work correctly only if the page is on a server. It can be a local server or an online server.

  • iOS doesn't allow videos to play automatically, so an initial user action is required in order to play the video. After the initial action, the videos will be controlled automatically.

  • When pausing a YouTube video automatically, on iOS, the video will be stopped instead, because only pausing it makes the entire region that the video occupies unresponsive to user input. For example, if another video slides in over the YouTube video, we won't be able to play this video because the controls will be unresponsive. However, this doesn't occur if the YouTube video is stopped instead of paused, so the accordion does this.

  • The control bar of SublimeVideo videos will become unresponsive on iOS if the 'auto' responsive mode is used. It seems that, in general, scaling SublimeVideo using the CSS3 'transform' property will make them unresponsive to user input.

This module is showcased in example4.html.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk