All geek questions in one place

Videojs only adds playback control

I use Video.js to play videos on my web page. I want to configure the player to play only buttons.

my code

 <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="320" height="240" poster="thumb.png" data-setup="{}"> <source src="v1.mp4" type='video/mp4'> </video>

Can someone help me in setting up the player?

+4
source share
5 answers

The easiest way I've found is to change the prototype for the class as such.

Insert

 <script> _V_.ControlBar.prototype.options.components = {'playToggle':{}} </script>

right after

 <script src="http://vjs.zencdn.net/c/video.js"></script>

This will delete each control (including duration, remaining time, and search bar) except the play button

If you want other things, you can select and choose by default (some of them are set to hidden on the skin by default)

 options: { components: { "playToggle": {}, "fullscreenToggle": {}, "currentTimeDisplay": {}, "timeDivider": {}, "durationDisplay": {}, "remainingTimeDisplay": {}, "progressControl": {}, "volumeControl": {}, "muteToggle": {} } }

Or copy the controls.js file to the git hub https://github.com/zencoder/video-js/blob/master/src/controls.js

+4
source

The way I was able to do this was to set the CSS class for certain display: none; controls display: none; in my CSS page. My CSS page is linked after the js.css video gets linked.

 /* Video.js Controls Style Overrides */ .vjs-default-skin .vjs-progress-control, .vjs-default-skin .vjs-time-controls, .vjs-default-skin .vjs-time-divider, .vjs-default-skin .vjs-captions-button, .vjs-default-skin .vjs-mute-control, .vjs-default-skin .vjs-volume-control, .vjs-default-skin .vjs-fullscreen-control { display: none; }

If you can’t link your CSS page after linking the video js.css, you can use display: none !important; instead, and this should do the trick. Although, I would use only important as a last resort.

Note. The above does not remove the pause button after the game hits it, or the big play button. When eliminated, there are more requirements for the user interface. Hope this helps some people with customizing the Video.js control panel.

+9
source

It seems there is also the option to hide / show control elements via data-setup

The components are listed at https://github.com/videojs/video.js/blob/stable/docs/guides/components.md
and options description https://github.com/videojs/video.js/blob/stable/docs/guides/options.md

 <video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>

controlBar is passed as follows:

 data-setup='{ "controlBar": { "muteToggle": false } }'

Edit: in the comments, the children behavior for options been simplified and changed, see also the documentation: https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options For background and timing of these changes see https://github.com/videojs/video.js/issues/953

Css selector for play button

 .vjs-default-skin .vjs-big-play-button

but when deleting the playback option, make sure that you have alternatives or the appropriate setting (;

my seems to hide the default controls (?)

+2
source

It also removes all control panels, but not a large play button

 .vjs-default-skin.vjs-has-started .vjs-control-bar { visibility: hidden; }
+1
source

If you also want to get rid of the play button, just press the video play button and stop pressing, this is an alternative solution that I adapted.

Paste in your <head> (or elsewhere if this is not possible) ...

 <script type="text/javascript"> function vidplay(me) { if (me.paused) { me.play(); } else { me.pause(); } } </script>

then call from your video for example

 <video onclick="javascript: vidplay(this)" ...>

Make sure you do not install controls in your video tag. Obviously, in this way you can play your own button with which the associated solution is associated.

+1
source

Source: https://habr.com/ru/post/1447879/

More articles:


All Articles