vime-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

HTML

<vime-player controls>

<vime-hls version="latest" poster="/media/poster.png">

<source data-src="/media/index.m3u8" type="application/x-mpegURL" />

</vime-hls>

<!-- ... -->

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeHls } from '@vime/react';

function Example() {

/**

* @see https://hls-js.netlify.app/api-docs/file/src/config.ts.html.

*/

const hlsConfig = {

// ...

};

return (

<VimePlayer controls>

<VimeHls version="latest" config={hlsConfig} poster="/media/poster.png">

<source data-src="/media/index.m3u8" type="application/x-mpegURL" />

</VimeHls>

{/* ... */}

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer controls>

<VimeHls :config="hlsConfig" version="latest" poster="/media/poster.png">

<source data-src="/media/index.m3u8" type="application/x-mpegURL" />

</VimeHls>

<!-- ... -->

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeHls } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeHls,

},

data: {

/**

* @see https://hls-js.netlify.app/api-docs/file/src/config.ts.html.

*/

hlsConfig: {

// ...

},

},

};

</script>

Svelte

example.svelte

<VimePlayer controls>

<VimeHls version="latest" config="{hlsConfig}" poster="/media/poster.png">

<source data-src="/media/index.m3u8" type="application/x-mpegURL" />

</VimeHls>

<!-- ... -->

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeHls } from '@vime/svelte';

/**

* @see https://hls-js.netlify.app/api-docs/file/src/config.ts.html.

*/

const hlsConfig = {

// ...

};

</script>

Stencil

class Example {

render() {

return (

<vime-player controls>

<vime-hls version="latest" poster="/media/poster.png">

<source data-src="/media/index.m3u8" type="application/x-mpegURL" />

</vime-hls>

{/* ... */}

</vime-player>

);

}

}

Angular

example.html

<vime-player controls>

<vime-hls version="latest" [config]="hlsConfig" poster="/media/poster.png">

<source data-src="/media/index.m3u8" type="application/x-mpegURL" />

</vime-hls>

<!-- ... -->

</vime-player>

example.ts

class Example {

/**

* @see https://hls-js.netlify.app/api-docs/file/src/config.ts.html.

*/

hlsConfig = {

// ...

};

}

Properties

Property	Attribute	Description	Type	Default
autoPiP	auto-pip	EXPERIMENTAL: 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 ∣ undefined	undefined
config	config	The hls.js configuration.	any	undefined
controlsList	controls-list	Determines 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 ∣ undefined	undefined
crossOrigin	cross-origin	Whether to use CORS to fetch the related image. See MDN for more information.	"" ∣ "anonymous" ∣ "use-credentials" ∣ undefined	undefined
disablePiP	disable-pip	EXPERIMENTAL: Prevents the browser from suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases.	boolean ∣ undefined	undefined
disableRemotePlayback	disable-remote-playback	EXPERIMENTAL: 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 ∣ undefined	undefined
mediaTitle	media-title	The title of the current media.	string ∣ undefined	undefined
poster	poster	A 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 ∣ undefined	undefined
preload	preload	Provides 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'
version	version	The NPM package version of the hls.js library to download and use if HLS is not natively supported.	string	'latest'

Slots

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

Dependencies

Used by

• vime-playground

Depends on

• vime-video

Graph

graph TD;

vime-hls --> vime-video

vime-video --> vime-file

vime-playground --> vime-hls

style vime-hls fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS