控制 video 标签的控制栏组件

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

 <video

              style="width:500pxheight:100%"

              controls="controls"

              autoplay

              poster="视频未加载时封面图片"

              id="video"

   ></video>

//全屏按钮

video::-webkit-media-controls-fullscreen-button{

display: none

    }

    //播放按钮

video::-webkit-media-controls-play-button{

display: none

    }

    //进度条

video::-webkit-media-controls-timeline{

display: none

    }

    //观看的当前时间

video::-webkit-media-controls-current-time-display{

display: none

    }

    //剩余时间

video::-webkit-media-controls-time-remaining-display{

display: none

    }

    //音量按钮

video::-webkit-media-controls-mute-button{

display: none

    }

video::-webkit-media-controls-toggle-closed-captions-button{

display: none

    }

    //音量的控制条

video::-webkit-media-controls-volume-slider{

display: none

    }

    //所有控件

video::-webkit-media-controls-enclosure{

display: none

    }

这是实现之后的效果

源码：

//自定义控制条

var player = videojs(videoId,

{

"controls": true,

"autoplay": false,

"preload": "auto",

"loop": false,

controlBar:

{

captionsButton: false,

chaptersButton: false,

playbackRateMenuButton: true,

LiveDisplay: true,

subtitlesButton: false,

remainingTimeDisplay: true,

progressControl: true,

volumeMenuButton:

{

inline: false,

vertical: true

},

//竖着的音量条

fullscreenToggle: true

}

}, function () {

var newbtn = document.createElement('btn')

newbtn.innerHTML = '<button class="vjs-control" id="downloadButton"><i class="fa fa-expand" title="全屏"></i></button>' + '<button class="vjs-control" id="full_screen_button"><i class="fa fa-chrome" title="截图"></i></button>'

var controlBar = document.getElementsByClassName('vjs-control-bar')[0]

insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0]

controlBar.insertBefore(newbtn,insertBeforeNode)

player.src({ type : "rtmp/flv", src : r.roomLiveUri})

player.play()

})

里面用到了一些前端框架的样式，所以按钮图标你需要自己去找，参考的是这位大佬的博客：网页链接

---