I need to create an event that starts if the page is making any sound, or if there is a file playing on it.
Is there a way to do this?
Thanks
There are multiple way for your page to play a sound -- mostly via <object>, <embed> (though you can do it in an <applet> too!). Trouble is each one of these embeds a plugin in the page and each plugin has different parameters, and they are specific for each provider. And there is a multitude of them... And sound formats... so you could write a script that iterates through all these tags and finds all the parameters for them and try to figure out if this is a QuickTime plugin, or a real player, or windows media etc etc etc -- point being it will be a horrible function and it will still not cover all the cases. So I guess NO should be the short answer.
Only possible with HTML5 supporting browsers, but if you use the <audio> tag you have an event attibute at your disposal called onplay
If jQuery, you can do an each event bind for the play event for all audio tags on a page.
Try it:
http://jsfiddle.net/jdgiotta/rvpBj/
Related
I would like to add an option for users to add a link to a video to insert into the post.
The thing is that for users sometimes this might be confusing, this value could be:
The actual video embed code
The link of the embed iframe (src)
The link of the video in the site
Is there any plugin that checks and turns any of those into the embed code? Of course I could try to implement this, but getting to a stable solution could be slow, and there won't be a point if there is any public feature alike
Any workarouds like this?
I remember of jquery oembed, but this was only working for second option I think
I've been using oembed in a few forms, but the latest plugin I've used was jquery-oembed-all
This works for the video url instance.
If you need to allow all options you could use some javascript to detect if an iframe tag exists.
I am building Chrome extension. I need to place a text over the YouTube flash player using JavaScript code. I saw many programmers did that but I didn't understand HOW?
Update: I need to place the text when the player been in full screen.
Simply use CSS and the position tag to place floating HTML elements. Note the YouTube flash player is just that, a flash object, so you can use normal HTML to place things on top of it.
You can read more here.
To manipulate the DOM (document model) with JavaScript you can use the built in javascript functions or use something like jQuery.
I'm looking for a way to listen for an event in the HTML/CSS of a webpage. Basically, a website I use at work lists queues and appointments, which flag as yellow/red based on the amount of time late on taking said appointment. Other than this visual aide, there is no alert of any kind, which is a failing point if one is juggling multiple windows and doesn't notice.
What I would like to do is put together a simple way to watch for the tag ID or perhaps the flag hex color, and then alert me in a way of my choosing.
The work environment is on OS X, so I presume I'm looking at an Objective-C centric solution unless Applescript is capable of doing this.
Any help would be greatly appreciated.
I know you didn't tag jQuery, or JavaScript, but a custom bookmarklet may be the solution.
As it so happens I created a bookmarklet utility a while back so that you can keep your bookmarklet in an external script file.
You could then have alert or confirm called automatically for some event on the page.
Are you able to specify the browser your users use? If so, Chrome has support for HTML5's out of browser notifications, ala: http://slides.html5rocks.com/#notifications-api
You could get a reference to the dom elements you want to monitor, and use setInterval() to poll the data you are looking for on some interval, alerting when it changes.
See this fiddle for an example.
Problem: Need onclick event to pause/unpause a Youtube video, but impossible to add the evenlistener. Looks to me that the object is 'unclickable'.
Situation: Got a Youtube player initialized by swfobject, onYouTubePlayerReady is build as suggested in the docs (Google API docs)
For HTML & JS see: http://ListAndPlay.com
What I tried: almost everything, from changing doctypes till forcing ID's while adding the eventlisteners, nothing worked.
I hope that one of you see the flaw I made after hours...
i had the same problem before and -i think- i read somewhere in Jquery wiki that object doesn't fire any event because once you click on it you are inside flash object.
as an alternative solution i used a div with z-index:100 and placed it in front of the object and then you can use on click event when the client clicks on that div
i hope this helps
I'm developing sites using progressive enhancement implemented completely in jQuery.
For instance, I'm adding onclick event handlers dynamically to anchor tags to play linked MP3 files "inline" using SoundManager and popping up Youtube players for Youtube links, through $(document).ready(function()).
However, if the user clicks on them while the page is loading, they still get the non-enhanced version.
I've thought about hiding the relevant stuff (via display: none, or something like that) and showing it when loaded, or putting a modal "loading" dialog, but both sound like hacks.
Any better ideas? I feel I'm missing something completely obvious here.
Regards,
Alex
I haven't tested this, but you could try live. The thinking is that you could put your click handlers outside of document.ready so they get executed right away. Since live uses event delegation to achieve it's functionality, you don't really need to wait for the DOM to be ready, and any clicks that are made while the page is loading should still be captured by the event handler.
If that doesn't work, you could try putting the Javascript script tags directly underneath whatever they need to bind. It's not pretty, but it will pretty much eliminate the problem.
Assuming you have used good judgement and people are falling for the non-enhanced version just because the delay is too long then I would use CSS to disable the controls. The CSS will load almost right away. Then using Javascript I would toggle the CSS so the controls are re-enabled.
However, my first reaction is that if the user can click it while the page is loading, then your page or connection is too slow. However, if this is seldom the case--less than 1% of the time--then you can shrug it off as long as the user can achieve his goal, that is listen to his music. I say this because once the users realizes that a better experience awaits half a second later, he will usually wait for Javascript to render and then click.
I take the opposite stance from aleemb regarding using CSS. If you use css to disable the controls, then anyone who has javascript disabled or is using accessibility software will be unable to use those controls without disabling your stylesheet entirely.
You could use a very small inline javascript right before the closing body tag to hide the elements via js really quickly. If it's inline and doesn't have to load external resources it will be very fast, generally faster than a user can click.
However, I do agree with aleemb that if your users are able to mentally process the page and make it to the control they want to click before your js is loaded, there's probably a deeper problem with the way your page is loading. Look into ways to decrease load time: compressing image files, gzipping html/css/js files, minify your javascript, combine images into sprites, etc.
I'd suggest following Paolo Bergantino's advise - event delegation is the way to go to avoid the problem altogether.
I had a similar issue where event delegation couldn't do the job - you can read about that here.