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

How to add subtitle in video player using online link?

本文关键字：播放器 添加 字幕 视频 何使用 在线 链接      更新时间：2023-09-26

如何使用在线链接在视频播放器中添加字幕?即使我们使用本地字幕文件(。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.

这是因为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头来允许其他人访问。

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

相关文章：