新增 toggleControlBar 和 getControlBarShow 方法

demo/api.md

@@ -12,6 +12,11 @@ jessibuca API 文档
 -
 -
 <Rice/>
+
+## TIPS
+
+这是`开源版`的API文档，这是`开源版`的API文档，这是`开源版`的API文档（三遍），`PRO的API文档`请联系作者。
+
 ## Jessibuca(options)
 
 options 支持的参数有：
@@ -721,6 +726,33 @@ var result = jessibuca.isRecording()
 console.log(result) // true
 ```
 
+### toggleControlBar(isShow)
+
+- **用法**： 切换底部控制条 隐藏/显示
+- **参数**：
+    - `{boolean} isShow` 是否显示
+
+```js
+
+// 显示
+jessibuca.toggleControlBar(true)
+// 隐藏
+jessibuca.toggleControlBar(false)
+
+// 切换 隐藏/显示
+jessibuca.toggleControlBar()
+
+````
+
+### getControlBarShow()
+- **用法**： 获取底部控制条是否显示
+- **返回**：`{boolean}`
+
+```js
+const isShow = jessibuca.getControlBarShow()
+```
+
+
 ### on(event, callback)
 
 - **参数**：

demo/components/DemoPlayer.vue

@@ -59,6 +59,9 @@
                     @change="restartPlay('wasm')"
                 /><span>wasm</span>
             </div>
+            <div class="input">
+                <button @click="toggleControlBar">toggle控制条</button>
+            </div>
             <div class="input">
                 <div>输入URL：</div>
                 <input
@@ -434,6 +437,10 @@ export default {
         scaleChange() {
             this.$options.jessibuca.setScaleMode(this.scale);
         },
+
+        toggleControlBar() {
+            this.$options.jessibuca.toggleControlBar();
+        }
     },
 };
 </script>

demo/components/ProDemoPlayer.vue

@@ -254,6 +254,9 @@
                     /><span>显示性能面板</span>
                 </div>
             </div>
+            <div class="input">
+                <button @click="toggleControlBar">toggle控制条</button>
+            </div>
             <div class="input">
                 <div>输入URL：</div>
                 <input
@@ -1340,7 +1343,11 @@ export default {
             }
 
             jessibuca.clearContentToCanvas();
-        }
+        },
+
+        toggleControlBar(){
+            this.$options.jessibuca.toggleControlBar();
+        },
     },
 };
 </script>

demo/document.md

@@ -2785,8 +2785,25 @@ jessibuca.destroy().then(()=>{
 检查：f12 打开控制台，然后切换到network tab选项卡，然后找到`jessibuca.js`文件，看下`response`返回的内容是否是正常的js文件。
 
 
+### 播放器是否支持IPv6 播放地址
 
+播放器不限制播放的地址，只要是浏览器所在环境支持的地址，播放器都是支持的。
 
+> 前提得保证所在web页面环境能够正常访问IPv6地址，请求能够被响应。
+
+### Mixed Content: The page at 'https://jessibuca.com' was loaded over HTTPS, but requested an insecure resource 'http://xxx.com/xxx.flv'. This request has been blocked; the content must be served over HTTPS.
+
+这个错误是因为页面是https，但是请求的资源是http，浏览器不允许这种请求。
+
+解决方案：
+
+1. 使用 http://jessibuca.monibuca.com/ 地址 代替 https://jessibuca.com 地址
+
+同理，如果是http页面，请求的资源是https，也会报同样的错误。
+
+解决方案
+
+1. 使用 https://jessibuca.com 地址 代替 http://jessibuca.monibuca.com 地址
 
 ## 支持作者
 

demo/pro.md

@@ -331,6 +331,8 @@ H265硬解码，对于电脑硬件支持情况：
 
 支持任意分辨率（720P、1080P、2k、4k）
 
+> SIMD 软解码4k 只支持 3840X2160格式，4096X2160暂不支持
+
 > 分辨力越高，对于解码要求越高，对于浏览器有要求，对于设备有要求。
 
 ## 浏览器支持

src/control/index.js

@@ -4,7 +4,7 @@ import property from './property';
 import events from './events';
 import './style.scss'
 import hotkey from "./hotkey";
-import {removeElement} from "../utils";
+import {getStyle, isBoolean, removeElement, setStyle} from "../utils";
 
 export default class Control {
     constructor(player) {
@@ -68,6 +68,11 @@ export default class Control {
             }
         }
 
+        if(this.player.$container){
+            this.player.$container.classList.remove('jessibuca-controls-show-auto-hide');
+            this.player.$container.classList.remove('jessibuca-controls-show');
+        }
+
         this.player.debug.log('control', 'destroy');
     }
 
@@ -89,5 +94,26 @@ export default class Control {
         }
     }
 
+    toggleBar(flag) {
+        if (this.$controls) {
+            if (!isBoolean(flag)) {
+                // flag = this.$controls.style.display === 'none';
+                flag = getStyle(this.$controls, 'display', false) === 'none';
+            }
 
+            if (flag) {
+                setStyle(this.$controls, 'display', 'flex');
+            } else {
+                setStyle(this.$controls, 'display', 'none');
+            }
+        }
+    }
+
+    getBarIsShow() {
+        let result = false;
+        if (this.$controls) {
+            result = getStyle(this.$controls, 'display', false) !== 'none';
+        }
+        return result;
+    }
 }

src/jessibuca.js

@@ -808,6 +808,27 @@ class Jessibuca extends Emitter {
     }
 
 
+    toggleControlBar(isShow) {
+        if (this.isDestroyed()) {
+            return;
+        }
+
+        if (this.player) {
+            this.player.toggleControlBar(isShow);
+        }
+    }
+
+    getControlBarShow() {
+        if (this.isDestroyed()) {
+            return false;
+        }
+        let result = false;
+        if (this.player) {
+            result = this.player.getControlBarShow();
+        }
+        return result;
+    }
+
 }
 
 

src/player/index.js

@@ -871,4 +871,34 @@ export default class Player extends Emitter {
         this.emit(EVENTS.error, errorType, message);
         this.emit(errorType, message);
     }
+
+    isControlBarShow() {
+        const hasControl = this._opt.hasControl;
+        const controlAutoHide = this._opt.controlAutoHide;
+
+        let result = hasControl && !controlAutoHide;
+
+        if (result) {
+            if (this.control) {
+                result = this.control.getBarIsShow();
+            }
+        }
+
+        return result;
+    }
+
+    getControlBarShow(){
+        let result = false;
+        if (this.control) {
+            result = this.control.getBarIsShow();
+        }
+        return result;
+    }
+
+    toggleControlBar(isShow) {
+        if (this.control) {
+            this.control.toggleBar(isShow);
+            this.resize();
+        }
+    }
 }

src/video/canvasLoader.js

@@ -190,7 +190,7 @@ export default class CanvasVideoLoader extends CommonLoader {
         const option = this.player._opt;
         let width = this.player.width;
         let height = this.player.height;
-        if (option.hasControl && !option.controlAutoHide) {
+        if (this.player.isControlBarShow()) {
             if (isMobile() && this.player.fullscreen && option.useWebFullScreen) {
                 width -= CONTROL_HEIGHT;
             } else {

src/video/videoLoader.js

@@ -215,7 +215,7 @@ export default class VideoLoader extends CommonLoader {
         let height = this.player.height;
         const option = this.player._opt;
         const rotate = option.rotate;
-        if (option.hasControl && !option.controlAutoHide) {
+        if (this.player.isControlBarShow()) {
             if (isMobile() && this.player.fullscreen && option.useWebFullScreen) {
                 width -= CONTROL_HEIGHT;
             } else {