VTT（字幕）无法从外部运行 url

Question

我正在尝试从外部 url 播放电影的字幕，但它不起作用，当我尝试添加本地存储的 vtt 文件时，它就起作用了。下面是代码 <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" default> </video> 上面的代码不起作用。但是当我复制 vtt 的内容时它起作用了。 <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <track label="English" kind="subtitles" srclang="en" src="abc.VTT" default> </video> 请帮忙。

Answer 1

听起来您被跨域访问问题阻止了。要从不同域访问VTT文件，您必须满足两个条件：

将正确的 CORS header 添加到站点托管 VTT file。您可能无法访问此站点，但值得庆幸的是它看起来像正确的 header 已被使用：Access-Control-Allow-Origin: *。
将 crossorigin="anonymous" 属性添加到页面的 audio/video 元素。像这样：

<video id="video" crossorigin="anonymous" autoplay controls preload="metadata">
  <source src="video/sintel-short.mp4" type="video/mp4" />
  <track label="English" kind="subtitles" srclang="en" src="http://devcache.filmflexmovies.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed ENG.VTT" default/>
</video>

我希望这对你有用。

VTT（字幕）无法从外部运行 url

VTT(Subtitles) is not working from external url

javascript

html5-video

webvtt