videojs-overlay
videojs-overlay copied to clipboard
Feature request/suggestion: conditional values for start and end
So this could be possible:
player.overlay({
content: 'Video has been paused',
debug: false,
overlays: [{
content: `<h1>${title.substr(0, 60)}...</h1>`,
showBackground: false,
class: 'video-overlay',
start: 'loadstart || pause',
end: 'playing || vast.adStart',
}]
})
Or is it already possible ? Because without these conditionals its impossible to apply overlays during complex scenarios such as VPAID/interactive ads and I have to remove those overlays manually.
@gkatsev @misteroneill @dmlap
I am happy to do a PR if you guys give me a go ahead.
Interesting idea! I say go for it.
Though, I do have one concern with a syntax like 'loadstart || pause'
- it seems prone to breakage and it begs the question: how far does it go in supporting JS logic that it would essentially need to be eval
ed?
I think supporting an array of events would be better:
start: ['loadstart', 'pause'],
end: ['playing', 'vast.adStart']
That would trigger an overlay to start on the first of loadstart
or pause
. Then it would end on the first of playing
or vast.adStart
.
Moving beyond that - not necessarily for the same PR - we can expand on that further by allowing an object-based configuration, which supports a conditional function that determines whether or not the overlay is allowed to start. This is a bit of an unrealistic example, but...
start: {
// Start at 1 second.
at: 1,
// Start on any of these events.
on: ['loadstart', 'pause'],
// Some kind of conditional function that determines if the overlay can start.
condition: function(player, event) {
return player.currentTime() < 10;
}
}
-
start: {at: 1}
is synonymous withstart: 1
-
start: {on: 'foo'}
is synonymous withstart: 'foo'
-
start: {on: ['foo', 'bar']}
is synonymous withstart: ['foo', 'bar']
- And
condition
is only meaningful in the presence ofat
oron
.
That would open up a ton of customizable options and leave it mostly up to the implementer.
An array also matches videojs's support for multiple events.
This would be useful. Conditions would also help with #31 .