videojs-overlay icon indicating copy to clipboard operation
videojs-overlay copied to clipboard

Feature request/suggestion: conditional values for start and end

Open codepreneur opened this issue 8 years ago • 3 comments

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.

codepreneur avatar Oct 28 '16 18:10 codepreneur

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 evaled?

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 with start: 1
  • start: {on: 'foo'} is synonymous with start: 'foo'
  • start: {on: ['foo', 'bar']} is synonymous with start: ['foo', 'bar']
  • And condition is only meaningful in the presence of at or on.

That would open up a ton of customizable options and leave it mostly up to the implementer.

misteroneill avatar Nov 01 '16 15:11 misteroneill

An array also matches videojs's support for multiple events.

gkatsev avatar Nov 01 '16 15:11 gkatsev

This would be useful. Conditions would also help with #31 .

mister-ben avatar Nov 07 '16 17:11 mister-ben