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

如何解决如何同时播放文字和视频？

我有使用node-media-server的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访问此数据。我怎样才能做到这一点？我无法将其他服务器设置为仅发送数据，因为可能会发生同步问题。

解决方法

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

• 将文本轨道添加到视频容器，即MP4文件。通常这是在服务器端完成的，然后客户端使用此信息在客户端显示它。您可以在此处查看更多信息，以及使用常用工具的示例：https://www.bento4.com/developers/dash/subtitles/

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

• 在客户端本身上添加文字叠加层-例如浏览器App上的文本'div'或元素，或Android上的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>