Uncaught DOMException on route change hls.js React.js

Question

I use plyr.js to create a video player.
Caught an error with hls.js:

Uncaught DOMException: Failed to read the 'buffered' property from 'SourceBuffer': 
This SourceBuffer has been removed from the parent media source.

It happens when I change video src on route change.

My player:

import React from 'react'
import HLS from 'hls.js'
import Plyr from 'plyr'

const Player = ({src}) => {

  const [player, setPlayer] = useState(null);
  const video = useRef(null);

  useEffect(() => {

    const node = video.current;

    // Thought it would help, but no
    const destroy = () => {
      if (window.hls) {
        window.hls.stopLoad();
        window.hls.detachMedia();
        window.hls.destroy();
      }
    };

    if (node) {
      if(!player) setPlayer(new Plyr(node, {captions: {active: true, update: true}}))
      if (HLS.isSupported()) {
        destroy();
        window.hls = new HLS();
        window.hls.loadSource(src);
        window.hls.attachMedia(node);
      } else node.src = src;
    }

    }, [src, player]);

  return (
    <div>
      <video ref={video} src={src} controls/>
    </div>
  )
};

Did you try another video source? I think that the issue with the video format. — Ahed Kabalan, Dec 24 '19 at 15:41

score 3 · Accepted Answer · edited Oct 04 '20 at 10:31

I fixed an useEffect so it works now:

import React , { useEffect, useRef, useState,context }  from 'react'
import HLS from 'hls.js'
import Plyr from 'plyr'

const destroyHLS = () => {
  window.hls.stopLoad();
  window.hls.detachMedia();
  window.hls.destroy();
};


const Player = ({src}) => {

  const [player, setPlayer] = useState(null);
  const video = useRef(null);

  useEffect(() => setPlayer(new Plyr(video.current, context)), [src]);

  useEffect(() => {

    let ignore = false;

    if (HLS.isSupported()) {
      if (window.hls) destroyHLS();
      window.hls = new HLS();
      window.hls.loadSource(src);
      window.hls.attachMedia(video.current);
    } else video.current.src = src;

    if (ignore) player.destroy();

    return () => {
      ignore = true;
    };
  }, [player, src]);

  return (
    <div>
      <video ref={video} src={src} controls/>
    </div>
  )
};

score 2 · Answer 2 · answered Dec 24 '19 at 15:07

2

Try adding a key prop to your <video />.

<video ref={video} src={src} key={src} controls />

I also see many others use a <source /> tag.

<video ref={video} key={src}>
  <source src={src} />
</video>

answered Dec 24 '19 at 15:07

Brandon Dyer

1,316
12
21

Hi, it works well but also removes plyr styles once `src` changed :/ – Arthur Dec 24 '19 at 15:38
:( oh no. Hmmm. It might be worth mentioning that `useEffect` is only called when the component first mounts, not when the state changes. Maybe you can put some of that logic outside of it? Don't know much about plyr – Brandon Dyer Dec 24 '19 at 15:41
1

Thanks for your help, Brandon, I found a solution, it doesn't work because of my `useEffect`, I will give you an reward in 20 hours :) – Arthur Dec 24 '19 at 18:23

Uncaught DOMException on route change hls.js React.js

2 Answers2