Hls support

[ghost]

Is HLS not supported by this package?

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

[M2G]

Hi (for the author of the project),

I have implemented HLS management in my project, you could be inspired if you wish :

• https://github.com/M2G/react-plyr

Sincerely

[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.

[ghost]

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?