We Keep Coding

Cuepoints play button not playing video on second click

Hi I am using this small script to create cuepoints for my video:
(function(a){a.fn.cuepoints=function(c){var e=this[0];var d={};function b(){d=a.extend({},c)}b();e.addEventListener("playing",b);e.addEventListener("ended",b);e.addEventListener("loadstart",b);e.addEventListener("seeked",b);e.addEventListener("timeupdate",function(){for(var g in d){var f=parseFloat(g,10);g=g+"";if(f<=e.currentTime&&e.currentTime<=f+0.5){d[g]();delete d[g]}}});return this}})(jQuery);
The problem I am facing is my button will play the video on the first click just fine and when the cuepoint is reached the video pauses however when I press the play button a second time the video will not play (even though the console confirms it has been clicked twice) but if I click the button a third time the video will play again any ideas?
Here's the code:
var vid = document.getElementById("video");
$(document).on('click touchstart tap', '.nextSlide', function() {
vid.play();
console.log('Clicked');
});
$('#video').cuepoints({
10.5: function () {
vid.pause();
},
15: function() {
}
});

Here's what's happening:
The $.cuepoints() plugin keeps track of all the times and callbacks in an object: {10.5: function() {...}, ...}. Whenever the video's timeupdate event fires, the plugin looks at the object, checks to see if the current time is within half a second range of any of the callback times. If so, the associated function is executed and the entry is removed.
However, if someone were to rewind the video, there has to be a way to run those functions at the specified times again. To handle that, the plugin listens for playing, ended, loadstart, and seeked events. When any of those events occur, the time and callback object gets reset.
So here's your problem: when you run vid.pause() in your callback function, the video stops. When the user unpauses video, the playing event fires, resetting all the callbacks. Almost immediately, a timeupdate event realizes that you're still within the half second period, and calls your callback function yet again.
In point of fact, it doesn't always play on the third click. Sometimes it takes four clicks, because the timeupdate event keeps firing inside that half-second period.
Now, the half-second range is necessary. You don't get any guarantee of how often the timeupdate is going to fire, so if you don't have something like that, you run a good chance of skipping the callbacks altogether.
My solution is to stop listening to playing events. The time/event object gets set up when the plugin is originally called, so the first play work fine. When users use the meter to move to a different time, the seeked event will fire. When users get to the end and decide to replay it, the ended event will already have fired. I don't think that the playing event is necessary.
Here's a JSFiddle demonstrating the fix: https://jsfiddle.net/zxfzjqu2/

to add event listener for getting video duration in run time in videojs

I want to monitor the video duration as the video plays using any event listener. I am using videojs for video playback.
I came across events like play, myplayer.isPaused but they fire only once.
myplayer is the video element for videojs.
Now upon further research i got an event named on.
So here goes the code :
myPlayer.on("play", myfun);
function myfun() {
console.log("myPlayer.currentTime()");
console.log(myPlayer.currentTime());
myfun();
}
Here is what i expected that it will give me currentTime as you can see i am calling myfun recursively.
But this function is getting called a million times but only gives me the starting time which is 0.
I even tried to put myPlayer.currentTime() in setInterval, but this method is not trustworthy and ofcourse not a good idea.
I used native javascript eventlisteners but they are not likely to be useful.
So any help to attach event listener for the videoplayback sothat i would get the play duration?

The play event is fired only when playback starts. If you want to monitor progress into the video then the correct event is timeupdate. Here is an example:
myPlayer.on("timeupdate", myfun);
function myfun() {
console.log("myPlayer.currentTime()", myPlayer.currentTime());
}

Adding event handler to loop through dynamically created playlist (YouTube API)

