Hls support

Is HLS not supported by this package?

It seems like the blob-data is not rendered when using hls.

[charan0017]

Is HLS not supported by this package?

It seems like the blob-data is not rendered when using hls.

Yes HLS is not supported directly, but you can add an additional package Shaka Player npm i shaka-player.
It's developed by Google itself. Its supports Hls, Mpeg dash, etc, Almost all.

I have created an example project. You can check from the below links.
For Code: https://stackblitz.com/edit/react-k2u2og?file=src%2FPlayer.js
For Demo: https://react-k2u2og.stackblitz.io

[realamirhe]

HLS can also be supported via a wrapper component using hls.js

import Plyr, { APITypes, PlyrProps, PlyrInstance } from "plyr-react";

const MyComponent = () => {
  const ref = useRef<APITypes>(null);
  useEffect(() => {
    const loadVideo = async () => {
      const video = document.getElementById("plyr") as HTMLVideoElement;
      var hls = new Hls();
      hls.loadSource("https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8");
      hls.attachMedia(video);
      // @ts-ignore
      ref.current!.plyr.media = video;

      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        (ref.current!.plyr as PlyrInstance).play();
      });
    };
    loadVideo();
  });

  return (
    <Plyr
      id="plyr"
      options={{ volume: 0.1 }}
      source={{} as PlyrProps["source"]}
      ref={ref}
    />
  );
};

Here is full example code sandbox example

[realamirhe]

I'm going to close this issue since HLS support as a ready-to-use integration may not be the greatest option right now.

It would be beneficial if you could provide any more details.

More Details (written in JS, not TS)

This code works in the previous version of plyr-react (2.2.1)

import { useRef, useEffect } from 'react'
import { PlyrComponent } from 'plyr-react'
import Hls from 'hls.js'

const App = () => {
	const ref = useRef()
	useEffect(() => {
		const video = ref.current.player.media

		const hls = new Hls()
		hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8')
		hls.attachMedia(video)
	}, [])

	return <PlyrComponent ref={ref} />
}

export default App

What I expected to be able to use in plyr-react (3.2.0)

• And yes, that example you used would work, but it's not really good practice to use document.getElementById inside react...

import PlyrComponent from 'plyr-react'
import 'plyr-react/dist/plyr.css'
import Hls from 'hls.js'

const App = () => {
	const ref = useRef()
	useEffect(() => {
		const video = ref.current.plyr.media
		const hls = new Hls()
		hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8')
		hls.attachMedia(video)
	}, [])

	return <PlyrComponent ref={ref} />
}

export default App

[realamirhe]

Thank you @mnervik for your report, I will check it out soon and see the differences between these two versions.

For the sake of clarity, did you mean to reference the version: 2.2.1-0?