将字幕动态加载到视频中

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