Version: 5.x

vm-hls

Enables loading, playing and controlling HLS based media. If the browser does not support HLS then the hls.js library is downloaded and used as a fallback to play the stream.

You don't interact with this component for passing player properties, controlling playback, listening to player events and so on, that is all done through the vime-player component.

Usage#

<vm-player controls>
<vm-hls version="latest" poster="/media/poster.png">
<source data-src="/media/index.m3u8" type="application/x-mpegURL" />
</vm-hls>
<!-- ... -->
</vm-player>

Properties#

PropertyDescriptionTypeDefault
autoPiPEXPERIMENTAL: Whether the browser should automatically toggle picture-in-picture mode as the user switches back and forth between this document and another document or application.boolean ∣ undefinedundefined
configThe hls.js configuration.anyundefined
controlsListDetermines what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified).string ∣ undefinedundefined
crossOriginWhether to use CORS to fetch the related image. See MDN for more information."" ∣ "anonymous" ∣ "use-credentials" ∣ undefinedundefined
disablePiPEXPERIMENTAL: Prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases.boolean ∣ undefinedundefined
disableRemotePlaybackEXPERIMENTAL: Whether to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc).boolean ∣ undefinedundefined
libSrcThe URL where the hls.js library source can be found. If this property is used, then the version property is ignored.string ∣ undefinedundefined
mediaTitleThe title of the current media.string ∣ undefinedundefined
posterA URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.string ∣ undefinedundefined
preloadProvides a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. See MDN for more information."" ∣ "auto" ∣ "metadata" ∣ "none" ∣ undefined'metadata'
versionThe NPM package version of the hls.js library to download and use if HLS is not natively supported.string'latest'

Events#

EventDescriptionType
vmErrorEmitted when an error has occurred.CustomEvent<any>

Slots#

SlotDescription
Pass <source> elements to the underlying HTML5 media player.

Dependencies#

Depends on#