无法在 Videojs 播放器中显示字幕

Posted

技术标签:

【中文标题】无法在 Videojs 播放器中显示字幕【英文标题】:Unable to show up Subtitles in Videojs player 【发布时间】:2015-08-25 09:20:26 【问题描述】:

无法在视频中显示字幕,我使用了以下轨道元素,如代码所示。

<!doctype html>
<head>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js">
</script>
<style type="text/css">
 .vjs-default-skin  color: #fdfdfd; 
 .vjs-default-skin .vjs-play-progress,
 .vjs-default-skin .vjs-volume-level  background-color: #1880b8 
 .vjs-default-skin .vjs-control-bar  font-size: 100% 
</style>
</head>
<body>
<video id="MY_VIDEO_1" class="video-js vjs-default-skin vjs-big-play-    centered" controls
 preload="auto"   data-setup='"controls": true,    "autoplay": false, "preload": "auto" '>
<source src="Game.of.Thrones.S05E10.HDTV.x264-KILLERS.mp4" type='video/mp4'>
<track label="English subtitles" kind="subtitles" srclang="en"         src="http://mcpocketeditionforapt.altervista.org/sub.vtt"></track>

</video>
</body>
</html>

【问题讨论】:

可能是 CORS 问题。您在控制台中看到了哪些错误? 它显示 CORS 错误,并且无法为 CORS @misterben 找到任何解决方案 【参考方案1】:

有两种方法可以解决这个问题。

    配置托管字幕的服务器以发送 CORS 标头(记录在 enable-cors.org 和关于 SO 的各种问题上)crossdomain 属性添加到 video 元素 (&lt;video crossdomain id="MY_VIDEO_1" … )。 将标题托管在与您的页面相同的域中,因此不需要 CORS 标头。

【讨论】:

以上是关于无法在 Videojs 播放器中显示字幕的主要内容,如果未能解决你的问题,请参考以下文章

video.js 字幕无法加载

获取 YouTube 字幕

videojs 播放器无法在 iPad 上运行

从 videoJS 显示视频时长

如何在视频播放结束时删除大播放按钮(VideoJS)

有没有办法使用 Video.js 从视频标签中获取当前字幕的文本?