Question

我必须在我的网站上播放视频。视频通过multer与node.js和express框架上传。文件正在插入数据库和指定的文件夹（文件名如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并使用包装器库解析它。

建议在障碍物上 - 如果没有任何改变，图书馆经常返回＆＃34;完成＆＃34;当文件被解析但未保存在硬盘驱动器上时，您无法立即访问它，但延迟时间为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)
  }
})

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

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

控制器下的角度

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

不要忘记包含$ sce

谢谢

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

2 个答案: