CODEWITHSUNDEEP
jqueryvimeovimeo-api
Tairoc
Tairoc

Reputation: 649

How to Hide Vimeo Controls

Our students are provided with video tutorials using Vimeo.

Once a student was done with watching the videos, s/he is presented with some quizzes.

What we discovered was that the students would use fast Forward control to move the slider forward to shorten the time it takes to watch the videos.

We want to stop that and we are wondering if there is a way to either disable or hide the fast Forward control so students are no longer able to move forward to shorten the video time.

Thanks for your help

Upvotes: 31

Views: 167682

Answers (3)

Adam Kozlowski
Adam Kozlowski

Reputation: 5896

This is my solution to prevent Vimeo fast forward - I made interaction with Vimeo API that is really brilliant.

Script remembers the moment of the video where user try to fast forward. Then js will go back to right place.

Your video:

<iframe src="{{ $video_path }}" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Remember to add vimeo script:

<script src="https://player.vimeo.com/api/player.js"></script>

JavaScript logic:

 let iframe = document.querySelector('iframe');
 let player = new Vimeo.Player(iframe);
 let playing = false;
 let simulationTime = 0;

 player.on('play', function(e) {
     playing = true;
 });

 player.on('pause', function(e) {
     playing = false;
 });

 /**
 * Event fired when user want to fast forward
 */
 player.on('seeked', function(e) {
     if (e.seconds > simulationTime) {
         player.setCurrentTime(simulationTime).then(function(seconds) {
         }).catch(function(error) {
            switch (error.name) {
                case 'RangeError':
                    // The time is less than 0 or greater than the video's duration
                    break;
                default:
                    // Some other error occurred
                    break;
            }
         });
     }
     else {
         simulationTime = data.seconds;
     }
 });

 /**
 * Keep time going
 */
 window.setInterval(function() {
     if (playing) {
         simulationTime++;
     }
 }, 1000);

Cheers!

Upvotes: 4

Antu R.
Antu R.

Reputation: 279

We can control all things in iframe see EX.

title=0   for title hide
sidedock=0  for social icon hide
controls=0 . for button hide

<iframe class="iframe" src="//player.vimeo.com/video/191777290?title=0&byline=0&portrait=0&sidedock=0" width="100%" height="430" frameborder="0" webkitallowfullscreen   mozallowfullscreen allowfullscreen>

Upvotes: 24

Dan
Dan

Reputation: 9468

  1. Make sure you are logged into Vimeo.

  2. Go to the video settings page: https://vimeo.com/{enter_video_id}/settings/embed

  3. Uncheck Show Play Bar under Player Preferences

enter image description here

Edit: You must have a Plus or Pro account to use these features.

Upvotes: 30

Related Questions