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?
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.
I'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?
I have a quite specific issue regarding Chrome's new feature where they stop autoplaying videos.
On our site we wanted the page to load as quickly as possible, so only insert a new Vimeo embed object when a user has chosen to click to watch a video. Eg. the showreel on our homepage:
https://www.splinter.co.uk/
The problem arises because we use our own custom play button, so Chrome doesn't recognise that as a user-interaction, so it doesn't think that the user has chosen to view the video, therefore it blocks the autoplay option (which works fine in Safari).
I wondered if anyone else has had this problem, and if anyone can think of a workaround?
Thanks!
On the VOD home page of Vimeo you can find a technique that is used for a case like this. https://vimeo.com/ondemand
You can preload the Vimeo player when the user hovers over your custom play button so that at the time they click the Vimeo player.js API can be used to initiate playback. player.play()
If that is not sufficient it might be needed to load the player on page load and just keep it hidden, on the button press reveal the player and use the API to initiate playback.
IE at its best:
There is a USB stick with an HTML document on it. When the user opens it in IE11 and scripts are blocked, a prompt appears to allow those scripts to run.
When you click on allow, the site seems to get reloaded, but it also looks like a new tab is opened/ closed.
As soon as JS is enabled, you get redirected to an online version of the site.
Now, on the site there is a video which starts autoplaying after 10 seconds. But in IE11, a few seconds later the same video starts playing parallely so you here the sound twice.
When you check the DOM and remove the <video> tag (there is only 1), one video stops playing. The one that started later though keeps playing. Even when I visit another website the video keeps playing.
Only closing the browser stops the video.
This behaviour does not occur when I allow scripts to be executed directly.
Using video.js and jQuery.
Any ideas?
HTML Elements do not require JavaScript and/or ActiveX for serving their content. They are automated.
After the page is loaded and rendered as plain HTML, allowing JavaScript, will trigger DOM construction and re-render the content. However, DOM may duplicate the instance of media object and start running a parallel stream, that is, a dupe of the stream already initiated by HTML automation. !Not visible by DOM.
So, there's no new tab being opened or failing to close, it's simply an HTML Automated instance handling the initial stream.
And this will happen only when running HTML pages locally.
Finally:
The best way of avoiding this - expected but unwanted behavior - would be to:
Set the Video Element "autoplay" property to "false".
p.s.:
About the following issue of which you say: "As soon as JS is enabled, you get redirected to an online version of the site."
That's something no browser can or will do for you on its own. So you'll have to remove the code that is triggering the browser navigation to the online content yourself.
Good luck.
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.