Hapi-Video HTMLElement
An easy way to integrate video on your page from various providers
- Native (webm, hls, mp4)
- Youtube
- Viméo
Settings
Various settings can be set through DOM attributes
controls
Display a control bar (play/pause, progress bar and volume control) on hover
This attribute value can be set to "btn" to display only 2 big button play/pause and mute/umnute over the video
cover
Enable background cover mode for the video
autoplay
Play the video when ready
muted
Mute the sound at startup (allways on in autoplay mode)
loop
If set, the play will play an infinite video loop
You can set this attribute with a start:stop tag to play only a part of the video. Eg: 10:30 will play the 20s part starting at 10s and endind at 30s
provider
Define the provider for the play [native|youtube|vimeo]
embed-id
Media reference for the provider (native provider espect a video file path/url)
embed-ratio
Youtube do not allow us to retrieve the real video aspect ratio so you can indicate the video aspect ratio manualy using this attribute. In cover mode, the player use this information to adjust the video overlay.
The default aspect ratio value is 16:9
Integration samples
<hapi-video controls="btn" cover muted autoplay loop="8:13" provider="native" embed-id="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></hapi-video><hapi-video controls cover muted autoplay loop="8:13" provider="vimeo" embed-id="175424978"></hapi-video><hapi-video controls cover muted autoplay loop="8:13" provider="youtube" embed-id="y3sILyOYEpg" embed-ratio="16:9"></hapi-video>