如何解决AWS IVS:隐藏字幕到 aws IVS 通道到 ReactJS 组件
我已成功将 aws IVS
流媒体频道加载到 video tag
。现在我还需要显示隐藏式字幕功能。但是在点击字幕按钮时它没有显示任何 closed captioning
。
function IVSComponent(options) {
const divEl = useRef(null);
const videoEl = useRef(null);
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://player.live-video.net/1.0.0/amazon-ivs-player.min.js';
script.async = true;
document.body.appendChild(script);
script.onload = () => {
if (IVSPlayer.isPlayerSupported) {
const player = IVSPlayer.create();
player.attachHTMLVideoElement(document.getElementById('video-player'));
player.load("https://fcc3ddae59ed.us-west-2.playback.live-video.net/api/video/v1/us-west-2.893648527354.channel.xhP3ExfcX8ON.m3u8");
player.play();
}
}
return () => {
document.body.removeChild(script);
}
},[])
return (
<div ref={divEl}>
<video id="video-player" x-webkit-airplay="allow" ref={videoEl} playsInline autoPlay controls>
<track label="English" kind="subtitles" srclang="en" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt" default />
<track label="Deutsch" kind="subtitles" srclang="de" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt" />
<track label="Español" kind="subtitles" srclang="es" src="https://video-react.js.org/assets/elephantsdream/captions.en.vtt"></track>
</video>
</div>
);
}
export default IVSComponent;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。