我使用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>
)
};