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');
});
});

Video ended function not working on mobile

I'm trying to make an image appear when the video reaches the end but it's not working and for now I have this code:
// Change image to video on click(working)
$('#image').click(function() {
video = '<video id="video" muted autoplay poster="/img.png" controls style="width: 100%; height: auto; z-index: 999999;"><source src="/video.m4v"></video>';
jQuery(this).replaceWith(video);
});
// Detect end of video(not working)
$('video').on('ended', function() {
alert("End of te video!");
});
The alert is not popping out, keep in mind that this code works fine on desktop, but not on mobile, any suggestion would be appreciated,
Thanks!

You need to create a new EventListener for the ended events
Example:
video.addEventListener('ended', function(){
//Your Code goes here
})
success: function (video, domObject) {
// add event listener
YourMediaElement.addEventListener('ended', function(e) {
//Do Stuff here
}, false);
i copied the code from the below link checck that for more info...
How to call a function on video end ? (HTML5 and mediaelementjs)

How to find JS function name?

I have implemented on a website a picture gallery that does not allow (it seems) the auto sliding. So at the moment I have to push on a button to see the next picture. My purpose is to catch the function that allows to move to the next picture and to set a timeout to go to the next picture automatically.
How can I get the JS function name using Google Chrome developer tools?
Thank you
UPDATE
This is the Gallery script: http://tympanus.net/Development/ScatteredPolaroidsGallery/
I would like to implement auto sliding on it

source for code proposal from: https://github.com/codrops/ScatteredPolaroidsGallery/issues/4
(function() {
function autoSliding(timeout) {
var self = this;
clearTimeout(self.timeOut);
self.timeOut = setTimeout(function() {
self._navigate('next');
}, timeout);
}
new Photostack( document.getElementById( 'photostack-1' ), {
afterShowPhoto: function(context) {
autoSliding.call(context, 3000)
},
afterNavigate: function(context) {
autoSliding.call(context, 3000)
}
});
new Photostack( document.getElementById( 'photostack-2' ), {
afterShowPhoto: function(context) {
autoSliding.call(context, 3000)
},
afterNavigate: function(context) {
autoSliding.call(context, 3000)
}
});
}())

This should do the work
$('.navigate-next').click();
Or for auto scroll
setInterval(function(){$('.navigate-next').click();},1000);
Change 1000 for whatever you wish

If you are allowed to use jquery in your code, then, you can use $._data() method.
syntax is $._data($("selector of the element")[0], "events")
This will return an Object of all events bounded to that element. Then get the click event and call the handler attribute of the click event.

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.

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)
}));