videojs 重写字幕,自己来控制字幕的切换,按钮不在控制栏
时间: 2024-03-11 13:46:46 浏览: 284
如果你想要自己控制字幕的切换,可以通过以下步骤重写字幕轨道:
1. 首先,你需要获取到视频元素的 `TextTrackList` 对象,可以通过 `video.textTracks()` 方法获取。
2. 接着,你可以从 `TextTrackList` 中找到你需要的字幕轨道对象,可以通过 `find` 方法查找,或者使用 `getTrackById` 方法根据 ID 获取。
3. 一旦找到了需要的字幕轨道对象,你可以使用 `mode` 属性来控制它的显示状态。将 `mode` 属性设置为 `'showing'` 将会显示该字幕轨道,将其设置为 `'disabled'` 将会隐藏该字幕轨道。
下面是一个示例代码,演示如何重写字幕轨道并控制它的显示状态:
```javascript
var video = videojs('my-video');
// 获取字幕轨道对象
var subtitlesTrack = video.textTracks().find(function(track) {
return track.kind === 'subtitles' && track.label === 'English';
});
// 自定义按钮控制字幕切换
var subtitlesButton = document.getElementById('subtitles-button');
subtitlesButton.addEventListener('click', function() {
if (subtitlesTrack.mode === 'showing') {
// 隐藏字幕
subtitlesTrack.mode = 'disabled';
} else {
// 显示字幕
subtitlesTrack.mode = 'showing';
}
});
```
在这个示例中,我们首先找到了一个名为 `'English'` 的字幕轨道对象。然后,我们创建了一个自定义按钮,来控制字幕的显示和隐藏。每次点击按钮时,我们检查当前字幕轨道的显示状态。如果它已经显示,则将其设置为隐藏,反之则将其设置为显示。
阅读全文