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 textAll 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 textAll 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 headThe play head can be square or round. To change the play head, add square or round class to playhead element.
- Style of the buffering spinnersThe 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");