We Keep Coding

Detect if any video is playing in a webpage using Jquery or/and javascript?

My purpose is detected if one of the two videos are playing and console.log it.
I try to build dynamic videos play detect.
I read video ID when the user clicks on the play button, and then use the video ID to assign it video for addEventListner but it just works with my first video. the second video doesn't work and
$(function(){
var videoid = "";
$('video').bind('play', function (e) {
videoid = $(this).attr('id');
});
$('video').on("click", function() {
// test if global variable work
console.log(videoid);
});
var abc = 'video1';
document.getElementById(videoid).addEventListener('playing', function(){
console.log('play' + videoid);
})
document.getElementById(videoid).addEventListener('pause', function(){
console.log('3443');
})
document.getElementById(videoid).addEventListener('ended', function(){
console.log('242434');
})
});
what did I wrong?
http://jsfiddle.net/fbc7nn0o/51/

The video variable in the global scope has not been defined, and thus will fall on document.getElementById(variableName) || document.getElementsByName(variable) || undefined (cf Do DOM tree elements with ids become global variables?).
So addEventListener will only be called from the first <video> element, which as the id "video"...
What you want is
$('video').on({
play : onplay,
playing: onplaying,
pause: onpause
...
})
where onplay, onplaying, onpause ... are event handlers functions. e.g function onplaying(e){ $('.text').fadeOut(); console.log('dfdgd'); }.
Also note that $('#'+$(this).attr('id'))[0] is perfect non-sense.
Just use this.

It work for me.
$('video').bind('play', function (e) {
var videoid = $(this).attr('id');
document.getElementById(videoid).addEventListener('playing', function(){
console.log('play' + videoid);
});
document.getElementById(videoid).addEventListener('pause', function(){
console.log('3443');
});
document.getElementById(videoid).addEventListener('ended', function(){
console.log('ended');
});
});

Call a function within ng-repeat

I am trying to use ng-repeat to load an image, move it to a the appropriate position while playing it's associated tone. Then proceed with doing the same with the next image (one at a time). The issue I am having is that when I try to call my play function, it is calling them all at the same time. Therefore I am getting the error
Uncaught (in promise) DOMException: The play() request was interrupted
by a new load request.
The reason I am using getAudioSrc() for my ng-src is because if I don't I get the error
Error while interpolating:
../Content/Game/Audio/{{it.Tone.ToneFileName}}
Most of the things I could find was in regards to calling a function on the ng-click event. Since there is no click event I used ng-init
<div class="circle-container">
<div ng-repeat="it in model.imageTones | orderBy:Position">
<img ng-src="../Content/Game/Animals/{{it.Image.ImageFileName}}" ng-style="{'transform': 'rotate(' + (it.Position*30) + 'deg) translate(19em) rotate(-' + (it.Position*30) + 'deg)'}" />
<audio id="audioPlayed" ng-src="{{model.getAudioSrc(it.Tone.ToneFileName)}}" ng-init="model.play()"></audio>
</div>
</div>
module.component("gameLts",
{
templateUrl: "../GameAngular/game-lts.html",
bindings: {
imageTones: "<"
},
controllerAs: "model",
controller: function() {
var model = this;
model.getAudioSrc = function(toneFileName) {
return '../Content/Game/Audio/' + toneFileName;
};
model.play = function () {
$("#audioPlayed")[0].play();
};
}

jPlayer - "ready" event isn't firing in IE 7

Like the title says, I have a script that is working in Chrome and Firefox, but not IE. A couple unique things to this implementation are: 1) Multiple versions of jQuery (using noConflict), and 2) the majority of the assets used by jPlayer are generated through the script.
The Markup
<a class="audio-trigger" data-type="mp3" data-loop="false" href="/path.to.mp3">Listen</a>
The JS (inside a document.ready function)
// Initialize audio
if ($('.audio-trigger').length) {
//get jQuery 1.10.2 for jPlayer
$.getScript('/rsc/js/libs/jquery-1.10.2.min.js', function () {
$.getScript('/rsc/js/libs/jplayer-2.5.0.min.js', function () {
//jPlayer noConflict option is restricted to strings that contain the term jQuery
var jQuery1102 = jQuery.noConflict(true);
console.log('jQuery ' + $.fn.jquery + ' has been restored to global, and jQuery ' + jQuery1102.fn.jquery + ' has been preserved.');
//create pause button and audio container
var pause = '<a class="audio-pause" href="javascript:;">Pause | <span class="audio-currentTime"></span> / <span class="audio-duration"></span></a><div class="audio-play-area"></div>';
jQuery1102('.audio-trigger').after(pause);
//get audio link
var audioLink = jQuery1102('.audio-trigger').attr('href');
//Init jPlayer
jQuery1102('.audio-play-area').jPlayer( {
ready: function() {
jQuery1102(this).jPlayer('setMedia', {
mp3: audioLink
});
},
swfPath: '/rsc/js/libs',
supplied: jQuery1102('.audio-trigger').data('type'),
cssSelectorAncestor: '',
cssSelector: {
play: '.audio-trigger',
pause: '.audio-pause',
currentTime: '.audio-currentTime',
duration: '.audio-duration'
},
noConflict: 'jQuery1102',
loop: jQuery1102('.audio-trigger').data('loop'),
errorAlerts: true
});
});
});
}
and lastly, when I click on the audio trigger...
The Error
Attempt to issue media playback commands, while no media url is set.
Use setMedia() to set the media URL
Context: play
My .swf path name is 100% accurate and there are no other errors being thrown in any browser.
Thanks in advance for the help!

