vids-plus-ads v1.0.3
VidsPlusAds
React video component library with in-built support for running video ads
Integrate ads in your videos without hassle
- Easy configuration with simple props
- (New v1) Supports all VideoJS methods
- Written in TS for type filling and parametr diagnosis
- Set how often you want the ad to run
- Set whether you want the ad to preroll
- Ads automatically adjust to your displayed video component dimensions regardless of ratio/size differences
- Skip Ad feature when ad is running
- Can use as simple video player if no ad source was passed
Installation
npm install vids-plus-ads
Usage
Import package
import VidsPlusAds from 'vids-plus-ads'
Set required parameters
// set ad frequency in ms (time between ads)
const adFrequency = 10000
// set video source
const videoSource =
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'
// set ad source
const adSource =
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4'
Pass props and call component
<VidsPlusAds {...{ adFrequency, videoSource, adSource }} />
Component Props
* requried
Name | Type | Description |
---|---|---|
videoSource* | string | Local path or URL source for main video content |
adSource | string | Local path or URL source for video ad |
adFrequency | number | The time in milliseconds between ad runs |
preroll | boolean | Preroll ad upon video playback if true |
autoplay | boolean | Autoplay video on load |
thumbnail | string | video thumbnail image source |
height | number | height of player in px |
width | number | width of player in px |
fluid | boolean | auto adjust player size |
controls | boolean | show video controls |
onPlay | function | callback when player starts/resumes |
onLoadedMetaData | function | callback when video metadata is loaded |
onPause | function | callback when player is paused |
overlayChild | React.Node | element to be displayed on top of video |
Component Methods
ref | useRef() Obj | Can be used to programmatically trigger player methods/actions
const ref = useRef()
// ...
<VidsPlusAds {...props} ref={ref} />
Core Methods
All Video Player methods supported by VideoJS are accessible on any VidsPlusAds intance through
the 'core' prop on ref.current
.
examples:
ref.current.core.play()
plays videoref.current.core.pause()
pauses videoref.current.core.duration()
returns video duration in secondsref.current.core.currentTime()
returns current video time in secondsref.current.core.currentTime(seconds)
sets current video time in secondsref.current.core.paused()
returns true if video is pausedref.current.core.ended()
returns true if video has ended
Extended Methods
Convenience methods with added functionality. Accessed directly with ref.current
ref.current.togglePlay()
toggles play/pause
Migration
version 1.0.0+ added support for all VideoJS methods.
To migrate from version 0 to 1 install the new version and covert any core method calls on ref.current
to ref.current.core
instead.
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago