javascript - 如何使用在线链接在视频播放器中添加字幕？

Question

如何使用在线链接在视频播放器中添加字幕？即使我们使用本地字幕文件(.vtt 文件)，字幕也可以工作，但是当我们将字幕来源从本地文件更改为在线链接时，则不会显示字幕，我们正在使用 html5 和 javascript 添加字幕。

player.html

<video id="vid1" height="720" width="1280">
<track id="text1" label="English" kind="subtitles" src="" srclang="en">
</video>

player.js

var text = document.getElementById("text1");
var video = document.getElementById("vid1");
video.setAttribute("src","online video URL link here...");// video is playing fine.
video.play();
text.setAttribute("src", "../../assets/static/creed.vtt"); // this is a local file and this one is working fine.
text.setAttribute("src", "http://54.247.191.224:8080/virgin-static/creed.vtt"); // This file is stored in server, and we are using link to fetch the file but it is not working.
// one more online link is not working
text.setAttribute("src", " http://devcache.ff.msf.ioko.com/Test/Movies/2016/6/28/SDFEATUREMOVIE/Creed%20ENG.VTT"); // This file is also not working
video.textTracks[0].mode = 'showing'; // only local stored file is working others are not working.

Answer 1

这是因为CORS局限性。主要浏览器会阻止来自其他域的请求以防止攻击。除非请求的服务器允许跨域共享。

因此，首先尝试将 crossorigin="anonymous" 添加到视频标签

<video id="vid1" height="720" width="1280" crossorigin="anonymous">
    <track id="text1" label="English" kind="subtitles" src="" srclang="en">
</video>

如果上述代码不起作用，则无法从该服务器加载字幕，除非您是所有者，在这种情况下，您需要通过发送 Access-Control- 来允许其他人访问响应中的Allow-Origin header 。

如果不可能，您必须将字幕本地上传到您的服务器。