将字幕动态加载到视频中答案

【问题标题】：Dynamically load subtitles into video将字幕动态加载到视频中
【发布时间】：2018-11-09 19:00:35
【问题描述】：

情况如下：服务器收到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);

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

谢谢。

【问题讨论】：

标签： javascript node.js html html5-video blob

【解决方案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));`

【讨论】：

【解决方案2】：

这是解决方案。

我做错了什么？

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

服务器端代码：

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 += buffer.toString('utf8');
            });
            sub.on('end',function(){
                socket.emit('Subtitles',subchunks);
            });
        });
        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;
videoElement.append(track);
track.mode = "showing";
videoElement.textTracks[0].mode = "showing";

【讨论】：