Video element event binding not working in Safari browser

Question

I am using wordpress default core player mediaelement.js to play self-hosted videos. By putting the [video] shortcode, I am generating the video rendering code in the front end.

For event binding I am using the Mediaelement's events as described here:

$('video').bind('loadeddata', function(e) { 
    alert('loaded');
});
$('video').bind('playing', function(e) { 
    alert('playing');
});
$('video').bind('pause', function(e) { 
    alert('pause');
});
$('video').bind('ended', function(e) { 
    alert('ended');
});

This is working perfectly in Internet Explorer and Firefox. But in case of safari, it's not working.

Please provide any solution.

Answer 1

It is the weird behavior of Safari Browser as explained by Johndyer in issue number #536 quoting below:

This is a really frustrating part of safari in that it only happens when quicktime isn't installed. In that case, Safari still acts like it understands HTML5, but it fails in strange ways that I haven't been able to detect. So just install QuickTime adn you'll be all set.

Its is working fine with Quicktime installation.