Develop Reference

Need Action when Video is complete in video Player

I need video player which give me some events when video will complete. So, I can start another video after completing one video
How can I achieve it ?
Actually, I want to do it in ionic project. So, html and js video player will helpful for me
Thanks in advance

You can add listener to your video element
var videos = document.getElementsByTagName("video");
videos[0].addEventListener("ended", function() {
videos[1].play(); // the second video on page will start as just the first video ended
}, true);

Pause all other players besides activated one. jQuery audio plugin for <audio> element

I've got this plugin which applies different style to html5 <audio> element and provides flash fallback to browsers that don't support .mp3 file format. Problem I encountered is that once you start playing one song, and then click play on any other song, all of them will play at the same time, which is bad user experience.
I was trying to figure out how to edit plugin to make it only play one song at a time, so say if user listens to one song and then click play on other, first one should pause, and so on.
I'm not entirely sure, but I think something need's to be edited along these lines:
playPause: function() {
if (this.playing) this.pause();
else this.play();
},
However, there are various places in the plugin which seem to deal with playing and pausing song, so I'm not sure that this is exact correct line for this. I'm still very new to jQuery, and can't entirely figure out how this big audio library works, I've been reading through code comment's , but still am unable to figure this out.
Full code of the plugin is available here: http://freshbeer.lv/mg/js/audio.min.js Official plugin website: http://kolber.github.io/audiojs/
You can visit my demo page to see the issue, just click play on several players and you will see that they all play at the same time: http://freshbeer.lv/mg/index.html

Use the addEventListener and the play event. This pauses all players except the one that the play button has been pressed on.
audiojs.events.ready(function () {
var as = audiojs.createAll();
$('audio').each(function () {
var myAudio = this;
this.addEventListener('play', function () {
$('audio').each(function () {
if (!(this === myAudio)) {
this.pause();
}
});
});
});
});

HTML5 audio start over

Having
var audio = new Audio("click.ogg")
I play the click sound when needed by
audio.play()
However, sometimes user is so fast that a browser does not play the audio at all (probably when still playing a previous play request). Is this issue related to preload?
How can I force a browser to stop playing and start over? There is no stop, just pause in HTML5 audio component, correct? What workaround can be used here?
Update - Additional note:
I have multiple checkbox-like div elements with a touchend event. When such event is triggered, the elements visually change, a sound is played and an internal variable is set accordingly. If user tap on these elements slowly, everything works nicely. If tap fast, the sound is often completely skipped...

The simplest solution is to just reset the audio currentTime and ensure it's playing using the play() method. Checking if the audio is playing is not necessary as subsequent play() invocations will not do anything.
audio.currentTime = 0;
audio.play();

This is the code I've been using and it's working for me:
if(audioSupport.duration > 0 && !audioSupport.paused){
//already playing
audioSupport.pause();
audioSupport.currentTime = 0;
audioSupport.play();
}else{
//not playing
audioSupport.play();
}

I noticed that on Firefox, playing a sound again and again really fast (like a short ticking sound) will skip beats often. The best solution I got was to simply call cloneNode and play each sound that way. Its not perfect (compared to Chrome where it sounds flawless):
var audio = document.getElementById('myaudio');
setInterval(function() {
audio.cloneNode().play();
}, 100);

The only way i found how to play a short sound very quickly (so quick that the 2nd sound starts before the first ends) is to actually load 5 or 10 and if you have to play again but are already playing, just go to the next, which is not playing:
var soundEls = [];//load 10 audios instead of 1
for(var i=0;i<10;i++){
var soundEl = document.createElement('audio');
soundEl.src = url;
soundEl.preload = 'auto';
$(this._soundEl).append(soundEl);
soundEls.push(soundEl);
}
var soundElIndex = 0;
return {play:function(){
var soundEl = soundEls[soundElIndex];
if(soundEl.duration > 0 && !soundEl.paused){
//already playing, switch to next soundEl
soundElIndex++;
if(!soundEls[soundElIndex]) soundElIndex=0;
soundEls[soundElIndex].play();
}else{
//not playing
soundEl.play();
}
}};
Result of this is you can actually play the same sound over itself.
Probably not the right way to do it though.

script to check if a video is playing and not restart

Okay, that's phrased awkwardly, but what I'm looking for is a script that checks, onclick if a video is playing, and if it is, don't start playing it again. It's for a page that has six thumbs in an array that each play a video, and you're not supposed to be able to restart the video(which means its acting like its not selected)how would I be able to do this?

To prevent clicking from doing anything to the video you can do this:
$("video").click(function(e) {
e.preventDefault();
return false;
});
To determine if the video is playing or not you can read this previous question:
Detect if HTML5 Video element is playing
So you'll want to read that and then do something like:
$("video").click(function(e) {
if (videoStatus === "playing") {
e.preventDefault();
return false;
}
});
Let me know if you're not using jQuery and I'll update my answer to use getElementsByTagName.

HTML5 Video pause and rewind

Is there any way to pause and rewind to 0s a HTML5 video? Or just simply stop?
I got a jQuery popup, so when someone clicks on it, the popup shows up and the video plays, and when you hit the close button the video pauses. So what I'm trying to do is that if you click again the button to show the popup the video begins in the start position (0 secs).
Thanks.

You can get a reference to your jquery video element upon opening it (or closing the popup) and pause it using pause(), and then set the "currentTime" property to 0 to go back to the beginning.
Here's a reference to the documentation for currentTime.
here's a code sample:
var mediaElement = document.getElementById("video");
mediaElement.pause();
mediaElement.currentTime = 0;

To have a proper stop (pause & rewind) functionality you could do the following:
var video = document.getElementById('vidId');
// or video = $('.video-selector')[0];
video.pause();
video.currentTime = 0;
video.load();
Note: This is the only version that worked for me in chrome using nodejs (meteorjs) in the backend, serving webm & ogg files

Just call the pause() method of the video element. To reset the time, set currentTime to 0 (or any other value if needed, in seconds).

To reset a video to 0 seconds in jQuery:
$('#video')[0].currentTime = 0;
Or, in vanilla JS (Although this has been pointed out above):
var video = document.getElementById('video');
video.currentTime = 0;