|
2 | 2 |
|
3 | 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 | 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 |
| 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 | 10 |
|
11 | 11 | ## Using default controls
|
12 | 12 |
|
13 | 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 | 14 |
|
15 | 15 | ```javascript
|
16 | 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 |
| 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 | 33 | ];
|
34 | 34 | ```
|
35 | 35 |
|
36 | 36 | ### Internationalization using default controls
|
37 | 37 |
|
38 |
| -You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. |
| 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 | 39 |
|
40 | 40 | #### Example
|
41 | 41 |
|
@@ -84,14 +84,14 @@ The classes and data attributes used in your template should match the `selector
|
84 | 84 |
|
85 | 85 | You need to add several placeholders to your HTML template that are replaced when rendering:
|
86 | 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 |
| 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 | 90 |
|
91 | 91 | ### Limitations
|
92 | 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 |
| 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 | 95 |
|
96 | 96 | ### Example
|
97 | 97 |
|
|
0 commit comments