patricktran/shaka-player-ui-controls

The missing UI controls package for Shaka Player! Vertical volume slider, rewind, and fast forward controls.

shaka-player-ui-controls

The missing UI controls package for Google Shaka Player!
Vertical volume slider, rewind, and fast forward controls.

Install

npm install --save shaka-player-ui-controls

⚠️ Also install Shaka Player - Shaka Player Documentation

UI Controls Included

• Vertical Volume Slider

• Rewind:

  • 5 Seconds
  • 10 Seconds
  • 30 Seconds

• Fast Forward:

  • 5 Seconds
  • 10 Seconds
  • 30 Seconds

Demo

Click here to see a demo on codesandbox.

Usage

//step 1) import packages/css

import {
  Player as ShakaPlayer,
  ui as ShakaUI,
} from "shaka-player/dist/shaka-player.ui";

import "shaka-player/dist/controls.css";

import {
  ForwardFiveButton,
  ForwardTenButton,
  ForwardThirtyButton,
  RewindFiveButton,
  RewindTenButton,
  RewindThirtyButton,
  VerticalVolume,
} from "shaka-player-ui-controls";

import "shaka-player-ui-controls/dist/main.css";

//step 2) register control elements to ShakaUI

//vertical volume control
ShakaUI.Controls.registerElement(
  "vertical_volume",
  new VerticalVolume.Factory()
);

//rewind controls
ShakaUI.Controls.registerElement("rewind_5", new RewindFiveButton.Factory());
ShakaUI.Controls.registerElement("rewind_10", new RewindTenButton.Factory());
ShakaUI.Controls.registerElement("rewind_30", new RewindThirtyButton.Factory());

//fast forward controls
ShakaUI.Controls.registerElement("forward_5", new ForwardFiveButton.Factory());
ShakaUI.Controls.registerElement("forward_10", new ForwardTenButton.Factory());
ShakaUI.Controls.registerElement(
  "forward_30",
  new ForwardThirtyButton.Factory()
);

//step 3) create your custom ui config
//https://shaka-player-demo.appspot.com/docs/api/tutorial-ui-customization.html

const uiConfig = {
  controlPanelElements: [
    "rewind_30",
    "rewind_10",
    "rewind_5",
    "play_pause",
    "forward_5",
    "forward_10",
    "forward_30",
    "vertical_volume",
  ],
};

...

//step 4) pass in your custom ui config to shaka player

//getting reference to video and video container on DOM
const video = document.getElementById('video');
const videoContainer = document.getElementById('video-container');

//initialize shaka player
var player = new ShakaPlayer(video);

//setting up shaka player UI overlay
const ui = new ShakaUI.Overlay(player, videoContainer, video);

//pass in custom uiConfig
ui.configure(uiConfig);

License

MIT © patricktran

shaka-player-ui-controls's Issues

The tooltip buttons are not shown

Can we add them?

Here is a sample on how to add them:

https://github.com/shaka-project/shaka-player/pull/3572/files

Basically:

 this.button.classList.add('shaka-tooltip-status');
 this.button.setAttribute('shaka-status', "Text of tooltip");