update docs

docs/css/common.css

@@ -1,13 +1,24 @@
 .container {
-  width: 900px;
+  width: 800px;
   margin: 0 auto;
   padding: 20px;
 }
 
 .artplayer-app {
-  width: 400px;
+  width: 100%;
-  height: 300px;
+  height: 450px;
-  margin: 0 auto;
+  margin: 0 auto 20px;
+  background: #000;
+}
+
+.error-tip {
+  font-size: 13px;
+  padding: 5px 10px;
+  margin-bottom: 20px;
+  color: red;
+  background: rgba(255, 0, 0, 0.1);
+  border: 1px solid red;
+  border-radius: 3px;
 }
 
 .CodeMirror {
@@ -19,13 +30,3 @@
   padding-left: 7px;
   line-height: 1.25;
 }
-
-.control {
-    margin-bottom: 20px;
-}
-
-.control .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}

docs/index.html

@@ -19,13 +19,10 @@
     <div class="container">
         <div class="artplayer-app"></div>
         <div class="error-tip"></div>
-        <div class="control-list">
+        <div class="control">
-            <div class="control">
+            <div class="code"></div>
-                <div class="header">
+            <div class="bottom">
-                    <div class="title">简单用法</div>
+                <input class="run" type="button" value="执行代码">
-                    <div class="run">运行</div>
-                </div>
-                <div class="code"></div>
             </div>
         </div>
     </div>

docs/js/index.js

@@ -17,29 +17,26 @@ function initApp(app) {
     });
 }
 
-function timeTaken(callback) {
+function runApp() {
-    console.time('timeTaken');
-    const r = callback();
-    console.timeEnd('timeTaken');
-    return r;
-}
-
-var $error = document.querySelector('.error-tip');
-document.querySelector('.run').addEventListener('click', function (e) {
     try {
         Artplayer.instances.forEach(ins => {
             ins.destroy(true)
         });;
-        timeTaken(function () {
+        eval(mirror.getValue());
-            eval(mirror.getValue());
-        });
         initApp(Artplayer.instances[0]);
+        $error.style.display = 'none';
         $error.innerHTML = '';
     } catch (error) {
         var msg = error.message.trim();
+        $error.style.display = 'block';
         $error.innerHTML = '请打开控制台：' + msg;
         console.error(msg);
     }
+}
+
+var $error = document.querySelector('.error-tip');
+document.querySelector('.run').addEventListener('click', function (e) {
+    runApp();
 });
 
 creatCodeMirror(`
@@ -48,3 +45,5 @@ new Artplayer({
     url: 'https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4'
 });
 `);
+
+runApp();