videojs 添加自定义菜单_videojs自定义控制栏_Higour的博客

ss 本文主要实现功能在 videojs 的控制栏（controlBar）添加一个自定义的放大功能

1、主要是使用到三个class MenuButton、Menu、MenuItem

const MenuButton = videojs.getComponent('MenuButton')
const Menu = videojs.getComponent('Menu')
const MenuItem = videojs.getComponent('MenuItem')

      const items = ['100%', '80%', '50%', 'auto']
      const myMenu = new Menu(this.player)
      const myMenuItemList = []
      for (let i = 0; i < items.length; i++) {
        myMenuItemList.push(new MenuItem(this.player, { label: items[i] }))
        myMenuItemList[i].on('click', $event => {
          this.setShowPercent($event)
        myMenu.addItem(myMenuItemList[i])
 3、添加到videojs 
      this.player.myMenu = myMenu
      this.player.myMenuItemList = myMenuItemList
      const myMenuButton = new MenuButton(this.player)
      myMenuButton.addChild(myMenu)
      myMenuButton.controlText('显示比例')
      myMenuButton.addClass('my-menu-button')
      this.player.myMenuButton = myMenuButton
      this.player.controlBar.addChild(myMenuButton, {})
      this.play()
      // 监听传入的视频的分辨率
      const self = this
      const video = document.querySelector('video')
      video.addEventListener('canplay', function () {
        self.setShowPercent(null, this.videoWidth)
 4、其他方法 
setShowPercent ($event, videoWidth) {
   const percent = $event ? $event.target.innerText : videoWidth < 1080 ? '80%' : 'auto'
   this.showPercent.width = percent
   this.player.myMenuButton
.el().attributes[0].ownerElement.children[0].children[0].innerHTML = percent
   this.player.myMenuItemList.forEach(e => {
      e.toggleClass('vjs-selected', e.options_.label === percent)
play () {
    this.player.src({ src: this.$getFilePreviewUrl(this.fileId), type: this.mimeType })
参考网站： 
 Home | Video.js Documentation 
                    ss 本文主要实现功能在videojs 的 控制栏（controlBar）添加一个自定义的放大功能1、 主要是使用到三个class MenuButton、Menu、MenuItemconst MenuButton = videojs.getComponent('MenuButton')const Menu = videojs.getComponent('Menu')const MenuItem = videojs.getComponent('MenuItem')2、.
 import videojs from 'video.js' ;
import 'videojs-errors' ;
 安装样式将取决于您的构建工具。 一个包含带有早午餐的样式的示例。 请参阅包括模块的样式部分。
 通过脚本标签导入
当您在页面中包含videojs.errors.js时，该插件会自动注册自己：
 < script src =" videojs.errors.js " > </ script >
 您可能也想包括默认样式表。 它将错误消息显示为视频元素本身顶部的半透明覆盖层。 它旨在与默认Video.js样
				目录引言实现Control-Bar中的组件编写play-next类编写auto-play-next类修改css样式在control-bar中配置自定义组件应用自定义control-bar组件结语
上一篇文章:为videojs添加自定义组件  已经介绍了在开源网页视频播放器videojs中添加简单的titleBar组件.
在实际使用中,我们可以发现,在大部分视频网站,都有点击播放下一集和自动连续播放两个选项.这篇文章将通过这两个功能的开发,介绍如何开发control-bar中的组件.
实现Control
				最近弄视频直播，网上没有全面的中文文档，只好自己整理了一份详细的api。Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。
点此下载videojs.6.0.0
引入video.js和video-js.css，使用video标签就像下面这样：
&amp;lt;video id=&quot;e...
原始版的库：github/videojs
vue 封装过的组件：npm/vue-video-player
这是一个非常棒的播放器，还兼容 hls 的直播流（m3u8）格式的等，还支持自定义组件，基本上满足播放器的很多功能了。
如果想了解直播的可以看下以前的文章 vue 项目进行直播视频 vue-video-player
后面更多会说自定义组件
说一说我的遇到的坑：
本来用播放器播放直播流 OK 了，可是 UI 和我说，播放器在回放的时候，希望像普