I have an HTML game where the audio is user submitted and played from within an invisible iframe with web audio.
I would like to play the audio without making the iframe into a button and making the user click on yet another thing when they're already interacting with the main site. Is there a good way to handle this? Is it possible to use javascript to transfer clicks on the main site onto the iframe or do there need to be a load of tricks used?
You can access the elements in <iframe> by using this:
window.frames['yourIFrame'].document.getElementById('yourAudioElemId')
After doing so you should be able to start playing audio of that element by using the .play() method that is available to <audio> tag. This is all assuming that you are using <audio> and not const audio = new Audio(), because I think there is no chance of getting into <iframe>'s JavaScript.
Hope it helps.
Related
While browsing a youtube.com page is it possible to control the video player through javascript on that page? E.g. get the embed element and send it a "pause" message.
Could it be possible to use the Youtube JS API?
I have managed to do something similar by browsing the video as HTML 5 (using the &html5=1 query parameter), then getting the video element and calling play() or pause(). However not all youtube videos will show in HTML 5, some load as SWF even when requesting HTML 5.
Any ideas?
Edit:
Okay so given var player is the embed object, the functions such as player.playVideo() work, however I cannot seem to get events to work. E.g. player.addEventListener('onStateChange', myFunc) never calls myFunc. In fact the SWF object seems to swallow all events including 'click'.
Is there any way I can listen for when a user manually plays or pauses, without polling player.getPlayerState()?
The answer is just in the link you posted to the JS API. More precisely, here.
Excerpt:
Playing a video
player.playVideo():Void
Plays the currently cued/loaded video. The final player state after this function executes will be playing (1).
I need to change the location of an HTML5 video tag in a web page. By changing the location I mean passing the tag to another place in the DOM tree.
If I use the JQuery clone function like
$("#first").clone().appendTo("#second");
The video will start from the beggining and it will have to load again.
Is it possible to change the location of a media element like the video element to another part of the tree without having to load the video or audio again? Or at least, is it possible to have more then one player displaying the same video at the same time in a page?
I have a page with a YouTube video embedded in html. I want to stop the video when it's closed using the YouTube API. I have included SWFObject (and jquery), but I'm not able to control the video using any of the described methods.
document.getElementById()
swfobject.registerObject('id', 'version')
How can I control a youtube video using the js api without embedding it through swfobject i.e. by hooking up to the existing tag in the DOM?
Edit for clarification: The video is displayed in a lightbox that is opened by the user and closed by clicking outside it. I want the video to stop playing when the user closes this lightbox.
this might be a better way: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
embed as an iframe. you can still control it with javascript.
I have some videos in a site, which has music playing in the background.
Once I start a Video, I want the Music to stop automatically. Not a big deal when I use a javscript based HTML5 Video plugin.
However, there is a flash fallback (flowplayer). And now I have no idea how to find out (from a javascript point of view) when the flowplayer is clicked. Is there a way to catch this event via javascript? Can I somehow find out, if the div containing the flowplayer is being clicked, even though the player sits on top?
Is there a JQuery way of doing this?
Flowplayer features a javascript API and triggers the onStart event at the moment you start playing the video. You'll find more information here:
http://flowplayer.org/documentation/events/clip.html
You can start by investigating if the <embed> tag or <object> supports click events. This should be possible.
You can also assign an id to the tag and trigger it from there.
This SO question might give you ideas.
I have a video playing on my page. I want to show and hide some div's when the video reaches a certain point. Lets say hide something on 10th second and show it again on 20th second.
I can easily do it in HTML5 with video tag and currentTime attribute but for IE I have to create the same functionality and I think with flash based videos (from YouTube or something like that).
Is there a way to detect the current time of a video playing on my website, embeded from YouTube, Metacafe or any other video sharing site?
I know I could detect it in flash and make it run some JavaScript function but I don't have flash nor have the skills to do it in AS3.
Is it possible to do it from JavaScript level or does any video sharing website out there provides this kind of functionality for their videos?
You could look into using flowplayer, it exposes events for meta data and timing.
You can use ExternalInterface to communicate between flash and js. So inside the flash app, when the video reaches the defined time, you can trigger a call to js function, doing whatever you need with the divs.
Since you will need to receive a stream and you need to detect a specific point in the video I thing you have read this inside flash.