优化预览图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,78 +1,62 @@
-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 => {                
-                var thumbnail = new ArtplayerToolThumbnail({
-                    fileInput: $file,
-                    delay: 300,
-                    number: 60,
-                    width: 160,
-                    height: 90,
-                    column: 10,
-                });
 
-                thumbnail.on('file', function(file) {
-                    console.log('Read video successfully: ' + file.name);
-                });
-
-                thumbnail.on('video', function(video) {
-                    console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
-                    console.log('Video duration: ' + video.duration + 's');
-                    thumbnail.start();
-                });
-
-                thumbnail.on('canvas', function(canvas) {
-                    console.log('Build canvas successfully');
-                    console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
-                    console.log('Preview density: ' + thumbnail.density + ' p/s');
-                });
-
-                thumbnail.on('update', function(url, percentage) {
-                    console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
-                    $popups.style.display = 'flex';
-                    $popinner.style.backgroundImage = 'url(' + url + ')';
-                });
-
-                thumbnail.on('download', function(name) {
-                    console.log('Start download preview: ' + name);
-                });
-
-                thumbnail.on('done', function() {
-                    $popups.style.display = 'none';
-                    thumbnail.download();
-                    console.log('Build preview image complete');
-                    Artplayer.instances.forEach(function(art) {
-                        art.destroy(true);
-                    });
-
-                    new Artplayer({
-                        container: '.artplayer-app',
-                        url: thumbnail.videoUrl,
-                        thumbnails: {
-                            url: thumbnail.thumbnailUrl,
-                            number: thumbnail.option.number,
-                            width: thumbnail.option.width,
-                            height: thumbnail.option.height,
-                            column: thumbnail.option.column,
-                        },
-                    });
-                    console.log('Build player complete');
-                });
-            },
-        },
-    ],
+$artplayer.innerHTML = 'Drop video file here or click to upload.';
+var thumbnail = new ArtplayerToolThumbnail({
+    fileInput: $artplayer,
+    delay: 300,
+    number: 60,
+    width: 160,
+    height: 90,
+    column: 10,
 });
+
+thumbnail.on('file', function(file) {
+    console.log('Read video successfully: ' + file.name);
+});
+
+thumbnail.on('video', function(video) {
+    console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
+    console.log('Video duration: ' + video.duration + 's');
+    thumbnail.start();
+});
+
+thumbnail.on('canvas', function(canvas) {
+    console.log('Build canvas successfully');
+    console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
+    console.log('Preview density: ' + thumbnail.density + ' p/s');
+});
+
+thumbnail.on('update', function(url, percentage) {
+    console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
+    $popups.style.display = 'flex';
+    $popinner.style.backgroundImage = 'url(' + url + ')';
+});
+
+thumbnail.on('download', function(name) {
+    console.log('Start download preview: ' + name);
+});
+
+thumbnail.on('done', function() {
+    $popups.style.display = 'none';
+    thumbnail.download();
+    console.log('Build preview image complete');
+    Artplayer.instances.forEach(function(art) {
+        art.destroy(true);
+    });
+
+    new Artplayer({
+        container: $artplayer,
+        url: thumbnail.videoUrl,
+        thumbnails: {
+            url: thumbnail.thumbnailUrl,
+            number: thumbnail.option.number,
+            width: thumbnail.option.width,
+            height: thumbnail.option.height,
+            column: thumbnail.option.column,
+        },
+    });
+    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);
             });
         });