HTML5 Player Integration · Vidyome Dev Tools

Check the documentation for how to use Vidyome.

Getting Started

The Javascript library must be hosted on the vidyome.com domain. It does not work under a different domain.

JS Library

Library path: //vidyome-com.cdn.vidyome.com/vme/builds/get.js

Player is used as static wrapper or sticky on the website.

Integration Code

The player can be added to the website with standard javascript codes.

Standart

Use this method if there will be placement in a standard container.

A variable is used for the {{id}} parameter. Infinity must be dynamic for page loads.

{{site-id}}: You must have a site registered on the Vidyome Platform for ad management._ Register

<script id="vme-sc-{{id}}">
(function(d,e,f){
    var g=e.createElement("script");
    g.type="text/javascript",
    g.src="//vidyome-com.cdn.vidyome.com/vme/builds/get.js",
    g.asyc=!0,
    g.setAttribute("id",`vme-data-${f}`),
    g.setAttribute("video-source","//vidyome-com.cdn.vidyome.com/videos/12-2018/5Tj9DZmgF7QaIhN0lLcb.mp4"),
    g.setAttribute("video-poster","//vidyome-com.cdn.vidyome.com/img/videos/12-2018/hYxbQChfyfxLWXpPLJHU-no_icon.jpg"),
    g.setAttribute("video-play", false),
    g.setAttribute("site-id", "{{site-id}}"),
    g.onload=function(){d.VME.create(f)},
    e.getElementById(`vme-sc-${f}`).parentNode.insertBefore(g,e.getElementById(`vme-sc-${f}`).nextSibling)})
(this,document,"{{id}}");
</script>

Video Sticky

When out of visibility

When the player moves out of the scroll area, the video becomes sticky on the page. The player auto plays when it is 100 percent visible on the page. In addition to the standard code, the sample code must be added.

    g.setAttribute("video-sticky", true),

Only Sticky Mode

Works as sticky on the page

Some features are activated in this selection. Please review the sticky-type and sticky-position properties.

<script id="vme-sc-{{id}}">
(function(d,e,f){
    var g=e.createElement("script");
    g.type="text/javascript",
    g.src="//vidyome-com.cdn.vidyome.com/vme/builds/get.js",
    g.asyc=!0,
    g.setAttribute("id",`vme-data-${f}`),
    g.setAttribute("video-source","//vidyome-com.cdn.vidyome.com/videos/12-2018/5Tj9DZmgF7QaIhN0lLcb.mp4"),
    g.setAttribute("video-poster","//vidyome-com.cdn.vidyome.com/img/videos/12-2018/hYxbQChfyfxLWXpPLJHU-no_icon.jpg"),
    g.setAttribute("video-play", false),
    g.setAttribute("sticky-mode", true),
    g.setAttribute("site-id", "{{site-id}}"),
    g.onload=function(){d.VME.create(f)},
    e.getElementById(`vme-sc-${f}`).parentNode.insertBefore(g,e.getElementById(`vme-sc-${f}`).nextSibling)})
(this,document,"{{id}}");
</script>

Preferences

Features available on the video player.

Attribute	Description
site-id	Getting from Vidyome online video platform OVP
container-id	used for the wrapper id where the video is to be created (when not in use, it is created in the area where the video script code)
video-source	used for the source path of the video
video-sources	used for multiple source selection
video-play	used for video autoplay, default: `false`
video-id	used for videos uploaded from within the OVP.
video-title	used for video title
video-url	used for the web url where the video is published
video-poster	used for cover photo of video
video-suggested	used for recommended content posted at the end of the video
video-live	used to activate the live streaming feature
video-live-timeout	used for advertising waiting time in live broadcast (in milliseconds) default: `420000`
video-volume	used to set the volume value of the video, may be invalid by preroll selected (value from 0 to 1 is used) example: `0.4`
video-embed	eused for the embed url address of the video
video-ads	used to customize ad delivery within video, false does not run ads, default: `true`
video-logo	used to show the logo in the top left corner of the video, logo image path is used
video-segment	used to specify the category of the video
video-sticky	used to run as sticky if video is not visible on page
video-airplay	used to activate the airplay feature, default: `false`
video-chromecast	used to activate the chromecast feature, default: `false`
video-controls	used for continuous visibility of the video control bar, default: `false` becomes invisible after a while
video-analytical	used for google analytics code, example: `UA-XX-XXXXXXXX`
sticky-mode	used to operate the player as sticky mode only, default: `false`

used only when the sticky-mode parameter is true.

Attribute	Description
sticky-wrapper	extension to be used for dest files.
sticky-type	extension to be used for dest files.