README

videojs-extra-buttons

Functions

This module give your videojs player extra buttons, include:

A quick backward button.
A quick forward button.
A playback rate select menu.
A quality select menu, when using HLS(m3u8).

Usage

To include videojs-extra-buttons on your website or web application, use any of the following methods.

`<script>` Tag

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

Vue

First, install it into you app:

npm install video-extra-buttons

The demo code should like:

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

License

MIT.

Usage no npm install needed!