videojs-extra-buttons

0.1.5 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i videojs-extra-buttons

Weekly Downloads

22

Version

0.1.5

License

MIT

Unpacked Size

218 kB

Total Files

20

Last publish

Collaborators

  • keijack