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

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

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

谢谢