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

Posted 2023-03-07

【中文标题】如何在视频的 vtt 中强制换行

【英文标题】：how to force a line break in vtt for video

【发布时间】：2018-11-07 19:35:26

【问题描述】：

我正在使用视频轨道标签在我的视频中插入字幕和标题。我有一个 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;

【参考方案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);

【讨论】：

我将删除我的答案，因为它完全是错误的，对你没有帮助。您可能会考虑的另一种方法是弄清楚您从 getCueAsHTML 获得的文档片段的结构，查看艺术家/标题是否位于单独的元素中，并将一个类应用于其中一个或两个元素以获得您需要的视觉效果。当然，文档片段有可能包含在同一元素中的艺术家和标题，在这种情况下，您的答案（文本替换）就是要走的路！