如何在视频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);