We Keep Coding

Error in selecting video

I am using jQuery in a Userscript to select the video in this page:
https://drive.google.com/file/d/0B70bgg53J5zQMG15VWYwQ05MMFU/view
This is the script which I am running :
(function() {
var exist = setInterval(function() {
console.log('checking');
if ($("video").length) {
alert("Video is there !");
clearInterval(exist);
}
}, 100);
})();
I added an interval to wait for the element to load up. But I can't select it.
I also used other selectors like : "div.html5-video-container > video" and "video.video-stream.html5-main-video".
However nothing works. Guide me please !

Change option and reinitialize

I am using jscroll as an infinite scroll pager.
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
padding: 20,
nextSelector: 'div.next a',
contentSelector: '.latest-container',
autoTrigger: true,
autoTriggerUntil: 1
});
This is a pretty neat plugin and it uses the must-have for my project autoTriggerUntil.
Using that method you can limit the times that the content loads automatic and show the pagination's "next" button.
What I am trying to achieve is this.
Load the first set of posts (actually the 2nd page) with infinite. (DONE)
After the 2nd page, show a "Load All" button. (DONE)
Both 1 and 2 work but what I am trying to do is this: After clicking the "Load All" on page 2, I want to destroy the limiter and get back to an infinite view until the end.
I basically need to reinitialize this somehow. I have been messing with intervals and other bad practices the last couple of hours with no results.

After digging I came out with this solution:-
first, you need to add a callback function like this:-
$('.frontpage').jscroll({
//your existing settings ,
callback: function() {
if ($('div.next a').is(":visible")) {
$('.frontpage').jscroll.destroy();
$('div.next a').off('click');
}
}
});
Second Add onclick attribute to the load All a tag (only in the page where the load all a tag is visible)
onclick="loadAllClick(event);"
and the handler function should be like this:-
<script>
var loadAllClick = function(e) {
e.preventDefault();
$('.frontpage').jscroll( //your settings
);
}
</script>
and Here is a fully working plunker sample
Hope this answers your question

You can use the $(el).off() method and the plugin's callback option.
Tested on the plugin page http://jscroll.com/.
It can look something like this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j('div.next a'); //Your 'next' selector
el.off()
el.on('click',function(e){
e.preventDefault(); // we don't want the browser to go to redirect
// Add your code to show the rest of the comments here.
});
}
And then call bind the same way but add callback:
$j('.frontpage').jscroll({
loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
...
callback:scrollerCallback,
autoTriggerUntil: 1
});

In your CallBack function, try using this:
var counter = 0;
function scrollerCallback(){
counter++;
if(counter<2){return;}
var el = $j(document).find('div.next a');
el.on('click',function(e){
e.preventDefault();
console.log("This call gets executed!");
$j('.frontpage').jscroll({
autoTrigger: false,
autoTriggerUntil: false
});
});
}
What happens when you do this? I guess you have to modify the library itself for this to work, but I am not quite sure yet ...

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

Using Vimeo API and customize?

I'm using Vimeo's API mostly because I want to play the video through my own button.
The only problem I came across is that when I'm trying to change the buttons content like <button>Play</button> to <button>Play me</button> the video won't play. Why is that?
Fiddle here to see what I mean.
The JS from Vimeo's API.
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}
});

I solved my own question...
What I figured out was that the API is looking for what's inside the button. In this case:
Play...
So what I did was <button data-action="play">Play this video</button>
and in the JS I did following thing:
$('button').bind("click", function() {
player.api($(this).data("action"));
});

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.