# 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.14.3/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.14.3/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.14.3/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 all params

<script src="https://cdn.mediaoutcast.com/player/1.14.3/js/mov-init.min.js"></script>
<mov-player
    project-id="Q4lm76b"
    video-id="j1k01MP0"
    video-title="Best movie ever"
    source="https://static.mediaoutcast.com/stream.mp4"
    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` Player aspect ratio. If 'auto' is set player adapts to aspect ratio of video. 'aspect-ratio' will overwrite 'orientation' if both are present.
orientation `NEW`		`default:landscape` `values:portrait/landscape` Shortcut for aspect ratio, portrait=9:16, landscape=16:9.
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

JS implementation →