<link href="//path/to/video-js.css" rel="stylesheet">
<link href="//path/to/videojs-extra-buttons.css" rel="stylesheet">
<script src="//path/to/video.js"></script>
<script src="//path/to/videojs-contrib-quality-levels.min.js"></script>
<script src="//path/to/videojs-extra-buttons.js"></script>
 
<script>
  var player = window.player = videojs('videojs-extra-buttons-player');
      player.extraButtons({
        quickBackward: { seconds: 3 },
        quickForward: { seconds: 3 },
        qualitySelect: [
          { bandwidth: 524288, name: "Low" },
          { bandwidth: 1048576, name: "Mid" },
          { bandwidth: 2097152, name: "Hight" },
          { bandwidth: 4194304, name: "Hight+" }
        ], // only works when source is hls(m3u8)
        playbackRateSelect: [0.5, 1, 2, 4, 8]
      });
 
</script> 

<template>
  <video ref="videojs-extra-buttons-player" controls class="video-js vjs-default-skin">
    <source src="statics/videos/oceans/master.m3u8" type="application/x-mpegURL">
  </video>
</template>
<script>
import "video.js/dist/video-js.css";
import "videojs-extra-buttons/dist/videojs-extra-buttons.css";
import videojs from "video.js";
import "videojs-contrib-quality-levels";
import "videojs-extra-buttons";
 
export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const player = videojs(this.$refs["videojs-extra-buttons-player"]);
 
      player.extraButtons({
        quickBackward: { seconds: 3 },
        quickForward: { seconds: 3 },
        qualitySelect: [
          { bandwidth: 524288, name: "Low" },
          { bandwidth: 1048576, name: "Mid" },
          { bandwidth: 2097152, name: "Hight" },
          { bandwidth: 4194304, name: "Hight+" }
        ], // only works when source is hls(m3u8)
        playbackRateSelect: [0.5, 1, 2, 4, 8]
      });
      window.player = player;
    }
  }
};
</script> 
<style scoped>
video {
  height: 400px;
  width: 750px;
}
</style>