Videojs add only play control

html, html5-video, video.js

Solution

The easiest way I have found is modifying 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 remove every control ( including the duration, time remaining and seek bar ) besides the play toggle button

If you would like other things, you may pick and choose from the defaults (a few of these are set to hidden on the default skin)

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

Or dig through the controls.js file on git hub https://github.com/zencoder/video-js/blob/master/src/controls.js

Problem

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?

Original source