Attempting to implement a playlist function along with a listening history. Thumbnails of videos for the playlist are dynamically dragged/dropped/sorted by the user into a div. Each time a thumbnail is clicked, the video is loaded in the player and the video is added to the history (subHist.click()).
Because the videos are dynamically created, I cannot create the event listener to move on to the next video at the beginning, and have to add it later. The problem with that is I have the listening history function within the function that creates the event listener, so the event listener is called increasing number of times as we go through the playlist, meaning a video appears multiple times in the playlist when clicked only once.
This might make more sense with some code:
$('#Playlist').on('click', '.playlistYT', function(){
$('#subHistory').click();
videoID = $(this).attr("src").slice(27,38);
$('#infoID').val(videoID);
player.loadVideoById(videoID );
var nextVideo = $(this).parent().next().find('.playlistYT');
player.addEventListener('onStateChange', function stopCycle(event) {
if (event.data == YT.PlayerState.ENDED) {
$(nextVideo).click();
}
});
});
The images are of the class .playlistYT once they are dropped (i.e. this class does not exist before any videos are dropped), and $('#subHistory').click() which adds the video the listening history.
If I move the var nextVideo within the addEventListener, then it does not recognise it (can't use $(this) as it seems to redefine that to the event within the event handler). Moving $('#subHistory').click() to the stopCycle function seems to make no difference.
Spent past couple of days playing around with .one, .off, .live, can't seem to crack it. removeEventListener doesn't seem to make any difference, either. I thought of adding a hidden video to the playlist but that then becomes a question of making sure that video doesn't appear in users' listening history/playlists.

The onStateChange event that is passed to the event listener has the 'data' object, but it also has the 'target' object that represents the player that raised the event. So for example, you could define the function that handles onStateChange when you initialize the iFrame API, and within that listener function, you could use something like:
event.target.getVideoData().video_id
To find the ID of the playing video that raised the event. Based on your sample code, it looks like knowing the video ID may help you write the proper jQuery selector to find where in your DOM the video is, and then navigate to the next one from there. Hence your event listener will only be defined once but it will be able to handle the dynamic nature of your app's playlist.

what HTML5 video listener can trigger event in the beginning of a video?

I want to use a listener to trigger a function in the beginning of one video.
Currently I am using:
video.addEventListener("play", function);
It works in desktop. However in IOS, the function only be triggered When I pause then re-start the video. So, how should I do to make a listener to trigger function just in the beginning of the video? The video may auto play or click to play.
Thanks a lot in advanced!

You can use:
video.addEventListener("loadedmetadata", function)
I am not sure is this event won't be send before starting the film so you can use also:
var firstTime = YES;
video.addEventListener("progress", function() {
if (firstTime) {
firstTime = NO;
// DO WHAT YOU WANT HERE
}
});
For all events which are supported by Safari/Webkit just go to https://developer.apple.com/documentation/webkitjs/htmlmediaelement. It is very good lecture.

hook to click event inside embedded youtube player

I want to run a function called stopSlide whenever someone clicks the 'play' button on an embedded youtube video. Or even getting the function to run when they click anywhere inside the embedded video would work fine for me right now.
How can I do this?

There is a YouTube JavaScript API that provides event callbacks.
There is, unfortunately, no way to directly detect a click event (at least I am not aware of any). You can, however, detect changes in the player state for which you can use onStateChange.
First, you will need to enable the JS API in the player by embedding it by using a special URL:
http://www.youtube.com/v/VIDEO_ID?version=3&enablejsapi=1
Then you need to create an event handler function:
function player_state_changed(state) {
/* This event is fired whenever the player's state changes.
Possible values are:
- unstarted (-1)
- ended (0)
- playing (1)
- paused (2)
- buffering (3)
- video cued (5).
When the SWF is first loaded it will broadcast an unstarted (-1) event.
When the video is cued and ready to play it will broadcast a video cued event (5).
*/
if (state == 1 || state == 2) {
alert('the "play" button *might* have been clicked');
}
}
Lastly, you need to make sure that the handler gets called whenever the state of the movie changes:
document.getElementById('MY-PLAYER-ID').addEventListener('onStateChange', 'player_state_changed');

Might be helpful ... edit according to your requirement
http://jsfiddle.net/masiha/4mEDR/

i tried using the suggestions above but didnt succeed.
it can't handle timer slider.
please see Google example for automatic slider, they used a popup for the video.
google slider with embedded video

Upto my knowledge you can't detect a click inside a iframe,or you can't trigger any click event inside the iframe
My solution is place a button inside the Iframe set it's properties as transparent(opacity) inside that button you can call your click function using playmethod and pause method you can enable autoplay

You need to just register an event listener on the player to call your stopSlide function. The following line of code should do it for you (first you have to replace the two "strings" with the appropriate values - the ID of the embedded player, and the name of the function that you want to call. eg: "stopSlide"):
document.getElementById("_idOfEmbeddedPlayerElement_").addEventListener("onStateChange", "_nameOfFunctionToCall_");`