Mediaoutcast Docs

# HTML 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.1/js/mov-init.min.js"></script>

# Basic examples

# Using video-id

(project-id is required, player-id is highly recommended)

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

<mov-player
    project-id="Q4lm76b"
    player-id="QDJrKe10"
    video-id="j1k01MP0"
></mov-player>

# Using source

(video-title and project-id are required, player-id is highly recommended)

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

<mov-player
    project-id="Q4lm76b"
    player-id="QDJrKe10"
    video-title="Best movie ever"
    source="https://static.mediaoutcast.com/stream.mp4"
></mov-player>

# Example with more params

<script src="https://cdn.mediaoutcast.com/player/1.15.1/js/mov-init.min.js"></script>
<mov-player
    project-id="Q4lm76b"
    video-id="j1k01MP0"
    video-title="Best movie ever"
    player-id="j1k01MP0"
    poster="/your/image/url"
    mutestart="false"
    autostart="false"
    looped="false"
    show-controls="true"
    fullscreen="true"
    playback-type="on-demand"
    ad-tag="https://pubads.g.doubleclick.net....."
    monetize="true"
    ga4="G-12B345..."
    ga-switch="true"
    ads-timeout="5000"
    ads-preroll-timeout="5000"
    debug="false"
></mov-player>

# All allowed properties

NOTES:
use 'video-id' for on-demand videos OR 'stream-id' for livestreams
all props are type 'string'

KEY REQUIRED DESCRIPTION
project-id Yes Project id, you can get this from CMS.
video-id (or)
stream-id (or)
source		 Yes Video id of the on-demand video from CMS.
Stream id of the livestream from CMS.
Source of video.
player-id Player id, you can get this from CMS, overwriting your project default player. (it is highly recommended to have player-id prop)
video-title if source Video title.
poster URL of poster image for video.
muted Deprecated default: false
mutestart NEW default: false values: true/false Starting muted *(replacing deprecated 'muted' prop).
autoplay Deprecated default: false
autostart NEW default: false values: true/false Auto starting *(replacing deprecated 'autoplay' prop), also forcing muted state (overwriting mutestart) to work on all browsers.
looped NEW default: false values: true/false Loop content eg. start again after end.
show-controls NEW default: true values: true/false Show controls.
fullscreen default: true values: true/false Show fullscreen button in control bar.
quality-selector NEW default: false values: true/false Show quality selector button in control bar.
playback-type 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 default: true values: true/false Preloading content.
aspect-ratio NEW default: 16:9 values: 21:9/19:10/16:9/4:3/3:2/1:1/4:5/3:4/9:16/auto/fluid
Player aspect ratio. 'aspectRatio' will overwrite 'orientation' if both are present.
'auto': will select closest aspect ratio of available values.
'fluid': player renders in aspect ratio of video by itself. It is limited from 10:1 to 1:4, otherwise it will fallback to default 16:9.
CSS classes will be added on main element (example: mediaoutcast-video-aspect-16-9 mediaoutcast-video-orientation-landscape).
*not working in iframe implementation
orientation NEW default: landscape values: portrait/landscape/square/auto
Shortcut for aspect ratio, portrait=9:16, landscape=16:9, square=1:1.
'auto': will select closest aspect ratio of available values for orientation ('16:9', '1:1', '9:16').
CSS classes will be added on main element (example: mediaoutcast-video-aspect-9-16 mediaoutcast-video-orientation-portrait).
*not working in iframe implementation
start-on-view NEW default: false values: true/false Start video when player comes into viewport.
start-on-view-percent NEW 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.
float-on-scroll NEW default: false values: true/false Float player when leaving viewport on scroll.
*not working in iframe implementation
float-on-scroll-position NEW default: bottom-right values: bottom-right/bottom-left/top-left/top-right Float player position on page.
*not working in iframe implementation
ad-tag Custom ad tag.
monetize default: false values: true/false Turn ads on/off.
ga4 Google analytics tag, works out of the box if present.
ga-switch default: true values: true/false Turn Google analytics on/off, even if ga4 is present.
ads-timeout default: 5000 Timeout of all ads (in ms).
ads-preroll-timeout default: 5000 Timeout of preroll ads (in ms).
debug default: false values: true/false Turning on google ads debug logs in console.

# Enterprise clients

KEY REQUIRED DESCRIPTION
client Yes Use subdomain for resources:
static.{client}.mediaoutcast.com

← Single Page Application →