Recently I've been experimenting with dynamically generated HTML5 tags, and I came up with a problem with binding ended event on HTML5 video tag.
I used this solution found on stack but it works only with play event (only on Chrome, does not work on Firefox).
Any ideas?
The reason for this, is that most HTML5 events do not bubble and jQuery relies on event bubbling for event delegation, which is sad, but you can implement it if you want by using addEventListener:
//note the third parameter has to be true, it is important to work
document.addEventListener('ended', function(e){
if($(e.target).is('video')){
//e.target has ended playing
}
}, true);
As an alternative you can use webshim which implements many HTML5 features thorugh jQuery.
In case you request a polyfill for mediaelement, webshim fixes jQuery's event delegation code for the mediaelement features:
```webshim.polyfill('mediaelement');
$(document).on('play', 'ended', function(){
//this has ended playing
});
Well I have this solution that works on firefox, chrome and safari (IE not tested).
Creating an audio element :
var audio = document.createElement("audio");
Creating an eventlistener to an audio element:
audio.addEventListener('ended', function(){
alert('done');
});
