# 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.0/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.0/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.0/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.0/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 Player aspect ratio. '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.
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.
float-on-scroll-position NEW default:bottom-right values:bottom-right/bottom-left/top-left/top-right Float player position on page.
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