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 !

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

Detect song change when streaming Icecast radio station

I am using JPlayer to stream an Icecast station and would like to show the current song name whenever a track changes. I have PHP that uses a function (https://gist.github.com/fracasula/5781710) to detect the current playing track.
I would like to update the track title and band image every time a track changes. I can't find a way to trigger an event every time a song changes, but know that the song meta-data is sent in the stream every 16,000 bytes (Title of current icecast streamed song).
Is there a way to check for the metadata block containing the song information using Javascript, thereby allowing me to change the song title (and corresponding google image) whenever a new track plays?
My current code is below (I'm just pinging the script to get the current track every minute at the moment):
$(document).ready(function(){
var stream = {
title: "My Stream",
mp3: "http://mystream.com:8000/myStream"
},
ready = false;
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
ready = true;
$(this).jPlayer("setMedia", stream).jPlayer("play");
},
pause: function() {
$(this).jPlayer("clearMedia");
},
error: function(event) {
if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
$(this).jPlayer("setMedia", stream).jPlayer("play");
}
},
stop: function(event) {
console.log("stop");
$(this).jPlayer("setMedia", stream).jPlayer("play");
},
swfPath: "js",
supplied: "mp3",
preload: "none",
autoPlay: true,
wmode: "window",
keyEnabled: true
});
requestTrack();
setInterval(requestTrack, 60000);
// get the current track info
function requestTrack() {
$.get( "tools/getTrack.php", function( data ) {
console.log(data);
$( "#current-track" ).html( data );
// search for an image with the band/song name
$.get( "https://www.googleapis.com/customsearch/v1?key=MY_KEY&cx=MY_CX&q="+encodeURIComponent(data)+"&searchType=image", function( data ) {
console.log(data.items[0].link);
$("#album").attr("src",data.items[0].link);
});
});
}
});

The metadata block isn't detectable in JavaScript. In fact, it isn't requested by the browser at all. You have to do this server-side. You could implement polling, or modify a script on the server to push data to clients as the metadata changes. (This would require a constant connection to the Icecast/SHOUTcast server from your HTTP server.)

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.

Automatically click a hyperlink in jquery/js

I have a link where I need to be click it automatically using jquery or js.
If I click on the link the files are removing but I need to do it automatically after uploading all the files.
Actually I;musing plupload and it has functonality to remove all the files for jquery UI as $('#uploader').plupload('clearQueue'); but this is not working!
This is my link
<a id="deleteallfiles" href="#">[Remove all files]</a>
This my script:
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").plupload({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: 'Final.aspx',
max_file_size: '10mb',
max_file_count: 25,
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
// resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// Flash settings
flash_swf_url: 'js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: 'js/plupload.silverlight.xap'
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').plupload('getUploader');
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('StateChanged', function () {
if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
$('form')[0].submit();
}
});
uploader.start();
}
else
alert('You must at least upload one file.');
return false;
});
var uploader = $('#uploader').plupload('getUploader');
uploader.bind('FileUploaded', function (up, file, res) {
$('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
});
// $('#uploader').plupload('clearQueue');
$('#deleteallfiles').click(function (e) {
$.each(uploader.files, function (i, file) {
uploader.splice(file);
});
});
});
</script>

$('#someElement').trigger('click');

You just use the click function. ie
$('#someElement').click();

Do can just do:
$("a").click();
I think that could be the simpelst way to trigger the click event.
From the jquery documentation:
Its just a shorthand for the:
.trigger('click')

I think its as simple as this (tested in IE):
<script type='text/javascript'>
function simulateClick() {
var el = document.getElementById('deleteallfiles');
el.click();
}
</script>
Here is a reference from W3S: http://www.w3schools.com/jsref/dom_obj_all.asp
and here's another implementation with jQuery: http://api.jquery.com/click/

$("#deleteallfiles").trigger("click") Should work as you have a jquery click handler defined.

Simply utilize the click() event handler within jQuery:
Description: Bind an event handler to the "click" JavaScript event, or
trigger that event on an element.
If no function() is specified then the event will be triggered by simply attaching the desired event to the desired element:
$('#target').click();
This is actually a common thing that I see people overlook way too much.