Methods 1

This video class implements renders a video object that is optimised for advertising. It automatically reports interaction events and fixes some platform-dependent bugs. The video class can transform existing HTML5 video elements or create a new one.

Modifying an existing video element:

var settings = {
    fromExisting : document.getElementById('myVideo')
var myVideo = new (settings);
// Note: This can also be done automatically, by adding the class 'weborama_video' to your video element HTML before the page is loaded.

Creating a new video element:

var settings = {
    width : 300,
    height : 169,
    reference : 'video', // This reference is used for event names. Only alphanumerical characters and underscores are allowed. Defaults to 'video'.
    prependTo : document.getElementById('video_container'), // alternatively, use appendTo
    controls : true,
    poster : 'video_poster_600x338.jpg',
    loop : true, // defaults to false
    autoplay : true, // defaults to false (only works on desktop)
    muted : true, // it's recommended to omit this parameter *
    videoFiles : [
       ,{src:'BigBuckBunny_640x360.webm', type:'video/webm'}
       ,{src:'BigBuckBunny_640x360.ogv', type:'video/ogg'}
       ,{src:'BigBuckBunny_640x360.mp4', type:'video/mp4'}
var myVideo = new (settings);
// * In most cases it is best to leave the 'muted' parameter out. It automatically decides
//   what's best, based on the value of autoplay:
//    - autoplay === true results in a muted video.
//    - autoplay === false results in a non-muted video.

Platform support

This video class depends on the HTML5 video element, which is supported in the following browsers:

Desktop Mobile/Tablet

External references

Constructor Details
Initializes new Screenad Video object.
{Object} settings
Object containing settings for the video file. For a list of these settings, see the examples.
Method Details

Retrieve the HTML element of the video so that custom changes can be made to it.

Retrieve the HTML element of the video so that custom changes can be made to it.

Sample usage:

// Manually pause the video
var myVideoEl = myVideo.getVideoElement();