添加本地视频预览

docs/lab/js/example.js

@@ -96,13 +96,10 @@ var art = new Artplayer({
     ],
     controls: [
         {
-            name: 'line',
+            name: 'preview',
             position: 'right',
             index: 1,
-            html: '主线',
+            html: '打开'
-            click: function() {
-                console.log('click line');
-            },
         },
     ],
     icons: {
@@ -111,6 +108,9 @@ var art = new Artplayer({
 });
 
 art.on('firstCanplay', () => {
+    var preview = document.querySelector('.art-control-preview');
+    art.plugins.artplayerPluginLocalPreview.attach(preview);
+
     art.on('resize', $player => {
         art.controls.quality.show();
         art.controls.setting.show();

docs/uncompiled/artplayer.js

@@ -5535,9 +5535,63 @@
     };
   }
 
+  function i18nMix$1(i18n) {
+    i18n.update({
+      'zh-cn': {
+        'Only file types are supported': '只支持文件类型',
+        'Load local video successfully': '加载本地视频成功'
+      },
+      'zh-tw': {
+        'Only file types are supported': '只支持文件類型',
+        'Load local video successfully': '加載本地視頻成功'
+      }
+    });
+  }
+
   function artplayerPluginLocalPreview(art) {
-    var getExt = art.constructor.utils.getExt;
+    var _art$constructor$util = art.constructor.utils,
-    return {// TODO...
+        getExt = _art$constructor$util.getExt,
+        append = _art$constructor$util.append,
+        setStyle = _art$constructor$util.setStyle,
+        setStyles = _art$constructor$util.setStyles;
+    var formats = ['mp4', 'ogg', 'webm'];
+    var proxy = art.events.proxy,
+        notice = art.notice,
+        i18n = art.i18n,
+        template = art.template;
+    i18nMix$1(i18n);
+    return {
+      attach: function attach(target) {
+        console.log(target);
+        var $input = append(target, '<input type="file">');
+        setStyle(target, 'position', 'relative');
+        setStyles($input, {
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          left: '0',
+          top: '0',
+          opacity: '0'
+        });
+        proxy($input, 'change', function () {
+          var file = $input.files[0];
+
+          if (!file) {
+            return;
+          }
+
+          var ext = getExt(file.name);
+
+          if (ext && formats.includes(ext)) {
+            template.$video.src = URL.createObjectURL(file);
+            notice.show(i18n.get('Load local video successfully'));
+          } else {
+            var tip = "".concat(i18n.get('Only file types are supported'), ": ").concat(formats.toString());
+            notice.show(tip, true, 3000);
+            console.warn(tip);
+          }
+        });
+      }
     };
   }
 

packages/artplayer/src/plugins/artplayer-plugin-localPreview.js

@@ -1,7 +1,62 @@
+function i18nMix(i18n) {
+    i18n.update({
+        'zh-cn': {
+            'Only file types are supported': '只支持文件类型',
+            'Load local video successfully': '加载本地视频成功',
+        },
+        'zh-tw': {
+            'Only file types are supported': '只支持文件類型',
+            'Load local video successfully': '加載本地視頻成功',
+        },
+    });
+}
+
 export default function artplayerPluginLocalPreview(art) {
-    const { getExt } = art.constructor.utils;
+    const {
-    const formats = ['mp4', 'ogg', 'webm', 'srt', 'vtt'];
+        getExt,
+        append,
+        setStyle,
+        setStyles,
+    } = art.constructor.utils;
+    const formats = ['mp4', 'ogg', 'webm'];
+    const {
+        events: {
+            proxy,
+        },
+        notice,
+        i18n,
+        template,
+    } = art;
+    i18nMix(i18n);
+
     return {
-        // TODO...
+        attach(target) {
+            console.log(target);
+            const $input = append(target, '<input type="file">');
+            setStyle(target, 'position', 'relative');
+            setStyles($input, {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                left: '0',
+                top: '0',
+                opacity: '0',
+            });
+            proxy($input, 'change', () => {
+                const file = $input.files[0];
+                if (!file) {
+                    return;
+                }
+                const ext = getExt(file.name);
+                if (ext && formats.includes(ext)) {
+                    template.$video.src = URL.createObjectURL(file);
+                    notice.show(i18n.get('Load local video successfully'));
+                } else {
+                    const tip = `${i18n.get('Only file types are supported')}: ${formats.toString()}`;
+                    notice.show(tip, true, 3000);
+                    console.warn(tip);
+                }
+            });
+        },
     };
 }