Mediaoutcast Docs

# JS implementation

# Include script

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

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

# Basic examples

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

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

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

Then init player from Your script with 'movPlayer' function that requires 2 arguments, 'id' of <mov-player> HTML element and 'options' with additional props.

# Using videoId

(projectId is required, playerId is highly recommended)

movPlayer({
    id: 'mov-player-id',
    options: {
        projectId: 'E7ub892m',
        playerId: 'QDJrKe10',
        videoId: '5n87qwj2',
    }
});

# Using source

(videoTitle and projectId are required, playerId is highly recommended)

movPlayer({
    id: 'mov-player-id',
    options: {
        projectId: 'Q4lm76b',
        playerId: 'QDJrKe10',
        videoTitle: 'j1k01MP0',
        source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
    }
});

NOTE: do not forget to include attribute 'script' on <mov-player>

# Async embed

For non-blocking embed you can load player script asynchronously.

<mov-player id="mov-player-id" script></mov-player>
<script type="text/javascript">
var _movAsync = _movAsync || [];
_movAsync.push({
    id: 'mov-player-id', 
    options: {
        videoTitle: 'best video ever',
        videoId: 'QakQa6kW',
        projectId: 'pmrP5kAO',
        playerId: 'QDJrKe10',
    }
});
</script>
...
<script src="https://cdn.mediaoutcast.com/player/1.15.0/js/mov-init.min.js" async></script>

# 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',
        playerId: 'QDJrKe10',
        videoId: 'j1k01MP0',
        // else if using source and projectId
        projectId: 'Q4lm76b',
        playerId: 'QDJrKe10',
        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

KEY TYPE REQUIRED DESCRIPTION
projectId string Yes Project id, you can get this from CMS.
videoId (or)
streamId (or)
source		 string Yes Video id of the on-demand video from CMS.
Stream id of the livestream from CMS.
Source of video.
playerId string Player id, you can get this from CMS, overwriting your project default player. (it is highly recommended to have playerId prop)
videoTitle string if source Video title.
poster string URL of poster image for video.
muted boolean Deprecated default:false
mutestart NEW boolean default:false values:true/false Starting muted (replacing deprecated 'muted' prop).
autoplay boolean Deprecated default:false
autostart NEW boolean default:false values:true/false Auto starting (replacing deprecated 'autoplay' prop), also forcing muted state (overwriting mutestart) to work on all browsers.
looped NEW boolean default:false values:true/false Loop content eg. start again after end.
showControls NEW boolean default:true values:true/false Show controls.
fullscreen boolean default:true values:true/false Show fullscreen button in control bar.
qualitySelector NEW boolean default:false values:true/false Show quality selector button in control bar.
playbackType string default:on-demand values:on-demand/stream For livestream you should change player controls layout by setting this to stream (recommended if it is livestream).
preload NEW boolean default:true values:true/false Preloading content.
aspectRatio NEW string default:16:9 values:21:9/19:10/16:9/4:3/3:2/1:1/4:5/3:4/9:16 Player aspect ratio. 'aspectRatio' will overwrite 'orientation' if both are present.
orientation NEW string default:landscape values:portrait/landscape Shortcut for aspect ratio, portrait=9:16, landscape=16:9.
startOnView NEW boolean default:false values:true/false Start video when player comes into viewport.
startOnViewPercent NEW number default:100 values:0,...,100 Percent of player height in viewport to trigger 'start on view'. 0=as soon as player enters viewport, 100=full player height.
floatOnScroll NEW boolean default:false values:true/false Float player when leaving viewport on scroll.
floatOnScrollPosition NEW string default:bottom-right values:bottom-right/bottom-left/top-left/top-right Float player position on page.
adTag string Custom ad tag.
monetize boolean default:true values:true/false Turn ads on/off.
ga4 string Google analytics tag, works out of the box if present.
gaSwitch boolean default:true values:true/false Turn Google analytics on/off, even if ga4 is present.
adsTimeout number default:5000 Timeout of all ads (in ms).
adsPrerollTimeout number default:5000 Timeout of preroll ads (in ms).
debug boolean default:false values:true/false Turning on google ads debug logs in console.

# Enterprise clients

KEY TYPE REQUIRED DESCRIPTION
client string Yes 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',
        playerId: 'QDJrKe10',
        videoId: 'j1k01MP0',
        // or...
        projectId: 'Q4lm76b',
        playerId: 'QDJrKe10',
        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)

HTML implementation →