Adding custom controls

[julianklotz]

Dear community,

I’m currently trying to customize the controls of Plyr. We’d like to have controls for showing video copyrights and to toggle a sidebar that shows additional info while the video is playing.

It’s possible to bring your own HTML (in fact, we’ve been doing this for a while: https://github.com/sampotts/plyr/blob/master/CONTROLS.md), but when adding captions, I found creating the custom HTML do be quite tedious.

My idea is to pass a custom controls function as part of the options. Inside this function, call controls.create() which is used internally to build the user interface.

EDIT: I just tried a few solutions and the issue is that the controls (and captions) module isn’t exported in the dist package. Any ideas?

--

// import controls module as plyrControls
// import captions module as plyrCaptions

const options = {
    // ...
    controls: ({id, seekTime, title}) => {
        // `this` is bound to Plyr context
        const controls = plyrControls.create.call(this, {
            id: this.id,
            seektime: this.config.seekTime,
            speed: this.speed,
            quality: this.quality,
            captions: plyrCaptions.getLabel.call(this),
      })
      // Modify here
      return  controls
    }
}