HTML5视频:同时显示两个不同的字幕

Question

我使用标准的HTML5视频字幕功能在内置的HTML5视频播放器中显示字幕(在srt和vtt中提供)。

<video width="100%" height="100%" autobuffer="" controls="" preload="auto" id="media" class="media embed-responsive-item">
     <source type="video/ogg" src="podm.h264.mp4&amp;t=ogv"></source>
     <source type="video/mp4" src="podm.h264.mp4&amp;t=mp4"></source>
     <track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.vtt"></track>
     <track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.srt"></track>
     <p>Your browser does not support HTML5 video</p>
</video>

现在我需要同时显示两个不同的字幕，所以第二个字幕显示在第一个字幕的顶部。

(出乎意料)我在网络上找不到任何有用的信息来显示HTML5视频中的多个字幕。我很确定我需要一个定制的黑客。

我正在寻找建议和/或参考如何实现此功能(而不使用非自由/窗口-只有libs和播放器，如DivX)。

Answer 1

正如您所理解的HTML5，有代码标准，谁想同时显示2srt ?？

解决方案:只需提供一个srt，在每个字幕中还包括第二个副标题作为文本！！

示例srt脚本包括ENG + FR字幕：

1
00:00:30,342 --> 00:00:33,082
I came from city
Je suis venu de la ville

2
00:00:33,202 --> 00:00:36,530
do you play football?
ne vous jouez au football?

3
00:00:36,650 --> 00:00:39,965
to pay rent
de payer le loyer

I‘我不确定，对于换行，您可以尝试使用：\ \n或\N

Answer 2

使用浏览器内置的<video>控件，您不能选择两个文本轨道。

要显示两个文本轨道，例如第一和第二，您可以使用javascript：

video.textTracks[0].mode = 'showing';
video.textTracks[1].mode = 'showing';

它在Firefox中工作，部分在Chrome中工作，而在Safari中不工作。

​

function main(){
  let video = document.querySelector('#video');
  video.textTracks[0].mode = 'showing';
  video.textTracks[1].mode = 'showing';

  /* fix cue overlap for Chrome */
  if(window.chrome){
    let sheet = document.querySelector('#videoStyle').sheet;
    let rule = Array.prototype.find.call(sheet.rules, (r) => r.selectorText === 'video::-webkit-media-text-track-display');
    let observer = new ResizeObserver((entries) => {
      let height = entries[0].contentRect.height;
      let controlsHeight = 72;
      let maxCueLines = 4; // TODO adjust this according to your vtt
      rule.style.setProperty('top', `calc(${Math.floor((1 - controlsHeight / height) * 100)}% - ${maxCueLines}em)`, 'important');
    });
    observer.observe(video);
  }
}
document.addEventListener('DOMContentLoaded', main);

<div>
  <strong>Showing two text tracks</strong><br/>
  Firefox: supported, built-in<br/>
  Chrome: partially supported, need trick to fix<br/>
  Safari: not supported yet<br/>
</div>

<video id="video" width="640" height="360" controls=""
    src="https://storage.googleapis.com/media-session/caminandes/short.mp4" crossorigin="anonymous" preload="metadata">
  <track kind="captions" srclang="en" src="https://static.3playmedia.com/p/files/6157318/threeplay_transcripts/18335056.vtt?project_id=10127&format_id=51&refresh=1620709875" default="" />
  <track kind="captions" srclang="en-GB" src="https://static.3playmedia.com/p/files/6157318/threeplay_transcripts/18335056.vtt?project_id=10127&format_id=51&refresh=1620709875" />
</video>

<style id="videoStyle">
video::cue {
  background-color: transparent;
  text-shadow: 1px 1px 2px #666666;
}
/* fix cue overlap for Chrome */
video::-webkit-media-text-track-display {
  position: relative!important;
  transform: none!important;
}
</style>

​