Question

以下情况：服务器收到 srt 文件流。服务器将流转换为 vtt 格式。然后将得到的流缓冲到缓冲区中，然后通过io.socket将其发送到客户端。

以下是服务器代码：

self.expressApp.post("/upload", function (req, res) {
var busboy = new Busboy({ headers: req.headers });
        busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
            var subchunks = [],
                sub = file.pipe(srt2vtt());
            sub.on('data',function(buffer){
                subchunks.push(buffer);
            });
            sub.on('end',function(){
                var buffer = Buffer.concat(subchunks);
                socket.emit('Subtitles',buffer);
            });
        });
        busboy.on('finish', function() {
            res.writeHead(200, { 'Connection': 'close' });
            res.end();
        });
        return req.pipe(busboy);
});

以下是客户端代码：

var subobj = new Blob([new Uint8Array(payload)],{type: "text/vtt"}),
    url = (URL || webkitURL).createObjectURL(subobj),
    track = document.createElement("track");                
    track.kind = "captions";
    track.label = "English";
    track.srclang = "en";
    track.src = url;
    track.addEventListener("load", function() {
        this.mode = "showing";
        videoElement.textTracks[0].mode = "showing";
    });
    videoElement.append(track);

为什么这不起作用。任何帮助表示赞赏。

感谢。

Answer 1

我正在使用 plyr，dashjs 字幕存在一些错误，因此我创建了该 webvtt 的 blob 并将其附加到视频容器上，这是我的代码

 fetch("url")
.then(response => response.text())
.then(result => {
    var blob = new Blob([result], {
        type: "text/vtt"
    });
    const track = document.createElement('track');
    Object.assign(track, {
        label: 'language',
        default: true,
        src: window.URL.createObjectURL(blob)
    });
    video.appendChild(track);
})
.catch(error => console.log('error', error));`

Answer 2

Stackoverflow已经死了！

这是解决方案。

我做错了什么？

我发送vtt流作为二进制数组而不是计划文本字符串。

服务器端代码：

function getIDs() {
  var elements = document.getElementById("myUL1").getElementsByTagName("li");
  for (i = 0; i < elements.length; i++) {
    var elem = elements[i];

    console.log(elem.id, elem.dataset.value);
  }
}

客户端代码：

<ul id="myUL1">
  <li id="1" data-value="A">First</li>
  <li id="2" data-value="B">Second</li>
  <li id="3" data-value="C">Third</li>
  <li id="4" data-value="D">Fourth</li>
</ul>

<button onclick="getIDs()" style="border-radius: 0px; height:30px">Test</button>

动态加载字幕到视频中

2 个答案: