1 | # Controls
|
2 |
|
3 | This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option:
|
4 |
|
5 | - `Array` of options (this builds the default controls based on your choices)
|
6 | - `Element` with the controls
|
7 | - `String` containing the desired HTML
|
8 | - `false` (or empty string or array) to disable all controls
|
9 | - `Function` that will be executed and should return one of the above
|
10 |
|
11 | ## Using default controls
|
12 |
|
13 | If you want to use the standard controls as they are, you don't need to pass any options. If you want to turn on off controls, here's the full list:
|
14 |
|
15 | ```javascript
|
16 | controls: [
|
17 | 'play-large', // The large play button in the center
|
18 | 'restart', // Restart playback
|
19 | 'rewind', // Rewind by the seek time (default 10 seconds)
|
20 | 'play', // Play/pause playback
|
21 | 'fast-forward', // Fast forward by the seek time (default 10 seconds)
|
22 | 'progress', // The progress bar and scrubber for playback and buffering
|
23 | 'current-time', // The current time of playback
|
24 | 'duration', // The full duration of the media
|
25 | 'mute', // Toggle mute
|
26 | 'volume', // Volume control
|
27 | 'captions', // Toggle captions
|
28 | 'settings', // Settings menu
|
29 | 'pip', // Picture-in-picture (currently Safari only)
|
30 | 'airplay', // Airplay (currently Safari only)
|
31 | 'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
|
32 | 'fullscreen', // Toggle fullscreen
|
33 | ];
|
34 | ```
|
35 |
|
36 | ### Internationalization using default controls
|
37 |
|
38 | You can provide an `i18n` object as one of your options when initializing the plugin which we be used when rendering the controls.
|
39 |
|
40 | #### Example
|
41 |
|
42 | ```javascript
|
43 | i18n: {
|
44 | restart: 'Restart',
|
45 | rewind: 'Rewind {seektime} secs',
|
46 | play: 'Play',
|
47 | pause: 'Pause',
|
48 | fastForward: 'Forward {seektime} secs',
|
49 | seek: 'Seek',
|
50 | played: 'Played',
|
51 | buffered: 'Buffered',
|
52 | currentTime: 'Current time',
|
53 | duration: 'Duration',
|
54 | volume: 'Volume',
|
55 | mute: 'Mute',
|
56 | unmute: 'Unmute',
|
57 | enableCaptions: 'Enable captions',
|
58 | disableCaptions: 'Disable captions',
|
59 | enterFullscreen: 'Enter fullscreen',
|
60 | exitFullscreen: 'Exit fullscreen',
|
61 | frameTitle: 'Player for {title}',
|
62 | captions: 'Captions',
|
63 | settings: 'Settings',
|
64 | speed: 'Speed',
|
65 | normal: 'Normal',
|
66 | quality: 'Quality',
|
67 | loop: 'Loop',
|
68 | start: 'Start',
|
69 | end: 'End',
|
70 | all: 'All',
|
71 | reset: 'Reset',
|
72 | disabled: 'Disabled',
|
73 | advertisement: 'Ad',
|
74 | }
|
75 | ```
|
76 |
|
77 | Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs".
|
78 |
|
79 | ## Using custom HTML
|
80 |
|
81 | You can specify the HTML as a `String` or your `Function` return for the controls using the `controls` option.
|
82 |
|
83 | The classes and data attributes used in your template should match the `selectors` option if you change any.
|
84 |
|
85 | You need to add several placeholders to your HTML template that are replaced when rendering:
|
86 |
|
87 | - `{id}` - the dynamically generated ID for the player (for form controls)
|
88 | - `{seektime}` - the seek time specified in options for fast forward and rewind
|
89 | - `{title}` - the title of your media, if specified
|
90 |
|
91 | ### Limitations
|
92 |
|
93 | - Currently the settings menus are not supported with custom controls HTML
|
94 | - AirPlay and PiP buttons can be added but you will have to manage feature detection
|
95 |
|
96 | ### Example
|
97 |
|
98 | Here's an example of custom controls markup (this is just all default controls shown).
|
99 |
|
100 | ```javascript
|
101 | const controls = `
|
102 | <div class="plyr__controls">
|
103 | <button type="button" class="plyr__control" data-plyr="restart">
|
104 | <svg role="presentation"><use xlink:href="#plyr-restart"></use></svg>
|
105 | <span class="plyr__tooltip" role="tooltip">Restart</span>
|
106 | </button>
|
107 | <button type="button" class="plyr__control" data-plyr="rewind">
|
108 | <svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg>
|
109 | <span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span>
|
110 | </button>
|
111 | <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
|
112 | <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
|
113 | <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
|
114 | <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
|
115 | <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
|
116 | </button>
|
117 | <button type="button" class="plyr__control" data-plyr="fast-forward">
|
118 | <svg role="presentation"><use xlink:href="#plyr-fast-forward"></use></svg>
|
119 | <span class="plyr__tooltip" role="tooltip">Forward {seektime} secs</span>
|
120 | </button>
|
121 | <div class="plyr__progress">
|
122 | <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
|
123 | <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
|
124 | <span role="tooltip" class="plyr__tooltip">00:00</span>
|
125 | </div>
|
126 | <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
|
127 | <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
|
128 | <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute">
|
129 | <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
|
130 | <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
|
131 | <span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span>
|
132 | <span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span>
|
133 | </button>
|
134 | <div class="plyr__volume">
|
135 | <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume">
|
136 | </div>
|
137 | <button type="button" class="plyr__control" data-plyr="captions">
|
138 | <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-captions-on"></use></svg>
|
139 | <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-captions-off"></use></svg>
|
140 | <span class="label--pressed plyr__tooltip" role="tooltip">Disable captions</span>
|
141 | <span class="label--not-pressed plyr__tooltip" role="tooltip">Enable captions</span>
|
142 | </button>
|
143 | <button type="button" class="plyr__control" data-plyr="fullscreen">
|
144 | <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
|
145 | <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg>
|
146 | <span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span>
|
147 | <span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span>
|
148 | </button>
|
149 | </div>
|
150 | `;
|
151 |
|
152 | // Setup the player
|
153 | const player = new Plyr('#player', { controls });
|
154 | ```
|