Giter Site home page Giter Site logo

Comments (2)

gkatsev avatar gkatsev commented on May 29, 2024

Basically, the idea of the 2.0 release is to hide any of the ad workings from any plugins listening down stream. So, a plugin could just listen to playing and ended and know when a video starts and ends and not need to worry about whether ads are playing currently or not. To do so, events are prefixed -- and redispatched in case a downstream user does want to know about ads -- to hide them by default.
Around each ad block, we fire adstart and adend events for users to know when we enter ad playback and when we leave ad playback. These are our own events that are fired.
Regular video lifecycle events during an ad will get prefixed with ad, so, the usual play, playing, pause, ended would turn into adplay, adplaying, adpause, adended.
Some of the events during a video also need to be prefixed, for example, the ended event, since there might be a postroll. Those events get prefixed with content, so, ended becomes contentended. ended gets special attention because we make sure that ended gets fired after all the postrolls are done to make sure that downstream users know the video and all ads are done.
So, a typical video's events could look something like:

  1. loadstart
  2. loadedmetadata
  3. canplay
  4. canplaythrough
  5. play
  6. playing
  7. pause
  8. play
  9. ended

This will apply to a regular video or a video that has ads. Assuming a single pre-roll and a single post-roll, the full event log could look something like:

  1. loadstart
  2. loadedmetadata
  3. canplay
  4. canplaythrough
  5. play
  6. playing
  7. adstart
  8. adplay
  9. adplaying
  10. adended
  11. adend
  12. pause
  13. play
  14. contentended
  15. adstart
  16. adplay
  17. adplaying
  18. adended
  19. adend
  20. ended

And if we had not prefixed the ad-events, the event stream would look like the following:

  1. loadstart
  2. loadedmetadata
  3. canplay
  4. canplaythrough
  5. play
  6. playing
  7. adstart
  8. play
  9. playing
  10. ended
  11. adend
  12. pause
  13. play
  14. ended
  15. adstart
  16. play
  17. playing
  18. ended
  19. adend
  20. ended

Now it's hard to know when the actual video ends vs when ads are over.

While we didn't like the dependency order requirement for this plugin we felt like this was the best possibly solution that would keep all the ads details contained to this plugin. Hope the above gives some more insight into our thought process and what actually happens.

from videojs-contrib-ads.

chemoish avatar chemoish commented on May 29, 2024

The example debug made it pretty clear, but just wanted to verify.

Thanks.

screen shot 2015-08-18 at 11 14 51 am

from videojs-contrib-ads.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.