What This Is

This deals with Bolt HTML5 Video versions 2.x.x+. If you need the demo for versions 1.x+ please see: Bolt HTML5 Video v1x page

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.

Upgrading to v2.x.x

Version 2.x.x no longer uses the filelist index in twig templates. Meaing the following code no longer works and MUST be changed.

{{ html5video( record.video.0, 'blogVideos' ) }}

The needed change is to remove the .0 from the record.video portion. It should now look as follows:

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

Removed Config Options

The config options of multiple_source, video_types, and save_data have been removed. If you are using those in your twig templates as over-rides similar to below you'll need to remove them from your templates.

 {# this will no longer work #}
{{ html5video( record.video, 'default', {
    save_data: true,
    multiple_source: true,
    video_types: [ 'webm', 'mp4' ],
    width_height: [ 640, '100%' ],
    media_fragment: [6, 16 ]
  } )
}}
{# this is how it should look now. without those removed options #}
{{ html5video( record.video, 'default', {
    width_height: [ 640, '100%' ],
    media_fragment: [6, 16 ]
  } )
}}

This also means all the settings found under save_data_options are no longer applied.

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

This extension comes with a custom field type you can add to your contentType fields. If you wish to use this extension with your contentTypes you'll need to add it's field type to each field. The custom field type is: h5video.

entries:
    name: Entries
    singular_name: Entry
    fields:
    # Other Fields Here!
        video:
            type: h5video

You can now upload or pick your files in your contentType edit or creation.

Quick Usage

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

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

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

The default settings used are:

default:
  use_cdn: false
  attributes: [ 'controls']
  preload: 'metadata'

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
  video_poster: 'path/to/poster.png'
  attributes: [ 'controls', 'muted' ]
  preload: 'metadata'
  width_height: [ 400, '100%' ]

Using The Extension With Your Settings

With your named config in place you can move on to using the extension.

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

{# Your Template and using the example config from above called blogVideos #}
{{ html5video( record.video, 'blogVideos' ) }}

If you have multiple files in your files directory you'd like to use instead of picking them in your record edit and creation screen:

{# Your Template and using the example config from above called blogVideos #}
{{ html5video( [ 'your-file.webm', 'your-file.mp4' ], 'blogVideos' ) }}

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" >
</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' ) }}

If you Have a CDN Url set and pass in the full CDN URL you will get a bad URL. You have to choose one or the other as of right now.

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

default:
  use_cdn: false
  attributes: [ 'controls']
  preload: 'metadata'

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