Videojs add only play control

html html5-video video.js
Ramesh Paul picture Ramesh Paul · Nov 23, 2012 · Viewed 22k times · Source

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

Derek picture Derek · Jun 28, 2013

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.

Related questions

HTML5 video element request stay pending forever (on chrome)

I have a weird issue in Chrome. Each time I load a <video> element, chrome will start two HTTP request. The first one will stay pending forever (I guess this is the "meta-data", "partial content" request. But the …

Read More
Initialize a Video.js player on a ajax loaded part of the page

The video player actually loads fine. My actual problem is when I refresh some parts of my page with AJAX and those parts contains a video player, the HTML5 player loads fine, but not the Video.js part that customizes …

Read More
How do I add new Video entirely from JavaScript?

I am trying to add a new VideoJS object and set it up entirely from JS, without having a DOM video element. The result is that the video is loaded but there aren't any VideoJS controls. Here is the code: …

Read More