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文件，必须满足两个条件：

1. 将正确的CORS头添加到承载VTT文件的站点。您可能无法访问该站点，但幸运的是，它似乎已经使用了右标头：Access-Control-Allow-Origin: *。
2. 将crossorigin=“匿名”属性添加到页面的音频/视频元素中。就像这样：

​

<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>

​

我希望这对你有用。