Выберите битрейты файла Dash вручную в react-player
Я использую в проекте React-player, и моя задача - потоковая передача файлов MPD (DASH) с функцией переключения разрешения.
на документа основеDASHjs сначала я использовал
getBitrateInfoListFor("video")
чтобы получить все доступные битрейты, а затем я отключил автоматический переключатель битрейта с помощью этого кода:
ref.current.player
.getInternalPlayer("dash")
.updateSettings({
streaming: { abr:
{ autoSwitchBitrate:
{ video: false }
} }
});
и на последнем этапе я установил новое качество с
setQualityFor
:
ref.current.player.getInternalPlayer("dash").setQualityFor("video", qualityIndex);
но это не работает !
весь код:
let ref = React.createRef();
const [VidQuality, setVidQuality] = React.useState(null);
const getDashData= dash => {
console.log(dash);
setVidQuality(dash);
};
const updateQuality = e => {
VidQuality?.getBitrateInfoListFor("video")?.forEach(
quality => {
if (quality.height === +e.target.innerHTML) {
ref.current.player.getInternalPlayer("dash").updateSettings({
streaming: { abr: { autoSwitchBitrate: { video: false } } }
});
ref.current.player
.getInternalPlayer("dash")
.setQualityFor("video", quality.qualityIndex);
}
}
);
};
return (
<div>
<ReactPlayer
ref={ref}
url="VIDEO_URL.mpd"
controls
width="100%"
height="100%"
onReady={() => {
getDashData(ref?.current?.player?.player?.dash);
}}
/>
<div>
<h2>video qualities</h2>
{VidQuality?.getBitrateInfoListFor("video")?.map(qualities => (
<button classes="primary radius" onClick={updateQuality}>
{qualities.height}
</button>
))}
</div>
</div>
);
и вот ссылка на stackblitz