Mediaoutcast Docs

# JS implementation

# Include script

Put this script in your html page, best to put it inside head tag.

<script src="https://static.mediaoutcast.com/player/0.12.4/js/mov-init.min.js"></script>

# Basic example

For this implementation attributes 'script' and 'id' are required.

<script src="https://static.mediaoutcast.com/player/0.12.4/js/mov-init.min.js"></script>

<mov-player script id="mov-player-id"></mov-player>

Then init player from Your script:

movPlayer({
    id: 'mov-player-id',
    options: {
        // if using videoId and projectId
        videoId: '5n87qwj2',
        projectId: 'E7ub892m',
        // else if using source
        projectId: 'Q4lm76b',
        videoTitle: 'j1k01MP0',
        source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
    }
});

# Example with returned player

movPlayer is asynchronous, so to get the player, prop 'player' must be included as callback function which returns player as response:

let player;

movPlayer({
    id: 'mov-player-id',
    options: { 
        // if using videoId and projectId
        projectId: 'Q4lm76b',
        videoId: 'j1k01MP0',
        // else if using source and projectId
        projectId: 'Q4lm76b',
        videoTitle: 'Best movie ever',
        source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        //
        autostart: true,
        mutestart: true,
        adTag: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
        playbackType: 'stream',
        monetize: true,
        fullscreen: false,
        ga4: 'G-12B345...',
        // ...
    },
    player: (response) => {
        player = response;
        player.on('play', () => {
            console.log('play');
        });
    }
});

Actions that have to be triggered immediately, like assigning player events, or putting player to variable, have to be placed inside 'player' props callback function.

# All allowed properties

NOTES:
use 'videoId' for on-demand videos OR 'streamId' for livestreams
'projectId' and 'videoId' (or 'projectId', 'source' and 'videoTitle') are required

KEY TYPE DESCRIPTION
projectId string required Project id, you can get this from CMS.
videoId string required if 'source' is not present. ID of the video from CMS.
streamId string required if 'source' is not present. ID of the livestream from CMS.
source string required if 'videoId' is not present, else it is optional. if 'source' is present source from videoId will be overwritten (not recommended). Accepts any m3u8 or mp4 file.
playerId string optional Player id, you can get this from CMS, overwriting your project default player (recommended if not using 'video-id')..
videoTitle string Video title, required if using 'source', optional if using 'videoId'.
poster string optional Poster image for video.
muted string Deprecated optional default:false
mutestart NEW string optional default:false values:true/false Starting muted (replacing old 'muted' prop).
autoplay string Deprecated optional default:false
autostart NEW string optional default:false values:true/false Auto starting (replacing old 'autoplay' prop), also forcing muted state (overwriting mutestart) to work on all browsers.
looped NEW string optional default:false values:true/false Loop content eg. start again after end.
showControls NEW string optional default:true values:true/false Show controls.
fullscreen string optional default:true values:true/false Show fullscreen button in control bar.
qualitySelector NEW string optional default:false values:true/false Show quality selector button in control bar.
playbackType string optional default:on-demand If you have livestream should change controls by set this to stream (recommended if it is livestream).
preload NEW string optional default:true values:true/false Preloading content.
adTag string optional Custom ad tag.
monetize string optional default:true values:true/false Turn ads on/off.
ga4 string optional Google analytics tag, works out of the box if present.
gaSwitch string optional default:true values:true/false Turn Google analytics on/off, even if ga4 is present.
adsTimeout string optional Timeout of all ads.
adsPrerollTimeout string optional Timeout of preroll ads.
debug string optional default:false values:true/false Turning on google ads debug logs in console.

# Enterprise clients

KEY TYPE DESCRIPTION
client string required Use subdomain for resources:
static.{client}.mediaoutcast.com

# Methods

Videojs API methods and events are available once the player is returned, for example:

# Method Example

player.pause();
player.play();
player.dispose();
....
...
..
.

Documentation for Methods
https://www.w3schools.com/tags/ref_av_dom.asp (opens new window)
https://docs.videojs.com/docs/api/video.html (opens new window)

# Events

Event Example

let player;

 movPlayer({
    id: selector,
    options: {
        projectId: 'Q4lm76b',
        videoId: 'j1k01MP0',
        // or...
        projectId: 'Q4lm76b',
        videoTitle: 'Best movie ever',
        source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        //
        autostart: true,
        mutestart: true,
        adTag: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
        playbackType: 'stream',
        monetize: true,
        fullscreen: false,
        ga4: 'G-12B345...',
        // ...
    },
    player: (response) => {
        player = response;
        player.on('play', (e) => {
            console.log('Play video!');
        });
        player.on('pause', (e) => {
            console.log("Pause");
        });
        player.on('ended', (e) => {
            console.log("END");
        });
        player.on('adstart', (e) => {
            console.log("AdImpression");
        });
        player.on('adend', (e) => {
            console.log("AdImpression END");
        });
        player.on('timeupdate', (e) => {
            console.log("Time");
        });
        // ...
});

This is All events that our player support (BETA Documentation)

const EVENTS = [
    // HTMLMediaElement events
    'abort',
    'canplay',
    'canplaythrough',
    'durationchange',
    'emptied',
    'ended',
    'error',
    'loadeddata',
    'loadedmetadata',
    'loadstart',
    'pause',
    'play',
    'playing',
    'progress',
    'ratechange',
    'seeked',
    'seeking',
    'stalled',
    'suspend',
    'timeupdate',
    'volumechange',
    'waiting',

    // HTMLVideoElement events
    'enterpictureinpicture',
    'leavepictureinpicture',

    // Element events
    'fullscreenchange',
    'resize',

    // video.js events
    'audioonlymodechange',
    'audiopostermodechange',
    'controlsdisabled',
    'controlsenabled',
    'debugon',
    'debugoff',
    'disablepictureinpicturechanged',
    'dispose',
    'enterFullWindow',
    'error',
    'exitFullWindow',
    'firstplay',
    'fullscreenerror',
    'languagechange',
    'loadedmetadata',
    'loadstart',
    'playerreset',
    'playerresize',
    'posterchange',
    'ready',
    'textdata',
    'useractive',
    'userinactive',
    'usingcustomcontrols',
    'usingnativecontrols',
];

Documentation for Events, we will document it all soon.
https://www.w3schools.com/tags/ref_av_dom.asp (opens new window)
https://gist.github.com/alexrqs/a6db03bade4dc405a61c63294a64f97a (opens new window)

← Analytics →