Videojs add only play control

Question

I am using Video.js to play videos in my web page. I want to customize player controls to only play button.

my code is

<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 any one guide me in player customization?

Answer 1

The way I was able to do it was by setting the css class for specific controls to display: none; in my page's CSS. My page's CSS gets linked AFTER the video-js.css 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 page's CSS after the video-js.css gets linked, you can use display: none !important; instead and that should do the trick. Although, I'd only use !important as a last resort.

Note: The above does not remove the pause button once play is hit nor the big play button. There are more UI considerations when removing those. Hopefully this will help some people with customizing the Video.js control bar.