修改本地视频类型判断

packages/artplayer-tool-thumbnail/src/index.js

@@ -9,7 +9,10 @@ class ArtplayerToolThumbnail extends Emitter {
         this.setup(Object.assign({}, ArtplayerToolThumbnail.DEFAULTS, option));
         this.video = ArtplayerToolThumbnail.creatVideo();
         this.inputChange = this.inputChange.bind(this);
+        this.ondrop = this.ondrop.bind(this);
         this.option.fileInput.addEventListener('change', this.inputChange);
+        this.option.fileInput.addEventListener('dragover', ArtplayerToolThumbnail.ondragover);
+        this.option.fileInput.addEventListener('drop', ArtplayerToolThumbnail.ondrop);
     }
 
     static get DEFAULTS() {
@@ -22,6 +25,16 @@ class ArtplayerToolThumbnail extends Emitter {
         };
     }
 
+    static ondragover(e) {
+        e.preventDefault();
+    }
+
+    ondrop(e) {
+        e.preventDefault();
+        const file = e.dataTransfer.files[0];
+        this.loadVideo(file);
+    }
+
     setup(option = {}) {
         this.option = Object.assign({}, this.option, option);
         const { fileInput, delay, number, width, height, column } = this.option;
@@ -55,13 +68,17 @@ class ArtplayerToolThumbnail extends Emitter {
     }
 
     inputChange() {
-        const { delay } = this.option;
-        const fileType = ['video/mp4', 'audio/ogg', 'video/webm'];
         const file = this.option.fileInput.files[0];
+        this.loadVideo(file);
+    }
+
+    loadVideo(file) {
+        const { delay } = this.option;
         if (file) {
+            const canPlayType = this.video.canPlayType(file.type);
             this.errorHandle(
-                fileType.includes(file.type),
-                `Only file types are supported: ${fileType.toString()}, but got ${file.type}`,
+                canPlayType === 'maybe' || canPlayType === 'probably',
+                `Playback of this file format is not supported: ${file.type}`,
             );
             const videoUrl = URL.createObjectURL(file);
             this.videoUrl = videoUrl;
@@ -187,6 +204,8 @@ class ArtplayerToolThumbnail extends Emitter {
 
     destroy() {
         this.option.fileInput.removeEventListener('change', this.inputChange);
+        this.option.fileInput.removeEventListener('dragover', ArtplayerToolThumbnail.ondragover);
+        this.option.fileInput.removeEventListener('drop', ArtplayerToolThumbnail.ondrop);
         document.body.removeChild(this.video);
         if (this.videoUrl) {
             URL.revokeObjectURL(this.videoUrl);

packages/artplayer/src/plugins/localPreview.js

@@ -1,11 +1,11 @@
 function i18nMix(i18n) {
     i18n.update({
         'zh-cn': {
-            'Only file types are supported': '只支持文件类型',
+            'Playback of this file format is not supported': '不支持播放该文件格式',
             'Load local video successfully': '加载本地视频成功',
         },
         'zh-tw': {
-            'Only file types are supported': '只支持文件類型',
+            'Playback of this file format is not supported': '不支持播放該文件格式',
             'Load local video successfully': '加載本地視頻成功',
         },
     });
@@ -24,9 +24,9 @@ export default function localPreview(art) {
     i18nMix(i18n);
 
     function loadVideo(file) {
-        const fileTypes = ['video/mp4', 'audio/ogg', 'video/webm'];
         if (file) {
-            if (fileTypes.includes(file.type)) {
+            const canPlayType = template.$video.canPlayType(file.type);
+            if (canPlayType === 'maybe' || canPlayType === 'probably') {
                 const url = URL.createObjectURL(file);
                 player.playbackRateRemove();
                 player.aspectRatioRemove();
@@ -38,7 +38,7 @@ export default function localPreview(art) {
                 art.emit('switch', url);
                 notice.show(i18n.get('Load local video successfully'));
             } else {
-                const tip = `${file.type}, ${i18n.get('Only file types are supported')}: ${fileTypes.toString()}`;
+                const tip = `${i18n.get('Playback of this file format is not supported')}: ${file.type}`;
                 notice.show(tip, true, 3000);
                 console.warn(tip);
             }