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).
Related
I'm using the YouTube iFrame API to embed YouTube videos on my site. The videos are pulled from Reddit data obtained via their API, so the content dynamically changes. Some of these videos load as "Video Unavailable".
My goal is to detect when this happens, and remove the unavailable video. However, I haven't found a way to detect this state.
What I've tried so far:
Look in the iframe contents for items with a class of ytp-error. This does not work because all modern browsers prevent javascript from looking inside iframe contents.
Adding an onError event listener to the player. This does not work because a video being unavailable apparently does not constitute an error in eyes of the player.
I assume there is some call that I can use to detect this in the player, but I have not found such as call. How can this be detected?
Thankfully, it doesn't require another call to the YT API. In the YouTube iFrame's onReady handler, getPlayerState() will return -1 (unstarted) for "unavailable" videos, while all other videos return a status of 5 (video cued). I can now simply remove all videos from the DOM which have this -1 status.
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.
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'm developing an HTML5 application (a game), that automatically preloads 5 video files. I'm able to do so correctly on Safari for PC, so there are no overlooked problems with file formats, codecs or such. The load fails on an iPad. As an official guide for video on iOS puts it:
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
Does this mean, that I have no means to initiate the loading of video after a user initiated action, if that action hasn't been tied to a video element (user clicked on a regular div — I request loading and displaying of a video, compared to the user actually clicking on a video element to load and play that particular element)?
It means that if a user has not pressed play, you can't use the methods.
After further inspection, it turns out, that video.load() and video.play() methods can be called from any onClick handler for any <div> element (that probably stays true throughout every html element, that can receive click events.
The problem with preloading 5 video files on iPad is that it can only preload 1 and will flush any video data, if new video.load() request for a different video is issued, thus you cannot preload 5 videos, but you can make them into single one and then preload that single video.
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.