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.
Related
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 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 am using MediaElement.js to allow me to block the standard Youtube controls on my embed to prevent users from skipping through a video. However, when you double click on the video, it gets pulled to fullscreen and then there are video controls when in fullscreen.
Basically I just want to make my users watch the video to it's full extent, but right now, all the user has to do is doubleclick the video and then use those controls to skip ahead in the video.
Does anyone know of how I can disable the doubleclick? I have thought about just blocking users from clicking on the video, but then they can't exit out of ads or use the handy click-to-play/pause.
Thanks
Ok so to start, I have a php webpage that pulls info from my mysql database and populates a page of videos. These videos are displayed in a vertical accordian initally you see the thumbnail and when clicking the thumbnail it expands (accordian effect) and shows the video and plays the video and then when clicking on a new tab the previous video stops playing.
I know this can be done and I almost got it working using the google apis but it didnt work 100%
Here is the jsFiddle to see what I am talking about, I am pretty sure if I can figure out how to make this work I can then figure out how to make it work with my php, but where i got stuck last time is where if open section 1 i want the video only in section 1 to play and when i open another section i want the previously oppened tab to stop playing and play the new one.
HOpefully this makes sense
http://jsfiddle.net/mxDbn/1/
There was no solution for youtube as the API was not involved enough, or I could not figure it out, but rather to embed with flash when falsh was available and because of how videos operate on mobile devices I wouldnt have to worry about html5 playing when it was not on screen because if the video is not seen it will not play.
Vimeo did however offer a javascript api function to stop playing the video when the next page was clicked.
I have a page with a YouTube video on it. The client wants the video to go fullscreen when a user clicks play and bypass the usual step of clicking the fullscreen icon on the player.
I have been searching everywhere for an answer to this question and maybe it just isn't possible, but it seems like it should be there. I haven't found any documentation of it in the YouTube Javascript API reference.
Apparently, this can't be done.