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);

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

1 个答案: