4

Playing around with html5 video and was wondering if there was a way to list its events as it happens.

I have one for ended - myVideo.addEventListener('ended',videoEnded,false);

Which works fine but how can i create a a listener which will listen to every event and name them?

myVideo.addEventListener('ALL',AddToLog,false);
function AddToLog(){
   console.log(eventname);
}

Any pointers welcome.

Dan.

v3nt
  • 2,845
  • 6
  • 36
  • 50

2 Answers2

14

Subscribe to all <video> or <audio> events at once:

function addListenerMulti(el, s, fn) {
    s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

var video = document.getElementById('myVideo');

addListenerMulti(video, 'abort canplay canplaythrough durationchange emptied encrypted ended error interruptbegin interruptend loadeddata loadedmetadata loadstart mozaudioavailable pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting', function(e){
    console.log(e.type);
});

It's also a good idea to study media events list from the specification.

Multiple events listener credits go to @RobG's solution.

pwkc
  • 479
  • 7
  • 19
  • 1
    This helped me immensely - thank you. I used it to create the following question here: https://stackoverflow.com/questions/51786361/html5-video-with-autoplay-block-source-folder-from-being-renamed – swabygw Aug 10 '18 at 12:18
1

You can't. You need to listen to specific events.

You can find a list of possibly available events from the specification

Jani Hartikainen
  • 42,745
  • 10
  • 68
  • 86
  • thanks jani! Don't suppose you know if theres a listener that will work for when the 'next' (>>|) button is pressed (in fullscreen mode) as 'ended' doesn't seem to get fired when its pressed? – v3nt Oct 14 '11 at 10:10
  • No idea about that, I haven't really used the video element much myself. Perhaps "seeking" or "seeked"? – Jani Hartikainen Oct 14 '11 at 10:19