Bolt CMS HTML5 Video Extension

What This Is

This is the Demo Page for version 1.x of this extension. For the newest version see: Bolt HTML5 Videos demo

This is a Bolt Content Management System extension that enables you to use a twig tag to insert HTML5 videos using the video element.

Bolt's video field uses oEmbed - relevant bolt docs on the field. This works great if you're using a video hosted on any of the video hosting services. If you have local videos, in your "files" directory, or on your own cdn you can't insert your videos. This allows that.

Installation

In the backend of your Bolt install navigate to the "Extras" menu in your dashboard and click "view/install extensions". In the "Install New Extension" search box type either "HTML5 Videos" or paste the following snippet.

cdowdy/html5video

Then click "Browse Versions and install the latest stable version.

Setup

You'll need to add a field to each contenttype you wish to use this extension in. The easiest field to use would be either file or the filelist type.


entries:
    name: Entries
    singular_name: Entry
    fields:
    # Other Fields Here!
        video:
            type: file
        videolist:
            type: filelist

If you plan on uploading video's through the backend in the contenttypes creation and edit page ie: yourContenttype -> your record or "new yourContenttype", you will need to use the Filelist field type.

Uploading Multiple videos through the contenttype's edit or creation screen

Quick Usage

Once you have your contenttype fields set you can quickly use the twig tag in your templates with default settings.

Using the contenttype field like "record.video"


{{ html5video( record.video, 'default' ) }}

Using a file from "files"


{{ html5video( 'your-file.webm', 'default' ) }}

The default settings used are:

Config Settings

For your own html5video settings you need to create a named config in the extensions config file. Either through a text editor and edit the "html5video.cdowdy.yml" file or through the extend screen and the "config" button located in the extensions info box .

Here is an example named config


blogVideos:
  use_cdn: false
  save_data: false
  video_poster: 'path/to/poster.png'
  attributes: [ 'controls', 'muted' ]
  preload: 'metadata'
  width_height: [ 400, '100%' ]
  multiple_source: true
  video_types: [ 'webm', 'mp4' ]

Using The Extension With Your Settings

With your named config in place you can move on to using the extension. There are two distinct ways you can use it.

If your field is of the type "file" you use it as follows


