muxinc / hls-video-element

A custom element (web component) for playing HTTP Live Streaming (HLS) videos.

Important

This repository moved to muxinc/media-elements/tree/main/packages/hls-video-element
Open issues at muxinc/media-elements/issues

hls-video-element's Issues

Support tracks (subtitles, thumbnails) as children of the element

Hey! We're using this library and media-chrome, I'd like to add a thumbnail track in combination with support for m3u8 files that I pull from Mux, so basically this:

https://github.com/muxinc/media-chrome/blob/4c4ef8a03aaef406d6ebfd14f8f737d7a523552b/examples/control-elements/media-clip-selector.html#L18-L24

but with the hls-video element. I've tried extending/copying the hls-video web component, but I haven't figured out how to place the track into the actual

I was hoping this would work:

<hls-video-custom slot="media" src={videoSrc}>
  <track
    slot="media"
    label="thumbnails"
    default
    kind="metadata"
    src={`https://image.mux.com/${playbackId}/storyboard.vtt`}
  ></track>
</hls-video-custom>

It looks like maybe custom-video-element should allow appending children to the native video element here: https://github.com/muxinc/custom-video-element/blob/8723e13a7622c23bb277b518afd300ddae3dbde2/index.js#L43

Maybe something like this in custom-video-element?

if (template.nativeChild) {
  nativeEl.appendChild(template.nativeChild);
}

autoplay not working

Loving the work done here!

I can't seem to get autoplay to work on my end though. Should this be added alongside control?

How to do error handling with streams that have codec problems or broken?

just want to catch error and just just a js alert is enough. Can u help?

How can i get a js object to get and error by Hls.js? I'm using vanilla js.

<hls-video
src="myurl"
slot="media"
autoplay
controls
playsinline>
</hls-video>

loadSource and attachMedia should respect a good event order

Hi,

As reading hls doc https://github.com/video-dev/hls.js/blob/master/docs/API.md#third-step-load-a-manifest,
it is recommended to 1) attachMedia then 2) listen to MEDIA_ATTACHED event and then 3) when this event is fired, we can loadSource.

hls-video-element/index.js

Line 33 in 57c4a5e

hls.loadSource(this.src);

hls.attachMedia(this.nativeEl);
hls.on(Hls.Events.MEDIA_ATTACHED, () => hls.loadSource(this.src));

Cordialement,

Unable to resume the live video from paused position

There is no option to make the live video resumable from paused position . The video always goes to the end while resuming. May be i could not find the way to do that or there isn't any way to do that. Please give feedback .

Manage error like Hls do

Hi,

It should be great to manage error like hls doc suggère, see https://github.com/video-dev/hls.js/blob/master/docs/API.md#fifth-step-error-handling.

hls.on(Hls.Events.ERROR, function (event, data) {
  var errorType = data.type;
  var errorDetails = data.details;
  var errorFatal = data.fatal;

  switch (data.details) {
    case Hls.ErrorDetails.FRAG_LOAD_ERROR:
      // ....
      break;
    default:
      break;
  }
});

hls.on(Hls.Events.ERROR, function (event, data) {
  if (data.fatal) {
    switch (data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        // try to recover network error
        console.log('fatal network error encountered, try to recover');
        hls.startLoad();
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        console.log('fatal media error encountered, try to recover');
        hls.recoverMediaError();
        break;
      default:
        // cannot recover
        hls.destroy();
        break;
    }
  }
});

Cordialement,

PS: I could have propose a PR for this and the 2 other issues I submitted today but I haven't done before ...

video is not defined

Hi,

hls-video-element/index.js

Line 35 in 57c4a5e

} else if (video.canPlayType('application/vnd.apple.mpegurl')) {

video.canPlayType should be replaced by this.nativeEl.canPlayType

Cordialement,

Types are not published

https://www.npmjs.com/package/hls-video-element/v/0.3.0?activeTab=code

Presumably because I didn't add them to the files array. PR incoming.

How to access hlsConfig?

For local development reasons, i need to rewrite the URLs to the partfiles and playlists when hls.js is requesting them. The hls.js config uses thexhrSetup property for this, but i could not find a way to make my config known to the hls-video-element. I am using a pure ES6 & preact enviroment, running directly in the browser, so no webpack is involved - just to clarify the situation.

This is what I've tried so far:

<hls-video
  controls
  src="/media/somewhere/masterplaylist.m3u8"
  config="{ \"xhrSetup\": function (xhr, url) {.....} }"
  hlsConfig="{ \"xhrSetup\": function (xhr, url) {.....} }"
</hls-video>

Yet hls.js seems to not receive the config data from the attribute, so my question is:
How can i make the hls -config object known to the element?

Version used: https://unpkg.com/hls-video-element@0
Example config im using:

{
  xhrSetup: function (xhr, url) {
    if (url.indexOf('https://my-project.com/') !== -1) {
       url = url.replace(
         'https://my-project.com/',
         'http://127.0.0.1:8000/'
        )
     }
     xhr.open('GET', url)
     throw new Error('this never gets thrown - this code is never reached anyways')
   }
}

Expose hls

Hi,

In my project I have a list of videos. Right now, if 10 videos appear then I have 10 start load and it consume a lot of bandwidth even if the user don't watch them. It's one of the main problem for me to use only hls video element and not other js player as usual.

So, I have made a test and if I attach hls to "this", like this.hls = new Hls ... then I can access outside hls.

May I made a mistake ? How can I control ouside the behavior of hls attach to a video ?

Thanks.

Providing fallback MP4

Thanks for this component!

Forgive a possibly naive question, but I'm trying to understand what happens if both the native HLS support and hls.js are incompatible with a given browser?

Is this too rare of a case to be concerned about?

With a native video tag, you might provide multiple sources:

<video>
	<!-- Selected if browser has native HLS support -->
	<source
		src="https://example.com/some-video-playlist.m3u8"
		type="application/x-mpegURL"
	/>
	<!-- Selected if browser does not have native HLS support -->
	<source
		src="https://example.com/some-video.mp4"
		type="video/mp4"
	/>
	Your browser does not support HTML5 video.
</video>

HLS-native browsers (like Safari) correctly play the m3u8, and incompatible browsers correctly play the mp4.

However the same markup with the hls-video element always seems to play the mp4, even if there's native HLS support or hls.js would have worked.

<hls-video>
	<!-- Expected to be selected if browser has native HLS support OR hls.js works -->
	<source
		src="https://example.com/some-video-playlist.m3u8"
		type="application/x-mpegURL"
	/>
	<!-- In practice this is always selected -->
	<source
		src="https://example.com/some-video.mp4"
		type="video/mp4"
	/>
	Your browser does not support HTML5 video.
</hls-video>

Any advice on the correct approach to supporting this edge case is appreciated.