远程加载视频中的<track>元素
远程加载视频中的<track>元素
提问于 2018-06-22 02:34:23
我似乎无法将远程VTT文件加载到html5视频播放器(在ReactJS中，使用video-react v0.11.2 (https://github.com/video-react/video-react) )
<track
kind="subtitles"
label="English subtitles"
src={api.makeFileURL(this.props.chapterPart.VideoFile[0].subtitles, this.props.user.id)}
srcLang="en"
default={true}
/>这不管用。makeFileURL方法创建一个指向vtt文件的url。示例：http://localhost:3000/api/file/download/5b1932c7f4717028c0b5d711-1529538217239-nicks.vtt?access_token=Q4tBHTC36Rumijnvsb9QruNlQJ5EX1mQPBLD86LHFHfJU3ttXOzCdOJBeqIj6xP9
当我在浏览器中访问该文件时，我可以看到该文件，且mimetype为VTT。当我将该文件包含到我的项目中，并在本地将其加载到跟踪元素中时，一切都很正常。
<track
kind="subtitles"
label="English subtitles"
src="/static/media/5b1932c7f4717028c0b5d711-1529538217239-nicks.vtt"
srcLang="en"
default={true}
/>我以为这是个跨地域的问题。所以我在Player元素中添加了crossOrigin="true“，这反过来会将该属性传递给html5视频元素，但当我在FF或chrome中查看网络选项卡时，我从未看到请求的文件是远程url。当它是一个本地url时，该文件会显示在网络选项卡中，一切都会正常工作。
没有错误，只是文本轨道不能加载远程文件。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-22 04:17:18
我的解决方案是在加载元数据后动态加载track元素。因此，在我的代码中，我调用了this.refs.player.load()，在此之后，我有以下(工作的)代码：
let self = this;
this.refs.player.video.video.addEventListener("loadedmetadata", function() {
// We can't dynamically load <tracks> for subtitles, so we have to hook into the onload of the video...
let track = document.createElement("track");
track.kind = "captions";
track.label = "English";
track.srclang = "en";
track.src = api.makeFileURL(self.props.chapterPart.VideoFile[0].subtitles, self.props.user.id);
track.addEventListener("load", function() {
this.mode = "showing";
self.refs.player.video.video.textTracks[0].mode = "showing";
});
this.appendChild(track);
}, true);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50975441
复制相关文章
相似问题