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.
Related
I would like to use a soundcloud widget but before playing have a custom css "player" and hide the container holding the widget until the user clicks play on the css player which will hide the faux player and show the soundcloud player. This would be done by adding and removing a class on click using javascript.
Is there a way to programmatically trigger soundcloud play button using javascript?
Yes. On the SoundCloud Embed/Widget Info Page, you can open developer tools on the big play button of the example widget - and you'll see the class of that play button:
Simply programmatically click it!
$(".playButton__play").click();
Note: The SoundCloud widget may change over time, in which this solution may not work anymore due to their changes, in which you can attempt to do this solution again. However, a more robust solution would be to use their Web API for generally more control.
I already know that you can have an embedded Vimeo video start from a certain point by adding this line of code #t=0m0s to the iframe source, but what I'm trying to achieve is to have the time the viewer is on the page be cookied so it can set the start point when they return.
This way the video picks up where they left off.
I know the values can be passed with cookies so I'm assuming it's possible, I just don't have the javascript knowledge to wrap my head around it.
Any ideas if this is actually possible?
You can use our JavaScript API to listen for the playProgress event to record how far along they are in the video, then use the beforeunload event on window to store the value that you have in a cookie.
I am building a site for someone who wants to have a sound cloud player on his site, but wants it skinned up to look integrated into the site. For the moment, I am using a script which will create an iframe element within a hidden div (which auto plays), and when a new item is selected to play, it clears the div, and replaces it with a new iframe element.
The next phase for the project requires a bit more integration though. I have been searching for javascript sound cloud integration, but all it seems to provide is creating a simple link that will play and pause the track (only on the users request) with a little bit of javascript to coax it into playing immediately.
Are there any other integrations for sound cloud via javascript that would allow for playing, pausing, stopping and getting information about the current play position (like from an event), as well as other events (like onstart, onstop, onpositionchange, etc)?
Ah ha, found the answer. Have a look on: http://developers.soundcloud.com/docs/api/sdks#javascript
The SC.stream seems to provide all the answers
I am looking to have a video start when a page loads, but once the video has completed, to hide the video (remove the layer possibly). I saw it on a yoga site a few years ago where a video message from the owner appeared over top the content when the page loaded but then dissapeared after the video was done. Not even sure where to begin looking for something like this.
This is something that needs to be handled at the player level. Many flash players or frameworks allow you to register for an event. One event might be on video complete. First get this working. You may not be able to do this from javascript. For example, adobe's strobe player requires you to write a swf plugin which would be loaded in the flash player. Not trivial.
After you have registered it, you can easily close the window by executing some javascript function.
Let me know if you have more questions.
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.