@video-js-plugins/videojs-ads-markers NPM

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.

Demo ads marker

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

videojs ads marker video js marker

@everything-registry/sub-chunk-983

1.0.0

2 years ago