Not Particularly Meaningful

    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.

    Install

    npm i videojs-extra-buttons

    DownloadsWeekly Downloads

    169

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    218 kB

    Total Files

    20

    Last publish

    Collaborators

    • keijack