优化演示

docs/css/common.css

@@ -31,12 +31,16 @@ html, body {
   box-sizing: border-box;
 }
 
-.part-left .controls .logo {
-  height: 30px;
-  line-height: 30px;
+.part-left .controls .left {
+  display: flex;
+  align-items: center;
   flex: 1;
 }
 
+.part-left .controls .left .logo {
+  padding-right: 30px;
+}
+
 .part-left .controls .run {
   height: 30px;
   width: 100px;
@@ -64,6 +68,10 @@ html, body {
   border-bottom: 1px solid #ddd;
 }
 
+.part-right .video-wrap.dark {
+  background: #000;
+}
+
 .part-right .video-wrap .artplayer-app {
     width: 90%;
     height: 60%;

docs/index.html

@@ -20,7 +20,11 @@
     <div class="container">
         <div class="part-left">
             <div class="controls">
-                <div class="logo">ArtPlayer.js</div>
+                <div class="left">
+                    <a href="https://github.com/zhw2590582/ArtPlayer" class="logo" target="_blank">ArtPlayer.js</a>
+                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+                    <iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+                </div>
                 <input class="run" type="button" value="Run Code">
             </div>
             <div class="code"></div>

docs/js/index.js

@@ -7,6 +7,15 @@ var app = new Artplayer({
   pip: true,
   autoSize: true,
   theme: '#ffad00',
+  contextmenu: [
+      {
+          html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
+          click: function() {
+            document.querySelector('.video-wrap').classList.toggle('dark');
+            this.hide();
+          }
+      }
+  ],
   quality: [
     {
       default: true,