如何在HTML视频中远程加载<Track>元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (80)

我似乎无法将远程VTT文件加载到HTML 5视频播放器中 :

<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元素中添加了CrossOriue=“true”,而后者又将该支持传递给HTML 5视频元素,但当我在FF或Chrome中看到网络选项卡时,我从未看到该文件在远程url时被请求。当它是一个本地url时,文件会显示在网络选项卡中,一切都按它应有的方式工作。

没有错误,只是,文本跟踪不会加载远程文件。

提问于
用户回答回答于

对我来说,解决方案是在元数据加载之后动态加载Track元素。因此,在我的代码中,我调用了这个.rens.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);

扫码关注云+社区

领取腾讯云代金券