javascript - 如何在视频的 vtt 中强制换行

Question

我正在使用视频轨道标签在视频中插入字幕和标题。我有一个 vtt 文件，但我需要在第 1 行和第 2 行之间换行。文本显示在正确的位置，但在一行上。请问如何在演讲者和他的标题之间强制换行？ vtt 文件中的简单中断无法实现此目的。

vtt:

WEBVTT   This must be the first line followed by 2 returns

1
00:00.100 --> 00:04.999 position:0% align:left size:70%
JOE BLOW
survivor

HTML:

<div id="vid-container1" class="vid-container">

         <div class="speakers">  
          <div class="cap-wrap">
            <span id="room-speakers" class="display-speakers">
              <span></span>
            </span>
          </div>
        </div>

        <video id="video" poster="img/screen3.png" autoplay="autoplay" loop preload="metadata" muted playsinline>
            <source src="video/room.mp4" type="video/mp4"/>


            <track id="track-roomspeakers" default 
                    src="video/room-speakers.vtt" 
                    kind="metadata" 
                    srclang="en"
                    label="English Captions"/>


        </video>
</div>

JavaScript:

showTrack('track-roomspeakers', 'room-speakers');

    function showTrack(trackID, displayID) {
        document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded
              var track = document.getElementById(trackID);
              track.addEventListener("cuechange", function () {
                var myTrack = this.track;             // track element is "this"
                var myCues = myTrack.activeCues;      // activeCues is an array of current cues.
                if (myCues.length > 0) {
                    console.log(displayID);
                  var disp = document.getElementById(displayID);
                  disp.style.display = "block";
                  var div = document.createElement('div')
                  for (var i = 0; i < myCues.length; i++) {
                    div.appendChild(myCues[i].getCueAsHTML());
                    //console.log(myCues[i]);
                  }
                  disp.replaceChild(div, disp.childNodes[1]);
                } else {
                  var disp = document.getElementById(displayID);
                  disp.style.display = "none";
                }

              }, false);
            }, false);

        var subtitles = document.getElementById(trackID);
        for (var i=0; i<video.textTracks.length; i++) {
          video.textTracks[i].mode='hidden';
        }
    }

CSS:

.display-speakers {
  font-family: 'proxima-nova', sans-serif;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 21px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.29);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 10;
}
.speakers {
  display: flex;
  justify-content: flex-end;
  align-items: left;
  flex-direction: column;
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  margin-left: 60px;
}
.cap-wrap {
  width: 40%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
}

Answer 1

正如 James 提到的，我必须稍微更改我的 vtt 文件以添加警报字符串，然后替换 <br>对于该字符串:

vtt:

WEBVTT   This must be the first line followed by 2 returns

1
00:00.100 --> 00:04.999 position:0% align:left size:70%
JOE BLOWtitlealert
survivor

JavaScript:

document.addEventListener("DOMContentLoaded", function () {  // don't run this until all DOM content is loaded
              var track = document.getElementById(trackID);
              track.addEventListener("cuechange", function () {
                var myTrack = this.track;             // track element is "this"
                var myCues = myTrack.activeCues;      // activeCues is an array of current cues.
                if (myCues.length > 0) {

                  var disp = document.getElementById(displayID);
                  disp.style.display = "block";
                  var div = document.createElement('div');

                  for (var i = 0; i < myCues.length; i++) {
                    div.appendChild(myCues[i].getCueAsHTML());
                    var mystring = div.innerHTML;
                    if (mystring.indexOf("titlealert") >= 0) {
                        mystring = mystring.replace("titlealert","<br>");//make titles appear with name on one line, title on second line; only do this for speaker titles
                        div.innerHTML = mystring;
                    } 
                }

                 disp.replaceChild(div, disp.childNodes[1]);

                } else {
                  var disp = document.getElementById(displayID);
                  disp.style.display = "none";
                }

              }, false);
            }, false);