CODEWITHSUNDEEP
javascriptangularvideo
Sathish Kotha
Sathish Kotha

Reputation: 1111

Some video file extensions are not working for video preview in angular 4?

I am working on video preview issue. I am able to show the mp4 file extension video preview. But remaining all video file extensions mpeg, m4v, wmv..etc are not working for video preview code.

I added the all file types in the video src html code, but its working for only mp4 videos.I am using the DomSanitizer angular concept for this preview. I have created the plunker Video Preview plunker, you can check my code in the plunker. I got this code from ng2 file upload plugin ng2 file upload concept

component code:

filePreview(input : any){
 this.videoPreviewPath  = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(input.files[0]))); 
}

html code

 <input type="file" (change)="filePreview(input)"
     accept=".mp4,.mpg,.m4v,.flv,.avi,.mov,.wmv,.divx,.f4v,.mpeg,.vob" 
 #input />

<video  controls preload="auto" width="280" height="180" >
  <source [src]='videoPreviewPath' type = 'video/mp4'>
  <source [src]='videoPreviewPath' type = 'video/3gpp'>
  <source [src]='videoPreviewPath' type = 'video/quicktime'>
  <source [src]='videoPreviewPath' type = 'video/x-ms-wmv'>
</video>

please can any one help on this. why remaining file extensions are not working for this code.

Upvotes: 0

Views: 4414

Answers (1)

guest271314
guest271314

Reputation: 1

You can use HTMLMediaElement.canPlayType(), which accepts a MIME type as parameter and returns a string value

  • 'probably': The specified media type appears to be playable.
  • 'maybe': Cannot tell if the media type is playable without playing it.
  • '' (empty string): The specified media type definitely cannot be played.

to determine if the <video> element can play the media MIME type.

At Chromium 59 only "video/mp4" returns "maybe", "video/3gpp", "video/quicktime", "video/x-ms-wmv", "video/x-msvideo", "video/dvd", "video/xvid", "video/x-flv" , "video/x-f4v", and "video/divx" each return an empty string "", indicating that the video cannot be played at <video> element at Chromium or Chrome browsers.

let mimeTypes = [
  "video/mp4", "video/3gpp", "video/quicktime"
, "video/x-ms-wmv", "video/x-msvideo", "video/mpeg"
, "video/dvd", "video/xvid", "video/x-flv"
, "video/x-f4v", "video/divx"
];

let video = document.createElement("video");

mimeTypes.forEach(type => console.log(type,  video.canPlayType(type)));

Upvotes: 2

Related Questions