update docs

docs/css/common.css

@@ -1,32 +1,88 @@
+html, body {
+  height: 100%;
+}
+
 .container {
-  width: 800px;
+  display: flex;
-  margin: 0 auto;
+  height: 100%;
-  padding: 20px;
 }
 
-.artplayer-app {
+.part-left {
-  width: 100%;
+  display: flex;
-  height: 450px;
+  flex-direction: column;
-  margin: 0 auto 20px;
+  width: 700px;
-  background: #000;
+  border-right: 1px solid #ddd;
 }
 
-.error-tip {
+.part-right {
-  font-size: 13px;
+  display: flex;
-  padding: 5px 10px;
+  flex-direction: column;
-  margin-bottom: 20px;
+  flex: 1;
-  color: red;
+  overflow: hidden;
-  background: rgba(255, 0, 0, 0.1);
-  border: 1px solid red;
-  border-radius: 3px;
 }
 
-.CodeMirror {
+.part-left .controls {
-  height: auto;
+  display: flex;
-  border: 1px solid #ddd;
+  align-items: center;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 20px;
+  border-bottom: 1px solid #ddd;
+  box-sizing: border-box;
 }
 
-.CodeMirror pre {
+.part-left .controls .menus {
+  height: 30px;
+  line-height: 30px;
+  flex: 1;
+}
+
+.part-left .controls .run {
+  height: 30px;
+  width: 100px;
+}
+
+.part-left .code {
+  flex: 1;
+  overflow: auto;
+}
+
+.part-left .code .CodeMirror {
+  height: 100%;
+}
+
+.part-left .code .CodeMirror pre {
   padding-left: 7px;
   line-height: 1.25;
-}
+}
+
+.part-right .video-wrap {
+  display: flex;
+  height: 70%;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #ddd;
+}
+
+.part-right .video-wrap .artplayer-app {
+    width: 800px;
+    height: 450px;
+}
+
+.part-right .console {
+  height: 30%;
+}
+
+.part-right .console textarea {
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 14px;
+  line-height: 1.5;
+  height: 100%;
+  width: 100%;
+  padding: 10px 20px;
+  overflow-y: scroll;
+  border: none;
+  outline: none;
+  resize: none;
+  box-sizing: border-box;
+}

docs/index.html

@@ -17,12 +17,21 @@
 
 <body>
     <div class="container">
-        <div class="artplayer-app"></div>
+        <div class="part-left">
-        <div class="error-tip"></div>
+            <div class="controls">
-        <div class="control">
+                <div class="menus">
+                    menu
+                </div>
+                <input class="run" type="button" value="Run Code">
+            </div>
             <div class="code"></div>
-            <div class="bottom">
+        </div>
-                <input class="run" type="button" value="执行代码">
+        <div class="part-right">
+            <div class="video-wrap">
+                <div class="artplayer-app"></div>
+            </div>
+            <div class="console">
+                <textarea class="textarea" disabled></textarea>
             </div>
         </div>
     </div>

docs/js/artplayer.js

@@ -4903,7 +4903,7 @@
             height: 90,
             column: 10
           },
-          screenshot: true,
+          screenshot: false,
           autoplay: false,
           playbackRate: true,
           aspectRatio: true,
@@ -4918,7 +4918,7 @@
           theme: '#f00',
           setting: false,
           hotkey: true,
-          pip: true,
+          pip: false,
           mutex: true,
           fullscreen: true,
           fullscreenWeb: true,

docs/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/validStringEmpty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loaLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/validStringEmpty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loaLine truncated

docs/js/index.js

@@ -1,49 +1,102 @@
-var mirror = CodeMirror(document.querySelector(`.code`), {
+var $code = document.querySelector('.code');
+var $run = document.querySelector('.run');
+var $textarea = document.querySelector('.textarea');
+
+var mirror = CodeMirror($code, {
     lineNumbers: true,
     mode: 'javascript',
     matchBrackets: true,
     value: ''
 });;
 
-function creatCodeMirror(value) {
+function setCode(value) {
     mirror.setValue(value.trim());
 }
 
+function log(msg) {
+    msg = typeof msg === 'string' ? msg : JSON.stringify(msg);
+    $textarea.value = $textarea.value + '\n' + msg;
+    $textarea.scrollTop = $textarea.scrollHeight;
+}
+
 function initApp(app) {
     Artplayer.config.video.events.forEach(item => {
         app.on('video:' + item, event => {
-            console.log('video: ' + event.type);
+            log('video: ' + event.type);
         });
     });
 }
 
-function runApp() {
+function runCode() {
     try {
         Artplayer.instances.forEach(ins => {
             ins.destroy(true)
         });;
         eval(mirror.getValue());
         initApp(Artplayer.instances[0]);
-        $error.style.display = 'none';
-        $error.innerHTML = '';
     } catch (error) {
         var msg = error.message.trim();
-        $error.style.display = 'block';
+        log('运行错误：' + msg);
-        $error.innerHTML = '请打开控制台：' + msg;
-        console.error(msg);
     }
 }
 
-var $error = document.querySelector('.error-tip');
+$run.addEventListener('click', function (e) {
-document.querySelector('.run').addEventListener('click', function (e) {
+    runCode();
-    runApp();
 });
 
-creatCodeMirror(`
+setCode(`
-new Artplayer({
+var url = 'https://blog.zhw-island.com/assets-cdn';
+var app = new Artplayer({
     container: '.artplayer-app',
-    url: 'https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4'
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
+    pip: true,
+    theme: '#ffad00',
+    quality: [
+        {
+            default: true,
+            name: '标清 480P',
+            url: url + '/video/one-more-time-one-more-chance-480p.mp4'
+        },
+        {
+            name: '高清 720P',
+            url: url + '/video/one-more-time-one-more-chance-720p.mp4'
+        }
+    ],
+    thumbnails: {
+        url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
+        width: 190,
+        height: 107
+    },
+    subtitle: {
+        url: url + '/subtitle/one-more-time-one-more-chance.srt',
+        style: {
+            color: '#03A9F4'
+        }
+    },
+    highlight: [
+        {
+            time: 60,
+            text: 'One more chance'
+        },
+        {
+            time: 120,
+            text: '谁でもいいはずなのに'
+        },
+        {
+            time: 180,
+            text: '夏の想い出がまわる'
+        },
+        {
+            time: 240,
+            text: 'こんなとこにあるはずもないのに'
+        },
+        {
+            time: 300,
+            text: '－－终わり－－'
+        }
+    ]
 });
 `);
 
-runApp();
+runCode();

packages/artplayer/src/index.js

@@ -57,7 +57,7 @@ class Artplayer extends Emitter {
         height: 90,
         column: 10
       },
-      screenshot: true,
+      screenshot: false,
       autoplay: false,
       playbackRate: true,
       aspectRatio: true,
@@ -72,7 +72,7 @@ class Artplayer extends Emitter {
       theme: '#f00',
       setting: false,
       hotkey: true,
-      pip: true,
+      pip: false,
       mutex: true,
       fullscreen: true,
       fullscreenWeb: true,