优化预览图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,57 +1,45 @@
-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',
+$artplayer.innerHTML = 'Drop video file here or click to upload.';
-    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+var thumbnail = new ArtplayerToolThumbnail({
-    title: '【新海诚动画】『秒速5センチメートル』',
+    fileInput: $artplayer,
-    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) {
+thumbnail.on('file', function(file) {
     console.log('Read video successfully: ' + file.name);
-                });
+});
 
-                thumbnail.on('video', function(video) {
+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) {
+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) {
+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) {
+thumbnail.on('download', function(name) {
     console.log('Start download preview: ' + name);
-                });
+});
 
-                thumbnail.on('done', function() {
+thumbnail.on('done', function() {
     $popups.style.display = 'none';
     thumbnail.download();
     console.log('Build preview image complete');
@@ -60,7 +48,7 @@ var art = new Artplayer({
     });
 
     new Artplayer({
-                        container: '.artplayer-app',
+        container: $artplayer,
         url: thumbnail.videoUrl,
         thumbnails: {
             url: thumbnail.thumbnailUrl,
@@ -71,8 +59,4 @@ 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);
             });
         });