# 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.12.5/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.12.5/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.12.5/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.12.5/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
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.
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