The text announced when the layer got closed.
Its hylo-page-root translations object key is "videoAnnouncementClosed".
The delay of the announcement in millisecond.
An HTMLHyloAccessibilityAnnouncementElement component either as element or css query selection. If not set and hylo-page-root is present, it takes the announcement element from the hylo-page-root component.
Used to announce opened/closed status of the layer or replacement of the preview image/player. "announcementOpened", "announcementClosed", "announcementPlayer" and/or "announcementImage" needs to be set.
The text announced when the player got replaced with the preview image again.
Its hylo-page-root translations object key is "videoAnnouncementImage".
The text announced when the layer got opened.
Its hylo-page-root translations object key is "videoAnnouncementOpened".
The text announced when the player got added.
Its hylo-page-root translations object key is "videoAnnouncementPlayer".
The aria-label of the initial button.
Its hylo-page-root translations object key is "videoButton".
The aria-label of the initial button when displayed in a hylo-gallery.
Its hylo-page-root translations object key is "videoGallery".
Should the player start playing as soon the actual player is added/created.
Classes added to the button wrapped by the "agree to cookies" hylo-button.
Classes added to the button wrapped by the "disagree to cookies" hylo-button.
Label of the close button.
Its hylo-page-root translations object key is "videoButtonLabelClose".
The tabindex of the initial button.
Text of the "agree to cookies".
Its hylo-page-root translations object key is "videoButtonTextAgree".
Text of the "disagree to cookies".
Its hylo-page-root translations object key is "videoButtonTextDisagree".
Classes added to the wrapper of the cookies buttons.
Comment, copyright etc. which is displayed as part of the initial button.
An alternative comment used when the player is displayed in a layer or gallery view. If not set, the original comment is used.
Show player controls.
Default for youtube and vimeo is "true", for HTML5 player it is "false".
The cookie name to check for whether the user gave permission to set third party media cookies. The cookie's value has to be "1" to be considered set.
If not set, the component saves its own permissions (distinct by youtube, vimeo, embed) in the session storage.
The cookies layer only appears if content for the cookies layer was provided.
Displays the cookies layer even if the user has agreed before already.
The cookies layer only appears if content for the cookies layer was provided.
Does not distinguish between youtube, vimeo and embed videos when it comes to the cookies layer. If the user agreed to one, the user agreed to all.
The cookies layer only appears if content for the cookies layer was provided.
Classes added to the cookies layer.
The component replaces unicode characters (\uxxxx) with html special characters in the comment automatically. This switch disables it.
Embed code of a video.
No other source should be provided.
Sizes and centers the video to cover the complete area of the hylo-video component.
If set as boolean it tries to figure out the dimensions on its own. Alternatively you can provide a string in the form "16:9". It is basicly "width:height" where "width" and "height" don't need to be the exact width and height, only the proportion has to be correct.
Only used in combination with "src" or HTMLSourceElement and does not work with a layer.
Creates a preview image which spans over the whole content in which the image is placed in.
Creates a preview image with the dimensions of the screen.
Creates an preview image which spans over the whole content width in which the image is placed in.
Classes added to the "agree to cookies" hylo-button.
Classes added to the "disagree to cookies" hylo-button.
Hides the "disagree to cookies" button.
Add a data-info-id attribute to the player button.
This can be used to hide it when showing comments via hylo-responsive-image
Classes added to the hylo-player layer.
Start with the player already shown, not the preview image.
Has no effect if the property "layer" is set. Should not be used when the player is part of a hylo-gallery.
If set, the preview image is loaded instantly and lazy loading is not used.
Should the player open in a layer or placed inside this component after the user clicked on it.
Label of the player layer.
Its hylo-page-root translations object key is "videoLayerLabel".
Label of the end marker of the player layer.
Its hylo-page-root translations object key is "videoLayerLabelEnd".
Label of the start marker of the player layer.
Its hylo-page-root translations object key is "videoLayerLabelStart".
Tries to determine what kind of source got provided.
Loop the playback.
Is the playback muted.
If HTML5 player and value is not set and autoplay is set, it defaults to "true" otherwise to "false".
Label of the actual HTML5 player. The "comment" is added to it.
Its hylo-page-root translations object key is "videoPlayerLabel".
On mobile devices the video plays where it got put in the markup. Otherwise it opens fullscreen outside the markup on mobile devices.
Only used in combination with "src" or HTMLSourceElement.
URI of a preview image for the HTML5 player.
Only used in combination with "src" or HTMLSourceElement.
The preview image is provided by a nested hylo-responsive-image component.
The hylo-video component is not creating a hylo-responsive-image component on its own but is looking for one in its child components.
All preview image related properties have no meaning.
On default, the component is not showing a hylo-accessibility-focus border when it gains focus by click, only when tabbed into it. This property disables the default.
The path to the video file. Creates a HTML5 player element.
To provide multiple source files, separate the paths by a space character or provide HTMLSourceElements as children.
Overwrites provided HTMLSourceElements when defined.
The type of the "src".
To provide multiple types for multiple source paths, separate the types by a space character. If fewer types than source paths are defined, the last defined type will become the default type for the remaining source paths.
A url to a vimeo video. The link has to look like e.g. https://vimeo.com/77111226
No other source should be provided.
A url to a youtube video.
No other source should be provided.
Fired when either the preview image got replaced with the player or the player got created in a layer.
Fired when the player got replaced with the preview image again or the player layer got closed.
Generated using TypeDoc
A video player component.
Creates a hylo-responsive-image inside the component as preview image. After click on the component (initial button) the player is either replacing the preview image or is opening in a layer.
Define the preview image by placing hylo-image components inside this component. Is the component supposed to be part of a hylo-gallery, mark at least one hylo-image with "gallery". If the component is part of a gallery, a mouse click on the component will open the gallery and a keyboard activation (click) will trigger the original action (replacing/layer).
You can add "track" elements beside the hylo-image components to provide subtitles or captions and "source" elements to provide video source files.
Use the slot "controls" to add a custom controls component.
Uses a hylo-accessibility-focus component to show the focus of the initial button.
Slots:
TODO: Cookie layer in combination of the video in layer mode.