# Your Contenttypes.yml file and your contenttype
blogposts:
    name: BlogPosts
    singular_name: blogpost
    fields:
    # Other Fields above or below
        video:
            type: file
{# Your Template and using the example config from above called blogVideos #}
{{ html5video( record.video, 'blogVideos' ) }}

If your field is the filelist type


# Your Contenttypes.yml file and your contenttype
blogposts:
    name: BlogPosts
    singular_name: blogpost
    fields:
    # Other Fields above or below
        video:
            type: filelist
{# Your Template and using the example config from above called blogVideos #}
{{ html5video( record.video.0, 'blogVideos' ) }}

Combining File and Filelist types in a template

You can use both filelist type and the file type in your templates. This allows you to upload files to files or through your contenttype's record creation and edit screen. This gives you the most flexibility. You'll need to add both types to your contenttype's config file. Here is an example.


# Your Contenttypes.yml file and your contenttype
blogposts:
    name: BlogPosts
    singular_name: blogpost
    fields:
    # Other Fields above or below
        video:
            type: file
        videoList:
            type: filelist

Then in your twig template you're using this extension in you'll need to include an if / else statement. If a file is uploaded through the "files" screen, SFTP or your preferred deployment strategy it will use the file type. If a file is uploaded through the create/edit screen it will use the filelist type.

{% if record.videolist %}
  {{ html5video( record.videolist.0, 'blogVideos') }}
{% endif %}

{% if record.video %}
  {{ html5video( record.video, 'blogVideos' ) }}
{% endif %}

{# of you could use one like this #}
{% if record.videolist %}
  {{ html5video( record.videolist.0, 'blogVideos') }}
{% else %}
  {{ html5video( record.video, 'blogVideos' ) }}
{% endif %}

Using Local Videos

Local videos is defined as videos stored locally on your server. You can see any local videos you have uploaded in Bolt's backend under the File Management > Uploaded Files page.

Below is an example of using a file from files.

File from "files". This is in a sub directory in files.

{{ html5video( '/demos/firefox-dev-serviceworkers-enable.webm', 'default' ) }}

To use the video that is locally stored and attached to our contenttype's record you replace the file path with the contenttype field you have chosen. For example:

{{ html5video( record.video, 'default' ) }}

Result:

Using A CDN

A CDN is defined as your personal content delivery network. Examples of these are Amazon Cloudfront or MaxCDN.

The CDN can be configured in the extensions config file so you all you have to do is pass a filename to the twig tag.

cdn_url: https://your-cdn.com/path/to/files/

Then in your twig template you can just pass the file name.

{{ html5video( 'my-cdn-file.webm', 'default' ) }}

The filename will be appended to your cdn URL set in the config.


<video controls preload="metadata">
  <source src="https://your-cdn.com/path/to/files/my-cdn-file.webm" type="video/webm" >
  <source src="https://your-cdn.com/path/to/files/my-cdn-file.mp4" type="video/mp4" >
</video>

Alternatively if you leave the config setting of cdn_url blank you can pass in the CDN url in the twig tag.

cdn_url:
{{ html5video( 'https://your-cdn.com/path/to/files/my-cdn-file.webm', 'default' ) }}

Advanced Usage

You can over ride just about any default setting or user supplied settings in the extensions config inside a template. You must supply the video file or url you wish to use, followed by a rule set (or use defaults) then followed by which custom settings you wish to use

When you decide to override inside the template you must follow the same conventions used in the extensions config. If an array is used ( brackets ie: [ ] ) use those in your templates too.

Over-ride an array option and a string

The Default settings


default:
  use_cdn: false
  attributes: [ 'controls']
  preload: 'metadata'
  multiple_source: true
  video_types: [ 'webm', 'mp4' ]

Adding an option in our template to the attributes and preload setting and adding in a poster.

{{ html5video( record.video, 'default', {
    preload: 'none',
    video_poster: '/files/demos/sw-enable-poster.png',
    attributes: [ 'controls', 'muted', 'loop', 'playsinline' ]
  } )
}}

The video will now have muted, loop and playsinline along with controls as attributes and preload="none" added to the video element

Examples

Usage Examples of some of the available options that do affect the video markup and output

Saving Data using the Client Hints Save-Data header

The extension has a section titled save_data_options

Here you can add a message to display to the user when the video isn't loaded on page load. A wrapping div if you need or want one, and any classes you want to add to the button that is displayed to match your sites css. Here is this examples config.

save_data_options:
  message: 'The Save Data Header is Present. To Play and Load the Video click the button below.'
  message_class: [ ]
  button_class: [ 'demo-popup-button' ]
  wrapping_div: true
  wrapping_div_class: [ ]

Your named config for the extension and adding in save_data: true

saveData:
  save_data: true
  attributes: [ 'controls']
  preload: 'metadata'
  multiple_source: true
  video_types: [ 'webm', 'mp4' ]

Since I'm using the figure element I will wrap the save_data option in a div. The video will be inserted after its parent element. Without the div it will be underneath the figure element.

result:

Video Author: Eugenia Loli License: ATTRIBUTION LICENSE 3.0

Controlling A Videos Start and End Times

You can pass a media fragment ( a set of numbers) to the media_fragment setting. This allows you to start and stop a video at a specified time.

Your named config for the extension and providing a media fragment.

yourConfig:
# other settings here
media_fragment: [6, 16 ]

This video will start playing at 6 seconds and stop at 16.

result:

Video Author: Aaron Rickel License: ATTRIBUTION LICENSE 3.0

Using Videos for Animations like a Gif

You can drop bandwidth heavy gif animations and use videos instead! There are a few things you'll need to have for this to work and act like a gif in Android and eventually iOS 10+.

gifLike:
  attributes: [ 'autoplay', 'muted', 'loop', 'playsinline' ]
  width_height: [ 640, '100%' ]
  multiple_source: true
  video_types: [ 'webm', 'mp4']

result:

Usage Tips

  1. If Using multiple files for a video tag the video files should have the same name:
    • video-1.mp4 should have a sibling called video-1.webm
  2. Webm Files are typically smaller than MP4 files. Those extensions should be first in your types setting
    • video_types: [ 'webm', 'mp4' ]
  3. Don't Use Autoplay on videos!
    • Autoplay is ok though for gif like animations
  4. For gif like animations use the following in your attributes settings for best browser support & user experience
    • autoplay
    • muted
    • loop
    • playsinline

Extension Source and Bug Filling

The source for Bolt HTML5 Videos can be found at my github page

Bolt HTML5 Videos Bug filling

Bolt HTML5 Videos Extensions Store Page