某些视频文件扩展名不适用于 Angular 4 中的视频预览？

Question

我正在处理视频预览问题。我能够显示 mp4 文件扩展名视频预览。但剩下的所有视频文件扩展名 mpeg、m4v、wmv..etc 都不适用于视频预览代码。

我在视频 src html 代码中添加了所有文件类型，但它仅适用于 mp4 视频。我在此预览中使用 DomSanitizer angular 概念。 我已经创建了 plunker Video Preview plunker，你可以在 plunker 中查看我的代码。我从 ng2 文件上传插件ng2 file upload concept得到了这段代码

组件代码：

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

html代码

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

请任何人帮忙。为什么剩余的文件扩展名不适用于此代码。

Answer 1

你可以使用HTMLMediaElement.canPlayType()，它接受MIME类型作为参数并返回一个字符串值

• “可能”：指定的媒体类型似乎可以播放。
• 'maybe'：不播放就无法判断媒体类型是否可以播放。
• ''（空字符串）：指定的媒体类型肯定不能播放。

判断<video>元素是否可以播放MIME类型的媒体。

仅在 Chromium 59 中，"video/mp4" 返回 "maybe"、"video/3gpp"、"video/quicktime"、"video/x-ms-wmv"、"video/x-msvideo"、"video/dvd"、"video/xvid"、"video/x-flv" 、"video/x-f4v"和"video/divx"都返回一个空字符串""，表示在Chromium或Chrome浏览器的<video>元素处无法播放视频。

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