I support a React SPA using VideoJS for creation of the Player for our AWS Live Video production. I've installed the plugin using NPM and added the import to my component that is also utilizing the react-hook-videojs plugin.
This is the basic overlay code I've added to my component and trying to display over the video:
if (ready) {
player.overlay({
content: 'Default overlay content',
attachToControlBar: 'Play',
overlays: [{
align: 'top',
content: 'Title: Primetime Event',
start: 'play',
end: 'pause',
debug: true
}]
})
}
Steps to reproduce
Explain in detail the exact steps necessary to reproduce the issue.
refresh my app
press play on the big play button
expect to see the static title at the top
Results
without touching anything in dev tools it doesn't look like anything is there
when I use the select element option in dev tools I can find a very slim bar across the top of the player referenced in the html below (I bolded the reference to the plug in div):
Video Player is loading.
**
Title: Primetime with Paul
**
::before
...........
### Expected
I expected to see the text, "Title: Primetime with Paul" at the top of my player after I press play. When I press pause I expect it to disappear. It would continue to toggle like that when I continue to press play and pause.
### Actual
No text is displayed at all
### Error output
N/A
## Additional Information
I have console.logged the player object. If it would help to have any additional information from there please let me know.
### versions
what version of videojs does this occur with?
react@17.0.2
video.js@7.17.0
videojs-overlay@2.1.5
node@7.20.6
#### browsers
Chrome
Edge
#### OSes
Windows
Mac OS
### plugins
As mentioned above: https://www.npmjs.com/package/react-hook-videojs
Description
I support a React SPA using VideoJS for creation of the Player for our AWS Live Video production. I've installed the plugin using NPM and added the import to my component that is also utilizing the react-hook-videojs plugin.
This is the basic overlay code I've added to my component and trying to display over the video: if (ready) { player.overlay({ content: 'Default overlay content', attachToControlBar: 'Play', overlays: [{ align: 'top', content: 'Title: Primetime Event', start: 'play', end: 'pause', debug: true }] }) }
Steps to reproduce
Explain in detail the exact steps necessary to reproduce the issue.
Results
My problem appears to be solved with a CSS override:
The react SPA was inheriting parent css and the overlay position was always in the back...
.vjs-overlay { position: relative; font-size: 64px; width: '100%'; margin: auto; left: 0; background: none; }