videojs如何在控制栏上增加一个按钮

这是实现之后的效果

源码：

//自定义控制条

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()

})

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

1、首先需要新建一个html文件，命名为test.html，用于介绍如何使用JS控制video视频的src。

2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。

3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。

4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。

5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。

6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。

7、在浏览器打开test.html文件，测试js控制视频播放的效果无误。