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.
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.
I am bulding a responsive webpage using embedded Youtube videos via IFrames. The IFrame is not loaded directly/upon page load but only inserted into the DOM via Javascript after the user has clicked a placeholder <img>.
So currently I am relying on the player event onReady to start the video after insertion, practically resulting in autoplay behaviour.
This works fine on desktops but not on mobile, due to autoplay restrictions, saying the event must be "initiated by a user interaction": https://developers.google.com/youtube/iframe_api_reference?hl=en#Autoplay_and_scripted_playback
which the onReady event isn't, at least not directly in this case.
As a result, on mobile, I am getting the "If playback doesn't begin shortly try restarting your device" message and the user would have to tap the player again to start playing.
Is there any chance to work around this, maybe 'forward' this user interaction event (which I feel would be like trying to bypass that restraint). Or will I have to embed the <iframe> code directly?
--
Another question arising is that I feel this must have been working until some time ago, so maybe YouTube's IFrame API changed?
I would like to embed a Facebook video on a webpage and listen to its playback events.
On pages such as https://www.facebook.com/video.php?v=ID where ID is the video ID, I am able to embed the post by clicking "embed post" at the bottom right. For this matter, the FB javascript API is loaded and replaces the link with an iframe showing the post containing the playable video.
Fine, but do you see any solution to be notified (javascript callback) when the video starts, and/or reached a certain cue point? Like with the Youtube Iframe API or Javascript API.
I have tried things like FB.Event.subscribe('video.play', callback); since the embeddable snippet loads the FB api providing the global FB object, but with no success...
And by embedding the video, I don't mean just the MP4 file, but the whole player, so that Facebook actually counts a view ;)
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 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.