We Keep Coding

Fire function when HTML5 video seeks/plays

I am trying to stream video using links that expire every 2 minutes.
Basically, I use this function to replace the URL, and it works great:
function test(){
var videoFile = 'new.mp4';
var $video = $('#m video');
var curtime = $video[0].currentTime;
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].currentTime = (curtime);
$video[0].play();
}
The question I have is how do I fire this function every time the video starts playing/after someone seeks in it? If i fire the ok(); function using a play event then it starts a loop since the function itself causes a play event.
Does anyone have any ideas on how to fix this in a good way?

The solution would be to register the play event once the video has actually started playing. That way it will react after a pause or a seek.
If you need to disable the event on other conditions then you simply disable the play event (as done in the start of the playing function)...
function test(){
var videoFile = 'trailer.mp4';
var $video = $('#video');
var curtime = $video[0].currentTime;
videoSrc = $('source', $video).attr('src', videoFile);
$video[0].load();
$video[0].currentTime = (curtime);
$video[0].play();
$video.on('playing', function () {
$video.off('play') // remove existing Play event if there is one
console.log("Play event bound")
$video.on('play', function () {
console.log("Video play. Current time of videoplay: " + $video[0].currentTime );
});
});
}

multiple audio, auto stop other when current is playing with javascript

I have more than 5 audio players with audioplayer.js on a html5 page.
Does anyone has a simple script in js to pause all other players when the current player is playing ?
jQuery:
$( function(){
$("audio").audioPlayer();
});
Library
https://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js
I have tried as below
window.player = $('audio')[0];
$('.audioplayer-playpause').click(function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
});
I have made a jsFiddle just to easeout things and below is the link:
JS Fiddle for Audio Player

Try the below code.I have tested it in JS Fiddle & it is working :) :)
Updated JSFiddle
Put this code in Javascript & remove yours.
document.addEventListener('play', function(e){
// get all <audio> tag elements in the page.
var allAudios = document.getElementsByTagName('audio');
// Iterate through all players and pause them, except for
// the one who fired the "play" event ("target")
for(var i = 0; i<allAudios.length; i++){
if(allAudios[i] != e.target){
allAudios[i].pause();
}
}
}, true);

MediaElement.js: Trigger event, if some specific audio file has ended

Referring to MediaElement.js. How to trigger an event (call a function), if some specific audio file has ended?
var myAudioFiles = ['audioFile1.wav', 'audioFile2.wav', 'audioFile3.wav'];
var myPlayer = new MediaElementPlayer('#myPlayer');
myPlayer.setSrc(myAudioFiles[0]);
myPlayer.play();
Pseudo Code:
if (hasEnded(myAudioFiles[0])) {
doSomething();
}

Please try this.
$(function(){
$('audio,video').mediaelementplayer({
success: function(player, node) {
player.addEventListener('ended', function(e){
player.src = 'media/somefile.mp4';
player.load();
player.play();
});
}
});
});
copied from here:
mediaelement.js - play another video at end of 1st video

Minimalistic play() and pause() audio solution

I found a little code snippet within another question, playing an mp3 just with jquery play() and pause():
<a href="#" rel="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
class="play">Play</a>
<div class="pause">Stop</div>
<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
var source = $('.play').attr('rel');
audioElement.setAttribute('src', source);
//audioElement.setAttribute('autoplay', 'autoplay');
audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
});
});
I get the audio source from the rel attribute of the "play"-link. Now I would like to add more audio links and make the source relative to their rel attributes.
I tried
var source = $(this).attr('rel');
and also .find() and .each(), but nothing worked so far. I've set up a jsfiddle with two audio links, where only the first audio file will be played. (The fiddle links to an external script, which the client uses on his site, where only jquery 1.4.3 is loaded, but I guess it's possible anyway. I just don't want to use an audio player plugin, I aim for a minimalistic solution.)
Any help would be highly appreciated!

You can update your script to create one audio tag per container:
$(document).ready(function () {
// For each container div
$(".container").each(function() {
// Create the HTML5 <audio> tag
var audioElement = document.createElement('audio');
// Find the play/pause buttons
var $play = $(this).find(".play");
var $pause = $(this).find(".pause");
// Load the source from the play button
var source = $play.attr('rel');
audioElement.setAttribute('src', source);
$.get();
// Play the sound when loaded
audioElement.addEventListener("load", function () {
audioElement.play();
}, true);
// When the user clicks on the play button, play the audio
$play.click(function () {
audioElement.play();
});
// When the user clicks on the pause button, pause it
$pause.click(function () {
audioElement.pause();
});
});
});
And updated Fiddle: http://jsfiddle.net/sY7UT/

HTML5 audio not loading sometimes

I have a class AudioClass in javascript to play audio as below: (pseudo code)
var AudioClass = function() {
this.audioElement;
.
.
.
this.load = function(audioSource) {
this.audioElement = //create Audio, set source etc.
this.audioElement.addEventListener("loadedmetadata", function(){
//some code
});
}
this.play = function(from, to) {
if(isNaN(this.audioElement.duration)) { return; } //line 1
this.audioElement.currentTime = from/1000; //line 2 //from & to in milliseconds
setTimeout(function() {
//pause audio.
}, to-from);
}
}
And I am using the Audio as below:
/* the below lines are executed on document load. (playing background music) */
var audioInstance = new AudioClass();
audioInstance.load(audioSrc);
audioInstance.play(20000); //line 3 //20 seconds
/* the below line is used at other places whenever i need sound */
audioInstance.play(40000); //40 seconds
When I am trying to play audio at "line 3", sometimes audio is not loaded by that time, so it is throwing INVALID_STATE_ERR. DOM EXCEPTION 11 at line 2. When I checked the audio duration, it was NaN. So I added "line 1" to check whether the duration isNaN() or not, so that it doesn't try to set currentTime until the audio is loaded.
The problem here is sometimes the duration of audio is always NaN. How to fix this?

You have to create a callback to play the audio when it loads. it works whenever you call audio.play in other places because the audio is loaded by then. Here is how i suggest you do it:
var Audio = function() {
this.audioElement;
.
.
.
this.load = function(audioSource,callback) {
this.audioElement = //create Audio, set source etc.
this.audioElement.addEventListener("loadedmetadata", function(){
//some code
if(callback!=null)
callback();
});
}
this.play = function(from, to) {
if(isNaN(this.audioElement.duration)) { return; } //line 1
this.audioElement.currentTime = from/1000; //line 2 //from & to in milliseconds
setTimeout(function() {
//pause audio.
}, to-from);
}
}
then use it like this:
var audio = new Audio();
audio.load(audioSrc,function()
{
audio.play(20000);
});
an answer to a similar question shows how to preload all your audio (in the event you have others) before start using them:
Proper onload for <audio>

Play the sound in a callback registered to the loadeddata or even better, canplaythrough event of the audio element. (See javascript audio onload and similar questions.)