无法在 HTML5 视频中使用在线 vtt 链接显示字幕答案

【问题标题】：cannot show subtitles using online vtt link in HTML5 video无法在 HTML5 视频中使用在线 vtt 链接显示字幕
【发布时间】：2021-03-31 00:42:07
【问题描述】：

在我的 Angular 项目中，我正在尝试创建一个电影流媒体网站，我想在其中显示电影和字幕。我可以很好地播放视频，但我无法加载字幕。

我知道这个问题之前可能已经被问过，但对我来说没有用

这是我的相关html代码

<video
      class="video"
      id="myVideo"
      autoplay
      #videoPlayer
    >
     <source
        src="http://binzwatchftp.ddns.net/Hollywood/Others/Dunkirk%20(2017)/Dunkirk.2017.1080p.BluRay.x264-[YTS.AG].mp4"
        type="video/mp4"
      /> 
      
      <track
        label="English"
        kind="subtitles"
        srclang="en"
        src="http://binzwatchftp.ddns.net/Hollywood/Others/Dunkirk%20(2017)/dunkirk_subtitle.vtt"
        default
      />

它给了我这个错误

你能帮我解决这个问题吗？

虽然当我在我的项目文件夹中静态包含 .vtt 字幕文件时它会加载。但我希望它是从在线 url 获取的

【问题讨论】：

标签： html angular html5-video

【解决方案1】：

您可以使用阅读链接来显示显示字幕 https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

【讨论】：

它仍然没有帮助，因为它使用存储在文件夹中的静态文件
获取后可以在文件夹中设置

【解决方案2】：

您遇到了 CORS 问题。这篇文章会让你更接近：

How to enable CORS for html5 video loading vtt file?

但您还必须放松远程服务器上的跨域策略（我收到第二个错误，服务器不允许为本地主机提供服务）/

【讨论】：