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.9.1/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.9.1/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: { 
        playerId: '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: { 
        playerId: 'j1k01MP0',
        projectId: 'Q4lm76b',
        videoTitle: 'Best movie ever',
        source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        autoplay: true,
        muted: 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 callback function.

# All allowed properties

NOTE: source (or videoId), playerId, projectId and videoTitle are required

KEY TYPE DESCRIPTION
playerId string Player id, you can get this from CMS
projectId string Project id, you can get this from CMS
videoTitle string Video title
videoId string optional ID of the video from static.mediaoutcast.com
source string optional You can put any m3u8 or mp4 file. If this is present source from video-id will be overwrited
poster string optional Poster image for video.
muted string optional default:false
autoplay string optional default:false
fullscreen string optional default:false Show fullscreen button
playbackType string optional default:on-demand If you have livestream should change controls by set this to stream
adTag string optional Custom ad tag
monetize string optional default:true values:true/false Turn ads on/off
ga4 string optional Google analytics tag
ga-switch string optional default:true values:true/false Turn Google analytics on/off
adsTimeout string optional Timeout of all ads
adsPrerollTimeout string optional Timeout of preroll ads

# 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: {
        playerId: 'j1k01MP0',
        projectId: 'Q4lm76b',
        videoTitle: 'Best movie ever',
        source: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
        autoplay: true,
        muted: 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,
    },
    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)

← Changelog →