如何在通过 multer 上传视频的 html 视频标签中播放 mp4 视频答案

【问题标题】：How to play mp4 video in html video tag in which the video is uploaded via multer如何在通过 multer 上传视频的 html 视频标签中播放 mp4 视频
【发布时间】：2017-10-19 22:09:27
【问题描述】：

我必须在我的网站上播放视频。视频是通过带有 node.js 和 express 框架的 multer 上传的。文件正在插入数据库和指定的文件夹（文件名如 1b47c24b20cc2465fbcb395fd1a9dfb4）。我也在上传图片并正确显示但是视频没有播放。

这是我的html代码

<div class="form-group">
<label>Upload image</label>
<input type="file" name="file" id="file" ng-model="testimonial.file" ngf-select ngf-max-size="25MB" required">
<img ng-src="/images/{{testimonial.image.filename}}" width="49" height="49" ng-model="testimonial.file" /><br/>
<label>Upload video</label>
<input type="file" name="video" id="video" ng-model="testimonial.video" ngf-select ngf-max-size="25MB" required">
<video width="320" height="240" controls>
<source src="/images/{{testimonial.video.filename}}" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

请帮我找出解决办法。什么是 .ogg 文件，我在上传视频时如何生成？

【问题讨论】：

如果您尝试通过在 URL 中键入浏览器来播放视频，它会起作用吗？你有正确的服务器 MIME 类型吗？要创建 ogg 版本，您还想使用节点应用程序中的 ffmpeg 进行转码和上传
在输入 url 时正在下载文件。
什么是 MIME 类型如何检查
在您的 .htaccess 文件（假设 Apache 服务器）中添加三行：AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
它是一个节点服务器

标签： node.js html express video multer

【解决方案1】：

通过 multer 上传时，请包含扩展名。

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/images')
  },
 filename: function (req, file, cb) {
    let extArray = file.mimetype.split("/");
    let extension = extArray[extArray.length - 1];
    cb(null, file.fieldname + '-' + Date.now()+ '.' +extension)
  }
})

在通过角度显示时使用下面的代码

<video controls="controls" ng-src="{{getVideoUrl(data.video[0].filename)}}" width="250" height="180"></video>

控制器下的Angular

 $scope.getVideoUrl=function(videopath)
        {
            return $sce.trustAsResourceUrl("/images/"+videopath);
        };

别忘了包含 $sce

谢谢

【讨论】：

【解决方案2】：

遗憾的是，要在不同的浏览器中显示视频，您需要不同的视频扩展程序。在这里您可以找到跨浏览器支持的视频格式列表https://www.w3schools.com/html/html5_video.asp 因此，您还需要将后端的视频转换为两种缺少的格式（如果您想支持所有浏览器）。如果（如您所说）视频正在下载而不是显示内置播放器，这意味着您的浏览器不支持这种特定的视频格式。

幸运的是，您可以在您的服务器机器上安装 ffmpeg 并使用包装库对其进行解析。

请注意障碍 - 如果没有更改库，则在解析文件但未保存在硬盘驱动器时经常返回“完成”，因此您无法立即访问它，但会有几毫秒的延迟。

【讨论】：