I'm working on a custom Wordpress site that has a lot of javascript (all developed by another developer)
I'm trying to add a script to the bottom of the scripts.js file and it's not working everywhere. It works in the console. It works in firefox.
It's inside it's own document ready function.
The document ready is working (I used an alert to test this), however my alert, console log and script inside this doc ready function will only work inside of the console (or firefox), but not from the scripts.js file in chrome and safari.
Here is my code (it's to make a video play and pause on click of the video window, not just the play controls)
jQuery(document).ready(function () {
// alert('working')
/**
* This module controls the video players
*/
jQuery('video').click(function(){
//alert('working');
this.paused?this.play():
this.pause();
//console.log(this);
});
});
Any help is greatly appreciated.
I'm assuming this is because your video element is not actually present, or is being switched out, after the ready event fires.
It's possible that firefox happens to be loading the video element before your ready event fires, but this would likely vary on how fast the javascript and html are intepreted.
Instead of putting the event directly on the 'video' elements, put it on the document with a 'video' filter.
http://jsfiddle.net/2kmxL1h4/1/
jQuery(document).on('click', 'video', function () {
//alert('working');
this.paused ? this.play() : this.pause();
//console.log(this);
});
Maybe it is a problem with the different JS-Engines !
Did you try what happens, if you move jQuery('video').click(function(){console.log(this);}); within the ready part of the old source of the file ?
Related
I want to remove BOX from the list:
In my .js file I use:
$('#context_external_tools_select li:contains("BOX")').remove();
It works in the console but it does not work after I upload the JavaScript to the server. By the way, it is Canvas LMS.
Wrap it in document.ready
$(document).ready(function () {
$('#context_external_tools_select li:contains("BOX")').remove();
});
Most likely the reason this works in the console is you're executing the code after the DOM has fully loaded. If this doesn't work with document.ready, you need to check your console for errors.
How would I attach an event listening to a video element so that it has the attribute controls only after it has started playing (and subsequent pauses)?
What I have is
$('#new-normal-video').on('play',function(){
$(this).prop("controls",true);
});
and for some reason that event isn't atttaching.
I tried it out here. It seems to be working for me. Make sure your video elements are added properly. If you are dynamically creating the video, the script might be calling before the video elements are created. Here is a working JSfiddle for your problem
https://jsfiddle.net/rea00rz6/1/
$('#myVideo').click(function() {
$('#myVideo').get(0).play();
});
$("#myVideo").on('play', function() {
//my code here
$('#myVideo').prop("controls", true);
});
Been messing around with Froogaloop, Vimeo's JavaScript API, and am trying to add a class to the Vimeo iFrame that is currently playing. Seems simple enough, using the API's events, but I can't seem to wrap my head around it. Here's what I've got so far:
The code below is a simplified version of their example. While it's not causing any errors in my console, I'm not getting any of the logs (and therefore not getting the classes). Am I missing something?
Thanks for your help!
var iframe = $('article.video iframe')[0],
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('play', on);
player.addEvent('pause', off);
player.addEvent('finish', off);
});
function on(id) {
console.log('playing');
player.addClass('playing');
}
function off(id) {
console.log('not playing');
player.removeClass('playing');
}
UPDATE
The issue definitely has to do with the variables. Player tells Froogaloop which iframe to work with, iframe identifies which html object that is. So I suppose the issue is how I can identify all the iframes on the page and then feed Froogaloop the appropriate iframe when one is activated.
Yes, as I see, in the on() and off() functions Froogaloop is giving you the ID of the iframe by parameter. So, in that case you should add and remove class like this:
$('#'+id).addClass('playing');
$('#'+id).removeClass('playing');
And in your HTML you should provide an id="videoX" to every iframe tag, plus to add &player_id=videoX at the end of the url address of the src property from the iframe.
Is there a way for javascript/jQuery to know if the source file for an <audio> tag has been/is being loaded?
I am using mediaelement.js, however I'll accept an answer that works for just a regular <audio> tag. Currently I'm faking the loading indication:
$("#temp-loading").spin(minySpinner);
setTimeout(function() {
$('#temp-loading').spin(false);
}, 12000);
(spin() is a function from spin.js). Obviously the indicator is meaningless in this case, but people were getting confused when the page was loaded but the audio was taking about 15 seconds to start playing, so I had to implement this temporary solution. I'd like it to actually indicate if the file is still being loaded, though, so on slower connections the icon will remain until the file has actually started playing.
Also of note is that I have the element set to autoplay (it's okay, I promise!), so when the page is loaded it automatically starts "playing", even though no actual audio is happening yet. This makes it hard to use the play event to stop the spinner, since it just stops immediately. So I'll either have to stop the spinner when the audio actually starts, or not PLAY until the audio is actually ready to be played, if that makes sense.
I also noticed that while the audio file is loading, the time indicator says, "00:00". When it's loaded, it changes to "00:00:00". So it seems that the ability to do what I need is already built-in, I just need to know how to use it.
If it makes a difference, the file is a live stream (via Icecast). Thanks!
What about the canplay event?
EDIT
Since I got the points, I'd better paste brick's solution for posterity:
$("audio").mediaelementplayer({
audioWidth: 150,
features: ['playpause','current','volume'],
success: function(element) {
element.addEventListener('loadeddata', function(){
$("#temp-loading").spin(false);
}, false);
}
});
I've half-way solved it with the following:
$("#temp-loading").spin(minnerSpinner);
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function(){
$("#temp-loading").spin(false);
});
However this is not a cross-browser solution (works in Chrome and Safari, not Firefox).
edit I have it working with jQuery now, but still doesn't work for Firefox (which is using mediaelement's Flash fallback). At this point it's not an html5 question anymore, it's a mediaelement problem.
$('audio').bind('loadeddata', function(){
$("#temp-loading").spin(false);
});
edit 2 I ended up getting it work following Tetaxa's suggestion... not exactly what he/she suggested, but it gave me the idea to use the success callback:
$("audio").mediaelementplayer({
audioWidth: 150,
features: ['playpause','current','volume'],
success: function(element) {
element.addEventListener('loadeddata', function(){
$("#temp-loading").spin(false);
}, false);
}
});
Thanks!
I’m using jQuery for my project. $(function(){...}) fires the function “when the DOM is ready” — this doesn’t say that all images are loaded, right?
Is there an event that gets fired when every image is loaded too?
I guess you mean
http://api.jquery.com/ready/
versus
http://api.jquery.com/load-event/
Example: Run a function when the page is fully loaded including graphics.
$(window).load(function () {
// run code
});
without jQuery:
window.onload=function() {
alert(document.images.length);
}
You can check on load event of image tag. This will get fired when image loading completes.
$("img").load(function(){
// your code
});
window.onload will solve this, I wrote about this there: http://amrelgarhy.com/blog/how-to-tell-when-images-have-loaded/