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

Question

我正在解决视频预览问题。我能够显示 mp4 文件扩展名视频预览。但其余所有视频文件扩展名 mpeg、m4v、wmv 等不适用于视频预览代码。

我在视频 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类型作为参数并返回字符串值

• '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.

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

仅限 Chrome 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"每个都返回一个空字符串 "" ，表示 <video> 无法播放视频Chromium 或 Chrome 浏览器中的元素。

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