优化预览图demo

docs/assets/css/style.css

@@ -170,6 +170,10 @@ img {
 }
 
 .part-right .video-wrap .artplayer-app {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
     width: 90%;
     height: 65%;
     border: 1px solid rgba(255, 255, 255, 0.05);

docs/assets/example/thumbnail.js

@@ -1,23 +1,11 @@
-console.warn('暂时只支持本地视频，请点击创建预览图');
 var $popups = document.querySelector('.popups');
 var $popinner = document.querySelector('.popinner');
+var $artplayer = document.querySelector('.artplayer-app');
 var url = 'https://zhw2590582.github.io/assets-cdn';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-    title: '【新海诚动画】『秒速5センチメートル』',
-    autoSize: true,
-    moreVideoAttr: {
-        crossOrigin: 'anonymous',
-    },
-    controls: [
-        {
-            name: 'thumbnail',
-            position: 'right',
-            html: '创建预览图',
-            mounted: $file => {                
+
+$artplayer.innerHTML = 'Drop video file here or click to upload.';
 var thumbnail = new ArtplayerToolThumbnail({
-                    fileInput: $file,
+    fileInput: $artplayer,
     delay: 300,
     number: 60,
     width: 160,
@@ -60,7 +48,7 @@ var art = new Artplayer({
     });
 
     new Artplayer({
-                        container: '.artplayer-app',
+        container: $artplayer,
         url: thumbnail.videoUrl,
         thumbnails: {
             url: thumbnail.thumbnailUrl,
@@ -72,7 +60,3 @@ var art = new Artplayer({
     });
     console.log('Build player complete');
 });
-            },
-        },
-    ],
-});

docs/assets/js/common.js

@@ -28,7 +28,7 @@
 
     function initArt(art) {
         Artplayer.config.video.events.forEach(function(item) {
-            art.on('video:' + item, function(event) {
+            art && art.on('video:' + item, function(event) {
                 console.log('video: ' + event.type);
             });
         });