VTT(字幕)无法使用外部URL

时间:2016-08-22 10:30:00

标签: javascript html5-video webvtt

我正在尝试从外部网址播放电影的副标题,但它无法正常工作,当我尝试添加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> 请帮忙。

1 个答案:

答案 0 :(得分:1)

听起来你被一个crossorigin访问问题阻止了。要从其他域访问VTT文件,您必须满足两个条件:

  1. 将正确的CORS标头添加到网站托管 VTT file。您可能无法访问此网站,但幸运的是,它似乎已经使用了正确的标头:Access-Control-Allow-Origin: *
  2. 添加crossorigin =&#34; anonymous&#34;属于您网页的音频/视频元素。这样的事情:
  3. &#13;
    &#13;
    <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>
    &#13;
    &#13;
    &#13;

    我希望这适合你。