We Keep Coding

How to not trigger video ended event when it has EventListener

I have a webpage with three small html5 videos. When this part of the page loads the first video plays, then when it ends the second video plays, and when the second ends then the third plays. I did this with addEventListener for 'ended'. My code looks like this:
//first video
var player1=document.getElementById('firstVideo');
player1.addEventListener('ended',vidHandlerLow,false);
//second video
var player2=document.getElementById('secondVideo');
player2.addEventListener('ended',vidHandlerMedium,false);
//third video
var player3=document.getElementById('thirdVideo');
player3.addEventListener('ended',vidHandlerHigh,false);
player1.play();
function vidHandlerLow() {
player1.pause();
player2.play();
}
function vidHandlerMedium() {
player2.pause();
player3.play();
}
function vidHandlerHigh() {
player3.pause();
}
The issue I'm having is that i'm trying to play a single video on hover without triggering the ended event which will play the rest. I have tried:
onmouseover="this.removeEventListener('ended'); this.play();"
But the ended event is still triggered. If I hover over video1 then video1 will play then two and three when only the hovered video should play. Any suggestions how to play a single video without my video ended events from running?

Since I only need the videos to autoplay once I was able to remove the event listeners in the functions I call on 'ended' like this:
function vidHandlerLow() {
player1.pause();
player1.removeEventListener('ended', vidHandlerLow);
player2.play();
}

Call random audio file on image roll-over

I have a HTML page with an image in it.
When I roll-over the image with my mouse it plays an audio file.
I have 4 different audio files, and each time I roll-over the image I need it to play the next audio-file in the sequence.
I've got it playing one audio-file back ok, but how do I get it calling the next audio-file in the queue?

Its likely you just need to make a javascript function on the webpage to handle this. Without seeing your codes I can't really give you a good example. Here is what I would do. Within a a script tag or head javascript:
var current = 0;
var musicList = ["file1.wav", "file2.wav" , ...];
function playSound()
{
// Code to play audio file
// you don't need to bother with <audio> elements.
// HTML 5 lets you access audio API directly
// buffers automatically when created
var snd = new Audio(musicList[current]);
snd.play();
// code to increment and current counter (depending on musicList size)
current++;
current = current % musicList.length;
}
Within your HTML, you can just rely on javascript to do the work by using the onmouseover or onmouseout tag.
<img onmouseover="playSound();" src="smiley.gif" alt="Smiley">

Listen for when an HTML5 Audio element stops playing

I need to call a function when an HTML5 audio element stops playing. Specifically the function will reset the seek bar and change the pause icon to a play icon.
Here's my JavaScript:
var audio = document.getElementById('audio');
audio.addEventListener('ended', stopAudio);
function stopAudio() {
audio.stop();
$('.play-pause .play').show();
$('.play-pause .pause').hide();
}
.. only the code inside is not executing once called. The audio is playing successfully and ending successfully, it's just not calling my function. What am I missing?

It is because you are using getElementById and passing audio when I think you mean to use getElementsByTagName, either that or you have the wrong id for the audio element.

I needed:
audio.stop;
Instead of...
audio.stop();
Which fixed it :)

The HTML Audio Element has no method stop(). The reason your event handler isn't "working" is because the line audio.stop(); throws an error and nothing below it will execute.

Your code should look like below in order to detect if your audio has ended. There is no way to detect if it has been stopped but you can detect if it has ended or been paused. If you are looking for the code for when it's paused you replace the "ended" with "pause"
document.getElementById('audio').addEventListener("ended",function() {
$('.play-pause .play').show();
$('.play-pause .pause').hide();
}

Play Mp3 sound clip on mouseclick using jplayer?

Actually this the first time I'm gonna use jplayer plugin, so all I need is to play a sound clip (2 sec) when I click on a div, and I don't know how to use jplayer!
I also need to load the sound clip file in cache as well as the page is loading, so when I click that div the sound clip plays immediately without loading it when clicking
btw, is it possible to do that without using jplayer, jquery maybe?!

If you want to stick with jPlayer, try setting warningAlerts and errorAlerts to true.
$(id).jPlayer( { warningAlerts: true, errorAlerts: true } );
This may solve your problem.
But as long as you only need sound (no video), SoundManager 2 might be a better fit for you. Its really robust and provides extensive debugging output.
soundManager.url = './swf/'; // directory where SM2 .SWFs live
var mySound;
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'someSound',
url: '/path/to/some.mp3'
});
});
//....
//if(xhr-stuff)
if(mySound)
mySound.play();
Use soundmanager2.js for testing and soundmanager2-nodebug-jsmin.js for production. If you have further questions, don't hesistate to ask.

-snip-
scratch that... there's an api
http://www.jplayer.org/latest/developer-guide/#jPlayer-play
Use
$("#jpId").jPlayer("play");

Stopping instead of rewinding at the end of a video in MediaElement.js

I'm wondering how to stop the MediaElement.js player at the end of the video. I wondered how to stop the mediaelement.js player at the end of a video. I was hoping to hold on the last frame and not rewind to show the first frame as it does now.
Is it possible to change this behaviour?

I wrote a fix for this problem and John merged in version 2.10.2.
There is now an option "autoRewind" that you can set to false to prevent the player from going back to the beginning.
The eventlistener is not added and there is no more need to remove it.
$('video').mediaelementplayer({
autoRewind: false
});

I believe that the default behavior of the <video> element is to go back to the beginning so you'd just need to override this by listening for the ended event.
var player = $('#myvideo').mediaelementplayer();
player.media.addEventListener('ended', function(e) {
player.media.setCurrentTime(player.media.duration);
}, false);
Hope that helps!

Probably the best solution is not to be afraid and remove the "rewind-to-start-on-video-end" handler from mediaelement source.
If you go into the source code for mediaelement and search for "ended", you'll eventually see, that rewinding after reaching end of the video is actually done deliberately by mediaelement.
If you want to remove that functionality feel free to just remove that handler for "ended" event from mediaelement source. That solves all the problems, including flickering between last and first frame, mentioned in some other answers to this question.

The code in John Dyer's answer didn't really work for me either for some reason. I was however able to get this version working...
var videoPlayer = new MediaElementPlayer('#homepage-player', {
loop: false,
features:[],
enablePluginDebug: false,
plugins: ['flash','silverlight'],
pluginPath: '/js/mediaelement/',
flashName: 'flashmediaelement.swf',
silverlightName: 'silverlightmediaelement.xap',
success: function (mediaElement, domObject) {
// add event listener
mediaElement.addEventListener('ended', function(e) {
mediaElement.pause();
mediaElement.setCurrentTime(mediaElement.duration);
}, false);
},
error: function () {
}
});
videoPlayer.play();
The only problem I'm having - which is very frustrating, is it is flickering between the LAST and FIRST frames in Chrome. Otherwise, it works as expected in Firefox and IE...

This problem i faced when playing audio files
The problem is in the play, when you pause your player the file will stop but before resuming you have to decrease the current time of the player by any value in your case you may decrease it by a frame maybe
after setting your source ,loading your file and pausing, then
myplayer.player.play();
var currentTime = myplayer.player.getCurrentTime();
myplayer.player.setCurrentTime(currentTime-0.1);
myplayer.player.setCurrentRail();