代码之家 › 专栏 › 技术社区 › LauraNMS

如何在视频vtt中强制断线

vtt html5-video javascript

LauraNMS · 技术社区 · 7 年前

我用视频跟踪标签插入字幕和标题在我的视频。我有一个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';
        }
    }

.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 回复 | 直到 7 年前

LauraNMS 7 年前

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