我正在尝试从外部 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>
请帮忙。
最佳答案
听起来您被跨源访问问题阻止了。要从不同的域访问 VTT 文件,您必须满足两个条件:
- 将正确的 CORS header 添加到网站托管 VTT file .您可能无法访问该站点,但幸运的是,它看起来像正确的 header 已被使用:
Access-Control-Allow-Origin: *
。 - 将 crossorigin="anonymous"属性添加到您网页的音频/视频元素。像这样:
<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>
我希望这对你有用。
关于javascript - VTT(字幕)不适用于外部网址,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39077199/