screenad.video.VideoPlayer Constructor

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 screenad.video.VideoPlayer (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.m4v'}
       ,{src:'BigBuckBunny_640x360.webm', type:'video/webm'}
       ,{src:'BigBuckBunny_640x360.ogv', type:'video/ogg'}
       ,{src:'BigBuckBunny_640x360.mp4', type:'video/mp4'}
    ]
};
var myVideo = new screenad.video.VideoPlayer (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

• Internet Explorer 9 (Standards mode only!)
• Internet Explorer 10+ (Quirks and standards)
• Webkit 532+ (chrome, safari, newer versions of Opera)
• Firefox 3.6+
• Opera 10.6+

Mobile/Tablet

• Safari on iOS 4+
• Webkit on Android 2.3+
• Firefox on Android 2.3+
• Opera on Android 4+
• IE10 on Windows Phone 8

External references

• http://www.w3schools.com/html/html5_video.asp
• http://www.longtailvideo.com/html5/
• http://diveintohtml5.info/video.html

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