时间戳

首页 > 解决方案 > Safari 和移动 Chrome 中的视频流问题

javascript - Safari 和移动 Chrome 中的视频流问题

问题描述

我在 Android 设备上的 iPad 和 Google Chrome 浏览器的 Safari 中流式传输视频时遇到问题。该应用程序在我使用 Microsoft Edge Chromium 浏览器的笔记本电脑上运行良好。我已经寻找示例来解决我的问题，但我找不到任何具体的内容。问题是客户端将发送获取请求以检索视频文件。我使用gridfs-stream从 MongoDb 数据库中检索该文件，然后将文件通过管道传输到响应对象。这允许用户在video-js player中查看视频流。这在使用 Microsoft Edge Chromium 浏览器的笔记本电脑和台式设备上没有问题，但在 Safari 和移动 Chrome 浏览器中失败。这是我的代码：

我响应请求并从数据库中检索文件，然后将其通过管道传输到节点中的响应对象：

app.get('/get-video', (req, res, next) => {
    let video = req.query.video;
    gfs.files.findOne({ filename: video }, (err, file) => {
        // Check if file ex
        if (!file || file.length === 0) {
          return res.status(404).json({
            err: 'No file exists'
          });
        }
        else {
            let readstream = gfs.createReadStream(file.filename);
            readstream.pipe(res);
        }
   });
});

可以说，我根据get请求中的视频名称找到文件，创建一个ReadStream，并将文件流式传输到响应对象。这是从客户端发出获取请求的 html 代码。播放器正在使用 video-js 库，但我找不到创建流的任何兼容性问题，这在 Edge/Chromium 浏览器中确实有效：

<video class="video-js vjs-big-play-centered vjs-16-9 card-img-top" autopreload="false" data-setup='{"autoplay": false, "controls": true}'>
    <source src="/get-video?video=<%= post.source %>">
</video>

我正在将视频的源设为从 get 请求发送的响应，即视频流。在 Safari 浏览器中，我收到错误消息：由于损坏问题或媒体使用的浏览器不支持的功能，媒体播放被中止

通过 get 请求发送图像时，我在任何浏览器中都没有这个问题。当我简单地请求静态文件时，我也没有任何问题。当我尝试发送视频流时，该问题似乎包含在特定浏览器中。

我使用流而不是静态文件的原因是因为我将应用程序托管在云中。我必须从 MongoDb 数据库发送原始文件（或者至少这是我的理解）。当我在将应用程序发送到云端之前对其进行测试时，没有发生此问题，因为我可以简单地利用文件系统并将文件路径存储为视频源。但是，文件系统不是 Heroku 应用程序的持久性，所以我在这种情况下使用云数据库。现在我需要从数据库中流式传输它，问题正在发生。

标签： javascriptiosnode.jssafarihtml5-video

解决方案

使用自定义 iframe 概念

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

推荐阅读