如何在播放video的htmlvideo标签中播放mp4video

我必须在我的网站上播放video。 该video是通过multer和node.js以及express框架上传的。该文件正在插入数据库和指定的文件夹(文件名如1b47c24b20cc2465fbcb395fd1a9dfb4)。 我也正在上传图像,并正确显示,但video不播放。

这是我的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文件我怎样才能生成,而上传我的video?

不幸的是,要在不同的浏览器中显示video,您需要不同的video扩展名。 在这里,您可以在浏览器中find支持的video格式列表https://www.w3schools.com/html/html5_video.asp因此,您还需要将后端video转换为两种不足的格式(如果您要支持所有浏览器)&#x3002; 如果(如你所说)video正在下载,而不是显示内置播放器,这意味着你的浏览器不支持这种特定的video格式。

幸运的是,你可以在你的服务器上安装ffmpeg,并用包装库parsing它。

build议障碍 – 如果没有任何改变库经常返回“完成”文件被parsing,但没有保存在硬盘驱动器,因此你不能立即访问它,但毫秒的延迟。

同时通过Mulder上传请包括扩展名。

 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

谢谢

Interesting Posts