I discovered the .swf on the server was out of date. Updating it fixed the issue. Womp womp.

Youtube Upload Widget onApiReady not firing

I'm attempting to utilize the Youtube Upload Widget to upload videos from a site. I have the following javascript:
function onYouTubeIframeAPIReady() {
widget = new YT.UploadWidget('widget', {
events: {
onApiReady: function (event) {
event.target.setVideoTitle($("#title"));
event.target.setVideoDescription($("#description"));
event.target.setVideoPrivacy($("#privacy"));
},
onProcessingComplete: function(event) {
document.getElementById('processing').style.display = "none";
clearTimeout(timeout);
player = new YT.Player('player', {
height: 390,
width: 640,
videoId: event.data.videoId,
modestbranding: 1,
rel: 0,
events: {}
});
$("#updates").slideUp('slow', function() { });
},
onUploadSuccess: function(event) {
alert('Video ID ' + event.data.videoId + ' was uploaded and is currently being processed.');
widgetVideoId = videoId = event.data.videoId;
timeout = setTimeout(showProcessing, 1);
}
}
});
}
The video uploads just fine but onApiReady's function never fires. I'm not sure what I'm missing, because it looks complete. Hopefully someone can provide an idea on what I've missed. It doesn't work in IE9, FF, Chrome, or Safari. I'd like to be able to update the metadata on the video when it's uploaded.

event.target.setVideoTitle($("#title"));
event.target.setVideoDescription($("#description"));
event.target.setVideoPrivacy($("#privacy"));
All of these methods require a string parameter, whereas you are passing them a jQuery object.
I believe you mean to use .val()

Ok, I figured it out. It seems that you must use the <div id="widget"></div> format for the widget controller instead of the iframe method in order for onApiReady to fire.
Thanks for your assistance Brad.

Using Youtube's javascript API with jQuery

I'm currently trying to use the YouTube API as part of a jQuery plugin and I've run into a bit of a problem.
The way the YT api works is that you load the flash player and, when it's ready it will send a call back to a global function called onYouTubePlayerReady(playerId). You can then use that id combined with getElementById(playerId) to send javascript calls into the flash player (ie, player.playVideo();).
You can attach an event listener to the player with player.addEventListener('onStateChange', 'playerState'); which will send any state changes to another global function (in this case playerState).
The problem is I'm not sure how to associate a state change with a specific player. My jQuery plugin can happily attach more than one video to a selector and attach events to each one, but the moment a state actually changes I lose track of which player it happened in.
I'm hoping some example code may make things a little clearer. The below code should work fine in any html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="application/text+html;utf-8"/>
<title>Sandbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js"></script>
<script type="text/javascript">
(function($) {
$.fn.simplified = function() {
return this.each(function(i) {
var params = { allowScriptAccess: "always" };
var atts = { id: "ytplayer"+i };
$div = $('<div />').attr('id', "containerplayer"+i);
swfobject.embedSWF("http://www.youtube.com/v/QTQfGd3G6dg&enablejsapi=1&playerapiid=ytplayer"+i,
"containerplayer"+i, "425", "356", "8", null, null, params, atts);
$(this).append($div);
});
}
})(jQuery);
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', 'playerState');
}
function playerState(state) {
console.log(state);
}
$(document).ready(function() {
$('.secondary').simplified();
});
</script>
</head>
<body>
<div id="container">
<div class="secondary">
</div>
<div class="secondary">
</div>
<div class="secondary">
</div>
<div class="secondary">
</div>
</div>
</body>
</html>
You'll see the console.log() outputtin information on the state changes, but, like I said, I don't know how to tell which player it's associated with.
Anyone have any thoughts on a way around this?
EDIT:
Sorry, I should also mentioned that I have tried wrapping the event call in a closure.
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', function(state) {
return playerState(state, playerId, player); } );
}
function playerState(state, playerId, player) {
console.log(state);
console.log(playerId);
}
In this situation playerState never gets called. Which is extra frustrating.

