To hide the ability to fast forward and rewind a video, you need to edit the Custom CSS section.
First thing you’d do is select your skin and style as normal, adjust the colors and so forth. Once you are done with that, open up the Custom CSS section.
Add the following line into the text area.
.video-js .vjs-progress-control {display:none;}So it looks something like the following:
Some styles have values in there already. If that is the case, add the code at the end.
You should see a player that looks something like this without the ability to fast forward or rewind.
Couple this with the URL redirect at the end of the video will allow you to confirm when a logged in user has actually finished watching a video.
Other control bar options that are possible include
- .video-js .vjs-current-time-display – this displays the current time on the timeline
- .video-js .vjs-duration-display – this displays the duration left of the video
- .video-js .vjs-fullscreen-control – this displays the full screen button
- .video-js .vjs-progress-control – this displays the timeline
- .video-js .vjs-time-divider – this displays the time divider
- .video-js .vjs-volume-menu-button – this displays the volume control
If you hide all of the above, all you will see is the play/pause button – these are the minimum controls required for mobile if you want the ability for users to pause the video on mobile devices.
Any questions, let me know in the comments below.
Comments