I am embedding a movie in a web page with the embed tag, but I would like to interact and be interacted via javascript with the embedded movie in .mov. In particular, I would like to get the timings so I can perform actions on the web pages when a particular moment in the movie is reached (like adding subtitles or karaoke effects in the page as the movie plays).
Is this possible with standard HTML 4 and javascript, or do I need flash or maybe html 5 ?
Applies only to embedded flash content - post was made before OP clarified that he was using mov files.
Yes it is - provided you have access to the source code of the flash movie. Interaction between Flash movie and the javascript is done through ExternalInterface - check out the call() and addCallback() methods in that page.
As for getting the timings, you can use playheadTime property of the video player control. You might also want to check out the cue points - FLV player dispatches cuePoint events when the play head reaches cue points set at the time of creating the FLV.
You can Listen to these events and call appropriate javascript functions using ExternalInterface.
You most certainly can do this, I've done this with MOVs on a major project. Refer to this page for all you need to know.
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 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 making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/
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.
I would like to have a video play continuouly even when html page changes.The new google videos page works this way. My page utilizes javascript.
You can only continue to play video if you are changing portions of the DOM, not if the location of the page changes.
What about reloading parts of the page with AJAX.
Then you avoid a reload which would stop the video playing.
I think you want to check into AJAX (Asynchronous JavaScript and XML). This allows you to manipulate parts of the page (in general, the entire HTML DOM) using callbacks to the server via JavaScript. This is exactly what YouTube/Google Videos use to allow voting/feedback while still watching the video, since any page reload forces the browser to stop playback of the video and restart.
Depending on which web framework you are using, there are various different choices for AJAX libraries out there. Microsoft have create their own [ASP.NET AJAX]](http://www.asp.net/ajax/) for example, which is now very mature.