VideoJS:无法在 运行 时间切换文本轨道
VideoJS: unable to switch the text track on run time
在 videojs 中,我想从下拉列表中更改文本轨道。当我select一个选项(比如中文)时,字幕会自动改变。下面是我的代码:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<style>
.video-js .vjs-control-bar {
display: none;
}
</style>
<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<p><select name="sel" id="sel"><option value="en">English</option><option value="zh">Chinese</option></select></p>
</body>
我阅读了 post however, unable to understand. I also gone through https://docs.videojs.com/tutorial-text-tracks.html 但未能理解如何实现这一点。
var player = videojs('dotsub_example');
var tracks = player.textTracks();
var trackSelector = document.getElementById("sel");
trackSelector.addEventListener("change", function () {
var selectedLanguage = this.value;
for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
track.mode = "disabled";
if (track.kind === 'captions' && track.language === selectedLanguage) {
track.mode = 'showing';
}
}
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<style>
.video-js .vjs-control-bar {
display: none;
}
</style>
<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<p>
<select name="sel" id="sel">
<option value="en">English</option>
<option value="zh">Chinese</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
</p>
</body>
在 videojs 中,我想从下拉列表中更改文本轨道。当我select一个选项(比如中文)时,字幕会自动改变。下面是我的代码:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<style>
.video-js .vjs-control-bar {
display: none;
}
</style>
<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<p><select name="sel" id="sel"><option value="en">English</option><option value="zh">Chinese</option></select></p>
</body>
我阅读了 post
var player = videojs('dotsub_example');
var tracks = player.textTracks();
var trackSelector = document.getElementById("sel");
trackSelector.addEventListener("change", function () {
var selectedLanguage = this.value;
for (var i = 0; i < tracks.length; i++) {
var track = tracks[i];
track.mode = "disabled";
if (track.kind === 'captions' && track.language === selectedLanguage) {
track.mode = 'showing';
}
}
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<style>
.video-js .vjs-control-bar {
display: none;
}
</style>
<body>
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
<p>
<select name="sel" id="sel">
<option value="en">English</option>
<option value="zh">Chinese</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
</p>
</body>