feat: 旋转功能

h5/src/components/vionPlayer/config.js

@@ -11,17 +11,9 @@ const operateBtns = {
   quality: false, // 视频清晰度
 };
 
-const extendOperateBtns = [{
-  name: 'rotate',
-  index: 1,
-  icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNC43NSIgeT0iNy43NSIgd2lkdGg9IjE0LjUiIGhlaWdodD0iOC41IiByeD0iMS4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPG1hc2sgaWQ9InBhdGgtMi1pbnNpZGUtMV8xMDBfNjYiIGZpbGw9IndoaXRlIj4KPHBhdGggZD0iTTIuMDM5NTEgOC4zNzI2M0MyLjE4NzU2IDcuMjAyMDQgMi43NDQ4MiA2LjEyMTUxIDMuNjEyNzMgNS4zMjIxN0M0LjQ4MDY0IDQuNTIyODMgNS42MDMyOCA0LjA1NjE4IDYuNzgyMDggNC4wMDQ3NUw2LjgzNjU2IDUuMjUzNTFDNS45NTI0NCA1LjI5MjA4IDUuMTEwNDUgNS42NDIwNyA0LjQ1OTUxIDYuMjQxNTlDMy44MDg1NyA2Ljg0MTEgMy4zOTA2MiA3LjY1MTUxIDMuMjc5NTggOC41Mjk0N0wyLjAzOTUxIDguMzcyNjNaIi8+CjwvbWFzaz4KPHBhdGggZD0iTTIuMDM5NTEgOC4zNzI2M0MyLjE4NzU2IDcuMjAyMDQgMi43NDQ4MiA2LjEyMTUxIDMuNjEyNzMgNS4zMjIxN0M0LjQ4MDY0IDQuNTIyODMgNS42MDMyOCA0LjA1NjE4IDYuNzgyMDggNC4wMDQ3NUw2LjgzNjU2IDUuMjUzNTFDNS45NTI0NCA1LjI5MjA4IDUuMTEwNDUgNS42NDIwNyA0LjQ1OTUxIDYuMjQxNTlDMy44MDg1NyA2Ljg0MTEgMy4zOTA2MiA3LjY1MTUxIDMuMjc5NTggOC41Mjk0N0wyLjAzOTUxIDguMzcyNjNaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIG1hc2s9InVybCgjcGF0aC0yLWluc2lkZS0xXzEwMF82NikiLz4KPHBhdGggZD0iTTkgNC41TDYuNzUgNS43OTkwNFYzLjIwMDk2TDkgNC41WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==',
-  iconTitle: '旋转',
-  click: () => {
-    console.log('点击了test按钮');
-  }
-}];
+const extendOperateBtns = [];
 
-export default function() {
+export function getPlayerConfig () {
   return {
     decoder: '/jessibuca-pro/decoder-pro.js',
     text: '', // TODO: 功能暂不清楚
@@ -53,7 +45,7 @@ export default function() {
       text: '',
     },
     operateBtns,
-    extendOperateBtns,
+    extendOperateBtns: [],
     showPerformance: false, // 显示性能
     qualityConfig: ['标清', '高清'],
 
@@ -66,3 +58,13 @@ export default function() {
     ptzFocusShow: true,
   }
 }
+
+export function getRotateConfig() {
+  return {
+    name: 'rotate',
+    index: 1,
+    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNC43NSIgeT0iNy43NSIgd2lkdGg9IjE0LjUiIGhlaWdodD0iOC41IiByeD0iMS4yNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPG1hc2sgaWQ9InBhdGgtMi1pbnNpZGUtMV8xMDBfNjYiIGZpbGw9IndoaXRlIj4KPHBhdGggZD0iTTIuMDM5NTEgOC4zNzI2M0MyLjE4NzU2IDcuMjAyMDQgMi43NDQ4MiA2LjEyMTUxIDMuNjEyNzMgNS4zMjIxN0M0LjQ4MDY0IDQuNTIyODMgNS42MDMyOCA0LjA1NjE4IDYuNzgyMDggNC4wMDQ3NUw2LjgzNjU2IDUuMjUzNTFDNS45NTI0NCA1LjI5MjA4IDUuMTEwNDUgNS42NDIwNyA0LjQ1OTUxIDYuMjQxNTlDMy44MDg1NyA2Ljg0MTEgMy4zOTA2MiA3LjY1MTUxIDMuMjc5NTggOC41Mjk0N0wyLjAzOTUxIDguMzcyNjNaIi8+CjwvbWFzaz4KPHBhdGggZD0iTTIuMDM5NTEgOC4zNzI2M0MyLjE4NzU2IDcuMjAyMDQgMi43NDQ4MiA2LjEyMTUxIDMuNjEyNzMgNS4zMjIxN0M0LjQ4MDY0IDQuNTIyODMgNS42MDMyOCA0LjA1NjE4IDYuNzgyMDggNC4wMDQ3NUw2LjgzNjU2IDUuMjUzNTFDNS45NTI0NCA1LjI5MjA4IDUuMTEwNDUgNS42NDIwNyA0LjQ1OTUxIDYuMjQxNTlDMy44MDg1NyA2Ljg0MTEgMy4zOTA2MiA3LjY1MTUxIDMuMjc5NTggOC41Mjk0N0wyLjAzOTUxIDguMzcyNjNaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIG1hc2s9InVybCgjcGF0aC0yLWluc2lkZS0xXzEwMF82NikiLz4KPHBhdGggZD0iTTkgNC41TDYuNzUgNS43OTkwNFYzLjIwMDk2TDkgNC41WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==',
+    iconTitle: '旋转',
+    click: this.rotate,
+  }
+}

h5/src/components/vionPlayer/index.vue

@@ -6,7 +6,7 @@
 import { merge } from 'lodash';
 // checkSupportMSEHevc checkSupportSIMD, checkSupportWCSHevc
 import { getWatermarkCanvasImg } from './utils';
-import getPlayerConfig from './config';
+import { getPlayerConfig, getRotateConfig } from './config';
 
 export default {
   name: 'VionPlayer',
@@ -75,6 +75,7 @@ export default {
           record: !this.isXCXPage, // 录制
           scale: !this.isXCXPage, // 显示模式：拉伸、缩放、正常
         },
+        extendOperateBtns: [getRotateConfig.call(this)],
       });
 
       console.log('init-options', options);