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

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来允许其他人访问标题作为回应。

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