如何同时播放文本和视频？

Question

我有使用节点媒体服务器的node.js服务器：

const NodeMediaServer = require('node-media-server');
const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 30,
    ping_timeout: 60
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};
 
var nms = new NodeMediaServer(config)
nms.run();

我还有一段视频是这样从我的电脑里流出来的：

ffmpeg -re -i video.mp4 -c:v libx264 -preset veryfast -tune zerolatency -c:a aac -ar 44100 -f flv rtmp://localhost/live/STREAM_NAME

在HTML上，我可以观看视频：

<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<video id="videoElement" muted></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://localhost:8000/live/STREAM_NAME.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

没关系，但我想在这个流中添加一些文本，比如字幕(但它们实际上不是字幕，而是随机文本)，并希望从HTML或Javascript中访问这些数据。我怎么能这么做？由于同步问题可能会发生，所以我不能设置另一个服务器来发送数据。

Answer 1

您可以通过多种方式向视频中添加文本--最常见的可能是：

• 向视频容器(即MP4文件)添加文本跟踪。这通常是服务器端完成的，然后客户端使用此信息显示客户端。您可以在这里看到更多的信息和一个常用工具的示例：https://www.bento4.com/developers/dash/subtitles/

• 将文本嵌入到帧中--这需要更多的处理，还需要将文本添加到视频帧本身，因此您无法在客户端轻松地打开或关闭文本。如果您确实想这样做，那么FFMPEG可能是一个很好的起点。

• 在客户端本身添加了一个文本覆盖--例如浏览器应用程序上的文本'div‘或元素，或者安卓上的TextView等等。您提到同步可能是一个问题，但您可以从视频中获取定时事件来触发更改文本。这就避免了在视频或视频容器上进行任何额外的处理。

下面是一个使用时间触发文本的简单示例--您可能希望对其进行更新，以避免检查每个“onTimeUpdate”事件上的所有内容，并可能将文本放在视频本身之上，但这给出了一个基本机制如何工作的示例：

​

var vid1 = document.getElementById("MyVid1")
var textBox = document.getElementById("textbox")

var firstTextTime = 3
var secondTextTime = 6
var thirdTextTime = 9

vid1.ontimeupdate = function() {

    if (vid1.currentTime > thirdTextTime) {
      textBox.innerHTML = "Third message"
    } else if (vid1.currentTime > secondTextTime) {
      textBox.innerHTML = "Second message"
    } else if (vid1.currentTime > firstTextTime) {
      textBox.innerHTML = "First message"
    }
    
};

<p id= "textbox">
Start Message.
</p>
<video id="MyVid1" width="320" height="176" autoplay controls preload="auto">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
  Your browser does not support this video format
</video>

​