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

Question

I have to play video in my website. The video is uploaded via multer with node.js and in express framework.The file is inserting to the database and the specified folder(file name like 1b47c24b20cc2465fbcb395fd1a9dfb4). I am uploading image also and its showing properly But video is not playing.

Here is my html code

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

Please help me to find out the solution. and what is .ogg file how can i generate while uploading my video?

Answer 1

Sadly, to display video in different browsers you need different videos extensions. Here you'll find a list of supported video formats across browsers https://www.w3schools.com/html/html5_video.asp Therefore you need to also convert video on backend side to two lacking formats (if you want to support all browsers). If (as you said) video is downloading instead of showing build in player that means your browser doesn't support this particular video format.

Luckily you can install ffmpeg on your server machine and parse this with wrapper library.

Be advised on obstacles - if nothing changed library very often returns "done" when file is parsed but not saved on hard drive therefore you can't access it instantly but with ms of delay.

Answer 2

while uploading via multer please include extension.

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

and while displaying via angular use the below code

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

Angular under controller

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

don't forget to include $sce

thank you