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.
Related
How can I show the same HTML5 YOUTUBE Video twice on a website without loading it twice?
Here you are taught to display a same html 5 video twice without having to load twice. But I want to know how to do it with a youtube video, using the IFRAME tag. The link is taught using the canvas, but I can not do the same with the iframe. Can you duplicate the video even with the iframe? Or is there a way to "catch" the iframe video tag? (I've tried, but it has an "access denied" error). This might help, too.
This is just an example, but I wanted to do something like this:
Original youtube video.png
My "site" with 1 youtube video and several canvas.png
I wanted to take this video is to post several in my site, enabling multiple simultaneous playbacks. As this would take a lot of the internet, I wanted to get the current frame of the original video simultaneously and place them on several canvases, this link teaches you to do just that, but using videos (< video> tag). I want to do this using youtube videos.
I want all players to play / pause at the same time, as if they were copying each other
You can't.
At least, not legitimately. There is no provision in the YouTube Iframe API for granting you access to the underlying video element.
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).
When playing embedded youtube videos, I don't want to display a thumbnail when completed. Instead I'd like to end with last frame. Is this possible?
Either I can pause on the last frame or maybe there's a way to create a high-resolution thumbnail of the last frame?
I am using iframe and I don't mind if video ends with replay button with last frame of video (just like on this page which is done using custom API: http://demo.tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/youtube-player.html, but I am just using iframe.
You could create a function that is invoked at a particular interval, i.e. setInterval, and poll the YouTube player's current time (i.e. player.getCurrentTime()). If the current time happens to be > player.getDuration() - 1 or something, pause the player player.pauseVideo()
As per my knowledge it is not possible, I am also trying to do that but still some glitch is observed in it
Refer the answer : "How to pause embedded youtube video on the last frame?"
I'm not sure this would fulfill all your needs, but did you try adding the &rel=0 option, as in:
<embed src="http://www.youtube.com/v/blabla?whatever...&rel=0" ...>
? Source: YouTube Embedded Players and Player Parameters.
HTH
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 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.