[英]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>
)
};
我修復了一個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>
)
};
嘗試向您的<video />
添加一個key
道具。
<video ref={video} src={src} key={src} controls />
我還看到許多其他人使用<source />
標簽。
<video ref={video} key={src}>
<source src={src} />
</video>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.