Edit:
Apparently calling addEventListener on the player object causes the script to be used as a string in an XML property that's passed to the flash object - this rules out closures and the like, so it's time for an old-school ugly hack:
function onYouTubePlayerReady(playerId) {
var player = $('#'+playerId)[0];
player.addEventListener('onStateChange', '(function(state) { return playerState(state, "' + playerId + '"); })' );
}
function playerState(state, playerId) {
console.log(state);
console.log(playerId);
}
Tested & working!

Im Using Jquery SWFobject plugin, SWFobject
It is important to add &enablejsapi=1 at the end of video
HTML:
<div id="embedSWF"></div>
Jquery:
$('#embedSWF').flash({
swf: 'http://www.youtube.com/watch/v/siBoLc9vxac',
params: { allowScriptAccess: "always"},
flashvars: {enablejsapi: '1', autoplay: '0', allowScriptAccess: "always", id: 'ytPlayer' },
height: 450, width: 385 });
function onYouTubePlayerReady(playerId) {
$('#embedSWF').flash(function(){this.addEventListener("onStateChange", "onPlayerStateChange")});
}
function onPlayerStateChange(newState) {
alert(newState);
}
onYouTubePlayerReady must be outside of $(document).ready(function() to get fired

I had this same problem and tried the accepted answer. This didn't work for me; the playerState() function was never called. However, it put me on the right path. What I ended up doing was this:
// Within my mediaController "class"
window["dynamicYouTubeEventHandler" + playerID] = function(state) { onYouTubePlayerStateChange(state, playerID); }
embedElement.addEventListener("onStateChange", "dynamicYouTubeEventHandler" + playerID);
// End mediaController class
// Global YouTube event handler
function onYouTubePlayerStateChange(state, playerID) {
var mediaController = GetMediaControllerFromYouTubeEmbedID(playerID);
mediaController.OnYouTubePlayerStateChange(state);
}
It's fairly nasty, but so is the current state of the YouTube JavaScript API.
Here is some other helpful/nasty code if you are using any kind of advanced prototyping patterns. This basically allows you to retrieve a "class" instance from the YouTube player ID:
// Within my mediaController "class"
// The containerJQElement is the jQuery wrapped parent element of the player ID
// Its ID is the same as the player ID minus "YouTubeEmbed".
var _self = this;
containerJQElement.data('mediaController', _self);
// End mediaController class
// Global YouTube specific functions
function GetMediaControllerFromYouTubeEmbedID(embedID) {
var containerID = embedID.replace('YouTubeEmbed', '');
var containerJQObject = $("#" + containerID);
return containerJQObject.data('mediaController');
}
function onYouTubePlayerReady(playerId) {
var mediaController = GetMediaControllerFromYouTubeEmbedID(playerId);
mediaController.OnYouTubeAPIReady();
}

Here's a nice article that goes through creating a class to wrap an individual player, including dispatching events to individual objects using a similar approach to that mentioned in a previous answer.
http://blog.jcoglan.com/2008/05/22/dispatching-youtube-api-events-to-individual-javascript-objects/

How about something like so:
var closureFaker = function (func, scope) {
var functionName = 'closureFake_' + (((1+Math.random())*0x10000000)|0).toString(16);
window[functionName] = function () {
func.apply(scope || window, arguments);
};
console.log('created function:', functionName, window[functionName]);
return functionName;
};
ytplayer.addEventListener("onStateChange", closureFaker(function () {
//place your logic here
console.log('state change', arguments)
}));