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

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 方法创建一个 url 到 vtt 文件。示例：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}
/>

以为是跨源问题。所以我将 crossOrigin="true" 添加到 Player 元素，该元素又将该道具传递给 html5 视频元素，但是当我在 FF 或 chrome 中观看网络选项卡时，我从未看到当它是远程文件时被请求的文件 url。当它是本地 url 时，文件会显示在网络选项卡中，一切正常。

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

Answer 1

我的解决方案是在加载元数据后动态加载轨道元素。因此，在我调用 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> 元素

Remotely load <track> element in HTML video

html

video

reactjs

video-reactjs