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
Related
I’m developing a portfolio site that requires a custom Vimeo player, with a play button, pause button, mute button, timer, and progress bar.This website has a perfect example of what I would need (just with different CSS).
I’m assuming that within the Vimeo player for whatever video is embedded, there is a piece of data (please forgive/correct my terminology) that corresponds to the play state, pause state, volume, and time that the video has played, which I would then link to with a Javascript event to toggle each of those for the play, pause, and mute buttons. Though from poring over the source code of the above site, and searching for online solutions, I haven't been able to figure out where that information lives.
In short, does this seem like the simplest way to achieve the effect, and if so, how would I get access to the "play state"?
Steps:
Activate autoplay
Setup fullscreen mode
When go to next video, the player exit fullscreen.
I nedeed that just like youtube, the next video of playlist keeps in fullscreen.
I know that fullscreen Browser API just accepted fullscreen mode when is triggered by a user gesture.
But, as the user has already set up full screen mode, is there a way to continue in fullscreen when going to the next video?
I also know that exits fullscreen because when go to next video, is switchted to a different page.
"In addition, navigating to another page [...] while in fullscreen mode exits fullscreen mode as well. Fullscreen API
My question is, how YouTube manages to change the window.location without exiting fullscreen?
Youtube doesn't load the next video by switching pages. It reloads/-renders the new content on the existing website.
That means that no navigation happens, and because of that, the fullscreen won't be exited.
As far as I know, they use a custom framework called SPFJS which stands for "Structured Page Fragments". It allows for insertion of new content in an already existing page.
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.
I want to embed a youtube video such that the user cannot do anything to change how the video is displayed. I don't want them to be able to pause, fast forward, rewind, or watch the video again. I am having troubles doing this.
I have gotten rid of the bar at the top and bottom and have tried to get rid of keyboard controls, but this has failed. Here is a list of my current issues:
There is a YouTube video that appears when the mouse hovers over the video. This takes you to the YouTube site. I don't want this to be available.
Even though I did "disablekb=1", you can still use the keyboard to control the video.
You can pause the video by clicking on it.
At the very end after the video is over, there is a bar at the top wherein the user can click on a link to the video in YouTube. I don't want this to be available.
Also at the very end after the video is over, you can click on a button to replay the video.
Here is my current code (using a YouTube video as a placeholder for the one that will actually be in there):
<iframe width="640" height="360" src="//www.youtube.com/embed/RMINSD7MmT4?modestbranding=0&autoplay=1&controls=0&fs=0&showinfo=0&disablekb=1&rel=0" frameborder="0"></iframe>
I did find a related post here, but I am not sure how to implement this. Plus, it only takes care of one of the problems.
If I can't do this what I want with YouTube, are there other sites that might work better?
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.