Reputation: 11
I have two issues that have been plaguing a new web site I developed using MediaElement.js.
First, thanks so much for making this available; it really helped me get this project together which shows a bunch of videos to users on a variety of platforms.
My site has a folder full of .mov files, which are (from what I understand, another person made the video files in iMovie) H.264 encoded.
The site works great in Chrome, which is what I use and what I used in developing / testing. The videos play using the native HTML 5 support in Chrome.
In Firefox (several versions) the videos "fall forward" to the flash player. The videos play. However, whether or not I specify "player.play()" in the complete event handler, the video switches from showing the Play icon to showing the pause icon, but does not start playing. The user has to click the pause button, then click the play button to get each video to play. Here's my call to the mediaelement:
$('video').mediaelementplayer({
defaultVideoWidth: 400,
... features: ['playpause','duration','volume'<?php echo "$progressBar"; ?>],
success: function(player, node) {
player.play();
player.addEventListener('ended', function(e) {
$('#feedback').append('<p>Press "NEXT" to continue.</p>').promise().done(function() {
enableNext();
});
});
}
});
2nd problem: There are times when users have tried to use my site using MacOs / Safari that they have gotten into a situation where the 'ended' event handler doesn't seem to ever be called. I don't let people proceed through and click the "Next" button on my site until the video is ended -- this is a training site and users are required to sit through the entire experience. I have not been able to reproduce this, but we can't go live until I can come up with some fix.
Upvotes: 1
Views: 865
Reputation: 11
I have the same problem in Firefox.
About the ended event: try calling play() after adding the event listener.
Upvotes: 1