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