Origami Frontend Components & Services

Readme: o-video

Creates a video player and attaches analytics. Also supports pre roll ads.

Markup

<div class="o-video" data-o-component="o-video"></div>

Videos can be styled in three different sizes, namely 'small', 'medium' and 'large', which can be added to the element as class modifiers, e.g.

<div class="o-video o-video--large" data-o-component="o-video"></div>

Sass

In order to output every size and attribute of o-video, you'll need to include the following:

@import 'o-video/main';

@include oVideo();

You can be more selective about which sizes and attributes you would like to output, by using an $opts map. It accepts the following lists:

attributes

sizes

@import 'o-video';

@include oVideo($opts:(
    'attributes': ('ads'),
    'sizes': ('small', 'large')
))

// outputs small and large video styles, and styling support for ads

JavaScript

In order to initialise o-video, you will need the following:

const OVideo = require('o-video');
const opts = {
    id: 4165329773001,
    optimumwidth: 710,
    placeholder: true,
    classes: ['video']
};
const video = new OVideo(document.body, opts);

Config

Where opts is an optional object with properties

The config options can also be set as data attribute to instantiate the module declaratively:

<div data-o-component="o-video o-video--large"
    data-o-video-id="4165329773001"
    data-o-video-optimumwidth="710">
</div>

With a playlist

Playlists may take a queue of videos and play them one after another.

const Video = require('o-video');

const queue = [
    '4165329773001',
    '4907997821001',
    '4165329773001'
];

const player = new Video(document.body, { autorender: false });
const playlist = new Video.Playlist({ player, queue });

document.querySelector('.next-btn').onclick = () => playlist.next();
document.querySelector('.prev-btn').onclick = () => playlist.prev();

The queue is an array containing Brightcove video ID strings.

Testing

$ npm test

Requires Firefox (v38.0.0 to test with polyfills and mirror CircleCI)

Migration

State Major Version Last Minor Release Migration guide
✨ active 5 N/A migrate to v5
⚠ maintained 4 4.1 migrate to v4
╳ deprecated 3 3.1 migrate to v3
╳ deprecated 2 2.5 migrate to v2
╳ deprecated 1 1.4 N/A

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.

Switch component view

GitHub Repository

Install o-video

If using the Build Service, add o-video@^5.1.6 to your script and link tags.

If running a Manual Build, run bower install --save "o-video@^5.1.6".

Help & Support

o-video is maintained directly by the Origami team. If you have any questions about o-video or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com