To use the custom skins, you must write the customization similar to default-video-controls.css and refer to this new customization in the player.
For example, you can use one of the following options:
<link rel="stylesheet" href="css/common_style.css">
<link rel="stylesheet" href="css/custom-video-controls1.css">
You can make the following types of changes:
Foreground color of buttons and text
All the controls which have a foreground are using the vid-skin-fgcolor
class. To change the foreground of all the controls, iterate through all the elements with the vid-skin-fgcolor
class and specify the desired color.
Background color of buttons and text
All the controls that have a foreground are using the vid-skin-bgcolor
class. To change the foreground of all the controls, iterate through all the elements with vid-skin-bgcolor
class and specify the desired color.
Shape of play head
The play head can be square or round. To change the play head, add square
or round
class to playhead
element.
Style of the buffering spinners
The reference player provides the following styles of spinners can be displayed as the player buffers content:
Overlay-text ( overlay-text
)
Rectangular Spinner ( spinner
)
Signal ( signal
)
Vertical Bars ( vertical
)
To use any of the buffering spinners, you must add the class in the buffering-overlay element. For example, to use overlay-text
, add the following lines in the BufferOverlay.js
file:
var overlay = document.getElementById("buffering-overlay");
overlay.classList.add ("spinner");