Media player elements are used to embed video or audio clips in a document.
To insert a media player element, use Basic Elements > Media Player, and set its <Source> or <YouTube> according to need. To learn more about adding media elements, see adding media.
Like any other element, the media player can be completely customized after it’s added to the document, with <Style> and <Controls> offering several additional options for customization. To remove a sub-element of the media player, simply select and remove it using Design > Remove, or the Delete key. Any of these sub-elements can be readded, using the Media Player tab.
|
Source |
||
| Source | Media | Video or audio file to use as the source for the media player. |
| YouTube | YouTube | A YouTube video to display in the player. |
| Poster | Media | Image file to display as the poster for the media player, before the video is played. |
| WebVTT Captions | Media | Captions or subtitles in WebVTT format to display along with the video. When assigned, an additional button is added to the player to allow showing/hiding the captions by the viewer. Only applicable to media players with a video source. |
|
Media |
||
| Auto Start | Checkbox | When on, automatically starts playing the media when entering the page. |
| Volume | Number | Determines the default volume of the player, with 100 being full volume, and 0 being muted. |
| Mute | Checkbox | When on, the media player starts as muted. |
| Window Mode | Select | windowed – Video is opaque and overlays all contents in the document. opaque – Video is opaque, but can be overlaid by other elements in the document. transparent – Video can contain alpha transparency, and can be overlaid by other elements in the document. Transparency only works with certain video types. |
|
Player |
||
| Style | Select | plain – Player has a plain appearance. styled – Player’s appearance is defined by the document’s style. |
| Controls | Select | Provides several preset layouts for the player. |
| Visibility | Select | inherit – Media player inherits its visibility from its parent element. visible – Media player is visible. hidden – Media player is invisible. |
| Allow Seek | Checkbox | When off, seeking in the player is not allowed and the media will be played from start to finish. |
| Context Menu | Checkbox | When on, right-clicking on the media player shows the media player context menu. |
|
Navigation |
||
| Lock Next Navigation | Checkbox | When on, prevents from navigating to the next page before the media finished playing. |
The play button element has additional properties, allowing for further customization.
|
Style Rules |
||
| Mouse Over Style | Style Rule | Used when the mouse is over the play button. |
| Pause Style | Style Rule | Used when the player is currently playing, and the button behaves as a pause button. Selecting a rule replaces the default appearance of the pause button. |
| Pause Over Style | Style Rule | Used when the mouse is over the pause button. Selecting a rule replaces the default appearance of the pause button when the mouse is over it. |
| Buffering Style | Style Rule | Used when the player’s source file is buffering. Selecting a rule replaces the default buffering appearance. |
The play overlay element has additional properties, allowing for further customization. Note that in order to select the Play Overlay element, the Media Player element must be unlocked.
|
Style Rules |
||
| Mouse Over Style | Style Rule | Used when the mouse is over the play overlay. |
The mute element has additional properties, allowing for further customization.
|
Style Rules |
||
| Muted Style | Style Rule | Used when the player is muted. Selecting a rule replaces the default muted appearance of the mute button. |