路由更改时未捕获的 DOMException hls.js React.js
Uncaught DOMException on route change hls.js React.js
我使用 plyr.js 创建视频播放器。
发现错误 hls.js
:
Uncaught DOMException: Failed to read the 'buffered' property from 'SourceBuffer':
This SourceBuffer has been removed from the parent media source.
当我在更改路线时更改视频 src
时会发生这种情况。
我的播放器:
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>
)
};
尝试将 key
道具添加到您的 <video />
。
<video ref={video} src={src} key={src} controls />
我也看到许多其他人使用 <source />
标签。
<video ref={video} key={src}>
<source src={src} />
</video>
我修复了一个 useEffect
现在可以使用了:
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>
)
};
我使用 plyr.js 创建视频播放器。
发现错误 hls.js
:
Uncaught DOMException: Failed to read the 'buffered' property from 'SourceBuffer':
This SourceBuffer has been removed from the parent media source.
当我在更改路线时更改视频 src
时会发生这种情况。
我的播放器:
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>
)
};
尝试将 key
道具添加到您的 <video />
。
<video ref={video} src={src} key={src} controls />
我也看到许多其他人使用 <source />
标签。
<video ref={video} key={src}>
<source src={src} />
</video>
我修复了一个 useEffect
现在可以使用了:
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>
)
};