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

1.0.0 • Public • Published

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

Package Sidebar

Install

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

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

1.65 MB

Total Files

9

Last publish

Collaborators

  • otnansirk