添加长宽比和播放速度

src/contextmenu.js

@@ -8,15 +8,41 @@ export default class Contextmenu {
   }
 
   init() {
-    const {
-      option,
-      i18n,
-      refs,
-      events: { proxy }
-    } = this.art;
+    const { option, player, i18n, refs, events: { proxy } } = this.art;
 
     option.contextmenu.push(
       {
+        disable: !option.playbackRate,
+        name: 'playbackRate',
+        html: `${i18n.get('Play speed')}: <span>0.5</span><span>0.75</span><span class="current">1.0</span><span>1.25</span><span>1.5</span><span>2.0</span>`,
+        click: (art, event) => {
+          const { target } = event;
+          const rate = Number(target.innerText);
+          if (rate && typeof rate === 'number') {
+            player.playbackRate(rate);
+            const sublings = Array.from(target.parentElement.querySelectorAll('span')).filter(item => item !== target);
+            sublings.forEach(item => item.classList.remove('current'));
+            target.classList.add('current');
+          }
+        }
+      },
+      {
+        disable: !option.aspectRatio,
+        name: 'aspectRatio',
+        html: `${i18n.get('Aspect ratio')}: <span class="current">${i18n.get('Default')}</span><span>4:3</span><span>16:9</span>`,
+        click: (art, event) => {
+          const { target } = event;
+          const ratio = target.innerText;
+          if (ratio) {
+            player.aspectRatio(ratio.split(':'));
+            const sublings = Array.from(target.parentElement.querySelectorAll('span')).filter(item => item !== target);
+            sublings.forEach(item => item.classList.remove('current'));
+            target.classList.add('current');
+          }
+        }
+      },
+      {
+        disable: false,
         name: 'info',
         html: i18n.get('Video info'),
         click: () => {
@@ -24,10 +50,12 @@ export default class Contextmenu {
         }
       },
       {
+        disable: false,
         name: 'version',
         html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer __VERSION__</a>'
       },
       {
+        disable: false,
         name: 'close',
         html: i18n.get('Close'),
         click: () => {
@@ -54,30 +82,28 @@ export default class Contextmenu {
   }
 
   creatMenu() {
-    const {
-      option,
-      refs,
-      events: { proxy }
-    } = this.art;
+    const { option, refs, events: { proxy } } = this.art;
     refs.$contextmenu = document.createElement('div');
     refs.$contextmenu.classList.add('artplayer-contextmenu');
-    option.contextmenu.forEach(item => {
-      id++;
-      const $menu = document.createElement('div');
-      $menu.setAttribute('data-art-menu-id', id);
-      $menu.setAttribute('class', `art-menu art-menu-${item.name || id}`);
-      append($menu, item.html);
-      setStyle($menu, item.style || {});
-      if (item.click) {
-        proxy($menu, 'click', event => {
-          event.preventDefault();
-          item.click(this.art, event);
-          this.hide();
-          this.art.emit('contextmenu:click', $menu);
-        });
-      }
-      append(refs.$contextmenu, $menu);
-    });
+    option.contextmenu
+      .filter(item => !item.disable)
+      .forEach(item => {
+        id++;
+        const $menu = document.createElement('div');
+        $menu.setAttribute('data-art-menu-id', id);
+        $menu.setAttribute('class', `art-menu art-menu-${item.name || id}`);
+        append($menu, item.html);
+        setStyle($menu, item.style || {});
+        if (item.click) {
+          proxy($menu, 'click', event => {
+            event.preventDefault();
+            item.click(this.art, event);
+            this.hide();
+            this.art.emit('contextmenu:click', $menu);
+          });
+        }
+        append(refs.$contextmenu, $menu);
+      });
     append(refs.$player, refs.$contextmenu);
   }
 

src/controls/index.js

@@ -15,7 +15,7 @@ export default class Controls {
   constructor(art) {
     this.art = art;
     this.$map = {};
-    this.art.on('video:firstload', () => {
+    this.art.on('player:firstCanplay', () => {
       this.init();
       this.mount();
     });

src/i18n.js

@@ -12,7 +12,10 @@ let i18nMap = {
     'Reconnect': '重新连接',
     'Hide subtitle': '隐藏字幕',
     'Show subtitle': '显示字幕',
-    'Screenshot': '截图'
+    'Screenshot': '截图',
+    'Play speed': '播放速度',
+    'Aspect ratio': '画面比例',
+    'Default': '默认'
   },
   'zh-tw': {
     'About author': '關於作者',
@@ -27,7 +30,10 @@ let i18nMap = {
     'Reconnect': '重新連接',
     'Hide subtitle': '隱藏字幕',
     'Show subtitle': '顯示字幕',
-    'Screenshot': '截圖'
+    'Screenshot': '截圖',
+    'Play speed': '播放速度',
+    'Aspect ratio': '畫面比例',
+    'Default': '默認'
   }
 };
 

src/index.js

@@ -55,6 +55,8 @@ class Artplayer extends Emitter {
       },
       screenshot: true,
       autoplay: false,
+      playbackRate: true,
+      aspectRatio: true,
       loop: false,
       type: '',
       mimeCodec: '',

src/info.js

@@ -106,14 +106,19 @@ export default class Info {
     });
   }
 
-  loop() {
+  readInfo() {
     const { $infoPanel, $video } = this.art.refs;
+    const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
+    types.forEach(item => {
+      const value = $video[item.dataset.video];
+      item.innerHTML = value !== undefined ? value : 'unknown';
+    });
+  }
+
+  loop() {
+    this.readInfo();
     this.timer = setTimeout(() => {
-      const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
-      types.forEach(item => {
-        const value = $video[item.dataset.video];
-        item.innerHTML = value !== undefined ? value : 'unknown';
-      });
+      this.readInfo();
       this.loop();
     }, 1000);
   }

src/player.js

@@ -6,7 +6,7 @@ export default class Player {
     this.art = art;
     this.init();
     this.eventBind();
-    this.firstLoad = false;
+    this.firstCanplay = false;
     this.reconnectTime = 0;
     this.maxReconnectTime = 5;
   }
@@ -51,9 +51,9 @@ export default class Player {
     });
 
     this.art.on('video:canplay', () => {
-      if (!this.firstLoad) {
-        this.firstLoad = true;
-        this.art.emit('video:firstload');
+      if (!this.firstCanplay) {
+        this.firstCanplay = true;
+        this.art.emit('player:firstCanplay');
       }
 
       this.art.controls.show();
@@ -166,10 +166,30 @@ export default class Player {
   }
 
   playbackRate(rate) {
-    const { refs: { $video }, i18n, notice } = this.art;
+    const { refs: { $video, $player }, i18n, notice } = this.art;
     const newRate = clamp(rate, 0.1, 10);
     $video.playbackRate = newRate;
+    $player.dataset.playbackRate = newRate;
     notice.show(`${i18n.get('Rate')}: ${newRate}x`);
     this.art.emit('playbackRate', newRate);
   }
+
+  aspectRatio(ratio) {
+    const { refs: { $video, $player }, i18n, notice } = this.art;
+    if (ratio.length === 2) {
+      const rate = Number(ratio[0]) / Number(ratio[1]);
+      $video.style.width = `${100 / rate}%`;
+      $video.style.height = '100%';
+      $video.style.padding = `0 ${($player.clientWidth - $player.clientWidth / rate) / 2}px`;
+    } else {
+      $video.style.width = null;
+      $video.style.height = null;
+      $video.style.padding = null;
+    }
+
+    const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : ratio[0];
+    $player.dataset.aspectRatio = ratioName;
+    notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
+    this.art.emit('aspectRatio', ratio);
+  }
 }

src/style/aspectRatio.scss

@@ -0,0 +1,8 @@
+.artplayer-video-player {
+    &[data-aspect-ratio] {
+        video {
+            box-sizing: content-box;
+            object-fit: fill;
+        }
+    }
+}

src/style/contextmenu.scss

@@ -4,9 +4,11 @@
         z-index: 70;
         left: 0;
         top: 0;
-        width: 200px;
+        min-width: 200px;
         padding: 5px 0;
         background:rgba(0, 0, 0, 0.8);
+        border-radius: 3px;
+
         .art-menu {
             cursor: pointer;
             font-size: 13px;
@@ -17,16 +19,28 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+            border-bottom: 1px solid rgba(255,255,255,.1);
 
             a {
                 color: #fff;
                 text-decoration: none;
             }
     
+            span {
+                display: inline-block;
+                padding: 0 7px;
+                &:hover, &.current {
+                    color: #00c9ff;
+                }
+            }
+
             &:hover {
                 background-color: rgba(255,255,255,.1);
             }
+
+            &:last-child {
+                border-bottom: none;
+            }
         }
     }
-    
 }

src/style/index.js

@@ -8,3 +8,4 @@ import './bottom.scss';
 import './notice.scss';
 import './contextmenu.scss';
 import './info.scss';
+import './aspectRatio.scss';

src/verification/scheme.js

@@ -61,6 +61,12 @@ export default {
   autoplay: {
     type: 'boolean'
   },
+  playbackRate: {
+    type: 'boolean'
+  },
+  aspectRatio: {
+    type: 'boolean'
+  },
   loop: {
     type: 'boolean'
   },