如何在 html video 标签中播放 mp4 视频，其中视频是通过 multer 上传的

Question

我必须在我的网站上播放视频。视频是通过 node.js 的 multer 上传的，在 express framework.The 中，文件正在插入数据库和指定的文件夹（文件名如 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 文件我如何在上传视频时生成？

Answer 1

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

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

关于障碍的建议 - 如果没有什么经常改变库 returns "done" 当文件被解析但没有保存在硬盘上因此你不能立即访问它但会有 ms 的延迟。

Answer 2

通过 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)
  }
})

并在通过 angular 显示时使用以下代码

<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

谢谢

如何在 html video 标签中播放 mp4 视频，其中视频是通过 multer 上传的

How to play mp4 video in html video tag in which the video is uploaded via multer

html

video

node.js

express

multer