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

})

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

最近项目中接入 video.js 框架，在安卓机上 全屏 时， 有声音无画面 。

通过调试，发现在全屏后，video标签 width &height 均为0，

经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。

果断放弃video自带的全屏方案。

通过修改video标签旋转，按宽高比放大视频至设备屏幕宽高

此时可以实现全屏效果。

但是问题又出现了，手机的20px的 状态条 仍旧在 =_=#

可以结合cordova插件 cordova-plugin-statusbar 插件实现。

【插件地址 传送门】

至此，曲线救国，问题修复。

首先需要安装一个插件（video.js）

安装命令：npm install vue-video-player --save

plugins文件夹下新建一个video-player.js文件

在这里插入图片描述

video-player.js里添加以下内容：

import Vue from ‘vue’

const VueVideoPlayer = require(‘vue-video-player/dist/ssr’)

Vue.use(VueVideoPlayer)

修改配置文件nuxt.config.js

css下添加：

{ src: ‘video.js/dist/video-js.css’ }

在这里插入图片描述

plugins下添加：

{ src: ‘@/plugins/video-player’, ssr: f在这里插入图片描述

alse }

---