# HTML 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

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

<!-- if using video-id and project-id -->
<mov-player
    project-id="Q4lm76b"
    video-id="j1k01MP0"
></mov-player>

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

# Example with all params

<script src="https://static.mediaoutcast.com/player/0.12.4/js/mov-init.min.js" async></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
'project-id' and 'video-id' (or 'project-id', 'source' and 'video-title') are required

KEY	TYPE	DESCRIPTION
project-id	string	`required` Project id, you can get this from CMS.
video-id	string	`required` if 'source' is not present. ID of the on-demand video from CMS.
stream-id	string	`required` if 'source' is not present. ID of the livestream from CMS.
source	string	`required` if 'video-id/stream-id' is not present, else it is `optional`. if 'source' is present source from `video-id` will be overwritten (not recommended). Accepts any m3u8 or mp4 file.
player-id	string	`optional` Player id, you can get this from CMS, overwriting your project default player (recommended if not using 'video-id').
video-title	string	Video title, `required` if using 'source', `optional` if using 'video-id'.
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.
show-controls `NEW`	string	`optional` `default:true` `values:true/false` Show controls.
fullscreen	string	`optional` `default:true` `values:true/false` Show fullscreen button in control bar.
quality-selector `NEW`	string	`optional` `default:false` `values:true/false` Show quality selector button in control bar.
playback-type	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.
ad-tag	string	`optional` Custom ad tag.
monetize	string	`optional` `default:false` `values:true/false` Turn ads on/off.
ga4	string	`optional` Google analytics tag, works out of the box if present.
ga-switch	string	`optional` `default:true` `values:true/false` Turn Google analytics on/off, even if ga4 is present.
ads-timeout	string	`optional` Timeout of all ads.
ads-preroll-timeout	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

JS implementation →