Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is it possible to have the play event not directly on a video, but on a document?

I want to listen to any play event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event

From the docs the listener must be attached to a video.

And the following didn’t work:

document.addEventListener("play", (event) => {
    // do something when some video starts playing
});

Because I want to do some generic actions when any video starts playing in the page, so I don’t want to attach listener to every video (so to use delegation)

The reason I need to do it is because I have custom controls, and I want to be able to change the buttons (toggle play/pause for example) whenever a video is played/paused, without having the listener on the video itself every time

Tags:

2

Answers


  1. 0

    As the MDN docs you linked mention, the play event doesn’t bubble, so you’ll need to use a capturing event listener instead by passing a third argument to addEventListener.

    document.addEventListener('play', () => {
  console.log('play');
}, true);
    #video {
  max-width: 100%;
}
    <video id="video" controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
    Login or Signup to reply.
  2. 0

    Here are a few scenarios where a "play" event could be relevant for a document:

    Interactive PDFs or eBooks: In certain interactive PDFs or eBooks, elements within the document can be programmed to trigger actions similar to multimedia elements. For example, Latest Mailing Database clicking on a button or link could activate a script or open another part of the document, which can be conceptualized as a form of "play" event.

    Web-based Document Viewers: Document viewers embedded within web pages can also have interactive features where clicking on a specific area or button within the document triggers an event. This can include navigation to another page, displaying additional content, or even triggering animations or interactive elements within the document itself.

    Online Presentations or Slideshows: In platforms that support online presentations or slideshows, navigating to the next slide or advancing content can be considered as triggering a "play" event. This event is not limited to video playback but encompasses any action that progresses through content sequentially.

    Document Automation and Scripting: In more advanced scenarios, documents can be scripted or automated to perform actions based on user interactions or predefined events. These scripts can respond to user inputs, external triggers, or even time-based events, effectively creating a play-like behavior within the document.

    In summary, while the term "play" is commonly associated with multimedia playback (such as videos or audio), its application can extend to interactive documents where events trigger actions related to content navigation, interaction, or progression. The specific implementation would depend on the document format, the platform used for viewing, and the scripting capabilities available within that context.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search