Question

我似乎无法将远程VTT文件加载到html5视频播放器中（在ReactJS中，使用video-react v 0.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

当我在浏览器中访问该文件时，可以看到该文件，其模仿类型为VTT。当我将文件包含到项目中并本地加载到track元素中时，一切正常。

<track
    kind="subtitles"
    label="English subtitles"
    src="/static/media/5b1932c7f4717028c0b5d711-1529538217239-nicks.vtt"
    srcLang="en"
    default={true}
/>

这是一个跨源问题。因此，我在播放器元素中添加了crossOrigin =“ true”，这反过来又将该道具传递给html5视频元素，但是当我观看FF或chrome中的网络标签时，当它是远程URL时，我再也看不到请求的文件。如果是本地网址，则该文件会显示在“网络”标签中，并且一切正常。

没有错误，只是文本轨道不会加载远程文件。

Answer 1

对我来说，解决方案是在加载元数据之后动态加载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);

远程加载HTML视频中的<track />元素

1 个答案: