0

我似乎无法将远程 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

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

<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 时，该文件会显示在网络选项卡中，并且一切正常。

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

4

1 回答 1

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);
于 2018-06-21T20:17:17.583 回答