VideoJS Ads Marker Plugin

With this plugin you possible to add markers to videojs progress and render some component (HTML) inside videojs when progress hits markers.

Requirment

• ReactJs version >= 17.0.2
• Video.Js version ^7.18.1

Don't worry. This requirment will auto install if you haven't installed it.

Install

npm i @video-js-plugins/videojs-ads-marker

or with yarn

yarn add @video-js-plugins/videojs-ads-marker

Quick Use

import '@video-js-plugins/videojs-ads-markers'

const MyComponent = () => {
    return (
        <div className="my-component">
            <h1>Render Component Here</h1>
        </div>
    )
}

const markerData = [
    {
        time: '20',
        render: <MyComponent/>
    },
    {
        time: '30',
    }
]

player.adsMarker(markerData)

API

Marker

Property | Description | Type | Default ----------------|----------------------------------------------------------------------|--------------------------|------------- time | The time at which the marker will be placed. This value in seconds | float | 0
render | Content to be rendered in the videojs | string or react component| undefined
stopOnMarker | Stop video when progress hits marker | boolean | true
marker | Show or hide marker on video progress bar. | boolean | undefined
payload | Any custom data you want to pass through marker | object | {}

Config

Property | Description | Type | Default --------------------|--------------------------------------------------------------------------------|----------------|------------- stopOnMarker | Stop video when progress hits marker. this will apply to all marker data. | boolean | true
onDetectedMarker | Callback when progress hits marker. with one parameter containing marker data. | function(data) | undefined
marker | Show or hide marker on video progress bar. this will apply to all marker data. | boolean | true