How can I customize an embedded Vimeo video player? - javascript

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"?

Related

How to properly enable video autoplay with sound

As an experiment, I wanted to create a video feed like Tik Tok in vue.js.
But I ran into a problem, if I want to turn on autoplay, I have to turn off the sound. At the same time, in order to turn on the sound, the user must interact with the element - but each next video in the feed is one way or another a separate HTML element "video" and there are many such elements, it would be stupid if the user has to turn on the sound on each of the videos.
Please tell me how to approach this problem?

Custom Vimeo API embed not autoplaying in Chrome

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.

Embedded YouTube video

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?

Using javascript, how can I make a YouTube video go to fullscreen when a user clicks play?

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.

How to detect time on a playing Flash 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.

Categories