// 安裝video.js插件
npm install video.js -S 

// 如果需要播放rtmp直播流，需安裝一下插件
npm install videojs-flash -S

<template>
    <div data-vjs-player>
      <video ref="videoNode" class="video-js vjs-default-skin">
        抱歉，您的瀏覽器不支持
      </video>
    </div>
</template>

import videojs from "video.js";
//播放器中文，不能使用.js文件
import videozhCN from "video.js/dist/lang/zh-CN.json";
//樣式文件注意要加上
import "video.js/dist/video-js.css"; 
//如果要播放RTMP要使用flash 需要先npm i videojs-flash
import "videojs-flash";
export default {
    data() {
        return {
          player: null,
          controls: true
        };
    },
    //初始化播放器
    mounted(){
        let options = {
            autoplay: true, // 自動(dòng)播放
            language: "zh-CN",
            controls: this.controls, // 控制條
            preload: "auto", // 自動(dòng)加載
            errorDisplay: true, // 錯(cuò)誤展示
            // fluid: true, // 跟隨外層容器變化大小，跟隨的是外層寬度
            width: "500px",
            height: "500px",
            // controlBar: false,  // 設(shè)為false不渲染控制條DOM元素，只設(shè)置controls為false雖然不展示，但是存在
            // textTrackDisplay: false,  // 不渲染字幕相關(guān)DOM
            userActions: {
              hotkeys: true // 是否支持熱鍵
            },
            notSupportedMessage: "此視頻暫無(wú)法播放，請(qǐng)稍后再試",
            techOrder: ["h5","flash"], // 定義Video.js技術(shù)首選的順序
            sources: [
              {
                src: './video/xxx.mp4', // 視頻或者直播地址
                type: 'video/mp4',
                //type: 'rtmp/flv',
              }
            ]
        };
        this.player = videojs(
            this.$refs.videoNode,
            options,
            function onPlayerReady() {
              videojs.log(`Your player is ready!`);
            }
        );
        videojs.addLanguage("zh-CN", videozhCN);
    },
    beforeDestroy() {
        if (this.player) {
          this.player.dispose();
        }
    }
}

<video ref="videoNode" class="video-js vjs-default-skin vjs-big-play-centered"></video>

npm i videojs-markers -S

// 引入videojs-markers
import "videojs-markers";

//引入樣式
import "videojs-markers/dist/videojs.markers.css";

this.player.markers({
  markerStyle: {
    // 標(biāo)記點(diǎn)樣式
    width: "0.7em",
    height: "0.7em",
    bottom: "-0.20em",
    "border-radius": "50%",
    "background-color": "orange",
    position: "absolute"
  },
  //鼠標(biāo)移入標(biāo)記點(diǎn)的提示
  markerTip: {
    display: true, // 是否顯示
    /*
      用于動(dòng)態(tài)構(gòu)建標(biāo)記提示文本的回調(diào)函數(shù)。
      只需返回一個(gè)字符串，參數(shù)標(biāo)記是傳遞給插件的標(biāo)記對(duì)象
     */
    text: function(marker) {
      return marker.text;
    }
  },
  markers: [
        {
          time: 20,
          text:'點(diǎn)位一',
          class: 'red'
        },
        {
          time: 40,
          text:'點(diǎn)位二',
          class: 'green'
        },
        {
          time: 130,
          text:'點(diǎn)位三',
          class: 'yellow'
        },
        {
          time: 200,
          text:'點(diǎn)位四'
        }
    ],
});

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}
  }
});

以上大致相當(dāng)于：

var player = videojs('my-player');

player.foo({bar: true});
player.boo({baz: false});

videojs('my-player', {
  sources: [{
    src: './video/video.mp4',
    type: 'video/mp4'
  }, {
    src: './video/video.webm',
    type: 'video/webm'
  }]
});

<video ...>
  <source src="./video/video.mp4" type="video/mp4">
  <source src="./video/video.webm" type="video/webm">
</video>

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.

videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!

videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false
    }
  }
});

videojs('my-player', {
  controlBar: {
    fullscreenToggle: false
  }
});

videojs('my-player', {
  flash: {
    swf: '//path/to/videojs.swf'
  }
});

videojs.options.flash.swf = ‘//path/to/videojs.swf'

var options = {};
 
var player = videojs(‘example_video_1‘, options, function onPlayerReady() {
  videojs.log(‘播放器已經(jīng)準(zhǔn)備好了!‘);
 
  // In this context, `this` is the player that was created by Video.js.<br>  
  // 注意，這個(gè)地方的上下文， `this` 指向的是Video.js的實(shí)例對(duì)像player
  this.play();
 
  // How about an event listener?<br>  // 如何使用事件監(jiān)聽(tīng)？
  this.on(‘ended‘, function() {
    videojs.log(‘播放結(jié)束了!‘);
  });
});

 var button = this.player.getChild('ControlBar').addChild('button', {
  controlText: 'My button',
  className: 'vjs-visible-text',
  clickHandler: function(event) {
    videojs.log('Clicked');
  }
});

// Get the Component base class from Video.js
var Component = videojs.getComponent('Component');

// The videojs.extend function is used to assist with inheritance. In
// an ES6 environment, `class TitleBar extends Component` would work
// identically.
var TitleBar = videojs.extend(Component, {

  // The constructor of a component receives two arguments: the
  // player it will be associated with and an object of options.
  constructor: function(player, options) {

    // It is important to invoke the superclass before anything else, 
    // to get all the features of components out of the box!
    Component.apply(this, arguments);

    // If a `text` option was passed in, update the text content of 
    // the component.
    if (options.text) {
      this.updateTextContent(options.text);
    }
  },

  // The `createEl` function of a component creates its DOM element.
  createEl: function() {
    return videojs.createEl('div', {

      // Prefixing classes of elements within a player with "vjs-" 
      // is a convention used in Video.js.
      className: 'vjs-title-bar'
    });
  },

  // This function could be called at any time to update the text 
  // contents of the component.
  updateTextContent: function(text) {

    // If no text was provided, default to "Title Unknown"
    if (typeof text !== 'string') {
      text = 'Title Unknown';
    }

    // Use Video.js utility DOM methods to manipulate the content
    // of the component's element.
    videojs.emptyEl(this.el());
    videojs.appendContent(this.el(), text);
  }
});

// Register the component with Video.js, so it can be used in players.
videojs.registerComponent('TitleBar', TitleBar);

// Create a player.
var player = videojs('my-player');

// Add the TitleBar as a child of the player and provide it some text 
// in its options.
player.addChild('TitleBar', {text: 'The Title of The Video!'});

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])
}

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.player = videojs(...)

var Button = videojs.getComponent('Button');
var button = new Button(this.player, {
    className: 'vjs-visible-text',
    controlText: '按鈕文本',
    clickHandler: function(event) {
        videojs.log('Clicked');
    }
});
       
var button = this.player.getChild('ControlBar').addChild(button)

this.player = videojs(...)

var button = this.player.getChild('ControlBar').addChild('button', {
    controlText: 'My button',
    className: 'vjs-visible-text',
    clickHandler: function(event) {
        videojs.log('Clicked');
    }
});

this.player = videojs(...)

const MenuButton = videojs.getComponent('MenuButton')

const myMenuButton = new MenuButton(this.player)
myMenuButton.addChild(myMenu)
myMenuButton.controlText('顯示比例')
myMenuButton.addClass('my-menu-button')
// 添加顯示文本的類名
myMenuButton.children()[0].addClass('vjs-visible-text')

        
this.player.myMenuButton = myMenuButton
this.player.controlBar.addChild(myMenuButton)