无法在 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
元素 (<video crossdomain id="MY_VIDEO_1" …
)。
将标题托管在与您的页面相同的域中,因此不需要 CORS 标头。
【讨论】:
以上是关于无法在 Videojs 播放器中显示字幕的主要内容,如果未能解决你的问题,请参考以下文章