动态添加视频字幕轨道会使它们的顺序错误

发布于 2025-01-10 23:29:42 字数 1170 浏览 0 评论 0原文

当我尝试将视频文本轨道添加到 videoJs 播放器时，它以错误的顺序添加它们，其中新轨道出现在上一个轨道之上。

我创建了一个 jsFiddle 来展示这一点，任何人都可以帮助解决我如何解决这个问题吗？

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ }' muted>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  </video>

var currPlayer = videojs("my_video_1")

currPlayer.play()
currPlayer.addTextTrack("captions", 'english', 'en');

window.setInterval(() => {
  let currentTime = currPlayer.currentTime();
  const activeCue = new VTTCue(currentTime, currentTime + 2, currentTime + 2)

  var tracks = currPlayer.textTracks();
  let existing = tracks.tracks_.find(x => x.kind === 'captions' && x.language === 'en');

  existing.mode = 'showing';
  existing.addCue(activeCue);
}, 1000)

原文

When I try and add video text tracks to videoJs player, it adds them in the wrong order where the new track appears above the previous track.

I have created a jsFiddle to show this, can anyone help solve how I fix this?

https://jsfiddle.net/ts9qogdh/3/

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ }' muted>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  </video>

var currPlayer = videojs("my_video_1")

currPlayer.play()
currPlayer.addTextTrack("captions", 'english', 'en');

window.setInterval(() => {
  let currentTime = currPlayer.currentTime();
  const activeCue = new VTTCue(currentTime, currentTime + 2, currentTime + 2)

  var tracks = currPlayer.textTracks();
  let existing = tracks.tracks_.find(x => x.kind === 'captions' && x.language === 'en');

  existing.mode = 'showing';
  existing.addCue(activeCue);
}, 1000)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦行七里 2025-01-17 23:29:42

这个 CSS 应该可以工作。不过，在 IE11 中，标题有点间隔……

.vjs-text-track-display > div {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.vjs-text-track-cue {
    position: initial !important;
}

This CSS should work. Although, in IE11 the captions are a bit spaced-out...

.vjs-text-track-display > div {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.vjs-text-track-cue {
    position: initial !important;
}

回复收藏 0 原文

~没有更多了~