Creates a video player and attaches analytics. Also supports pre roll ads.
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.
You can be more selective about which sizes and attributes you would like to output, by using an
attributes
sizes
The config options can also be set as data attribute to instantiate the module declaratively:
The queue is an
Requires Firefox (v38.0.0 to test with polyfills and mirror CI)
- [Config](#config)
- [With a playlist](#with-a-playlist)
Usage
Check out how to include Origami components in your project to get started witho-video
.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 ofo-video
, you'll need to include the following:@import '@financial-times/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
'ads'
'info'
'placeholder'
sizes
'small'
'medium'
'large'
@import '@financial-times/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 initialiseo-video
, you will need the following:import Video from '@financial-times/o-video';
const opts = {
id: 4165329773001,
optimumwidth: 710,
placeholder: true,
classes: ['video'],
systemcode: 'my-biz-ops-code'
};
const video = new Video(document.body, opts);
Config
Whereopts
is an optional object with propertiesid
[String]
Source's ID of the video (brightcoveId
oruuid
)autorender
[Boolean]
Whether to have the video render automatically. If-false then you will need to callinit()
when readyoptimumwidth
[Number]
The optimum width of the video placeholder imageoptimumvideowidth
[Number]
The optimum width of the video itself, used when there are multiple video renditions available to
placeholder
[Boolean]
Show just the poster image, load (and play) video on clickplaceholderHint
[String]
An optional hint to display alongside the play icon (defaults to empty)placeholderInfo
[Array]
A list of extra information to display on the placeholder (Available: title, description, brand)playsinline
[Boolean]
Whether to play the video inline on iOS smallscreen (defaults to fullscreen)classes
[Array]
Classes to add to the video (and placeholder) elementadvertising
[Boolean]
whether or not to show ads on the videoshowCaptions
[Boolean]
whether or not to add captions to the video. Defaults totrue
.data
[Object]
JSON object representing a response from next-media-api. If used, the component will not make a call to the API and use this data instead.systemcode
[String]
a valid Bizops system code for the project usingo-video
.
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.import Video from '@financial-times/o-video';
const queue = [
'4165329773001',
'4907997821001',
'4165329773001'
];
const player = new Video(document.body, { autorender: false, systemcode: 'my-biz-ops-code' });
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
See Origami build tools.$ obt test
Requires Firefox (v38.0.0 to test with polyfills and mirror CI)