@besovideo/webrtc-player 0.7.3 → 0.8.0

package/README.md

@@ -1,268 +1,268 @@
-# @besovideo/webrtc-player
-
-![npm](https://img.shields.io/npm/v/@besovideo/webrtc-player) ![NPM](https://img.shields.io/npm/l/@besovideo/webrtc-player) ![npm](https://img.shields.io/npm/dt/@besovideo/webrtc-player)
-
-[![NPM](https://nodei.co/npm/@besovideo/webrtc-player.png)](https://nodei.co/npm/@besovideo/webrtc-player/)
-
-## 简介 Introduction
-
-> 设备视频播放、对讲封装
-
-## 安装 Installation
-
-**use npm**
-
-```shell
-npm i @besovideo/webrtc-player
-```
-
-**use yarn**
-
-```
-yarn add @besovideo/webrtc-player
-```
-
-## 示例 Example
-
-**视频**
-
-```typescript
-import {
-  PuPlayer,
-  IPuPlayerProps,
-  IPuPlayerInstance,
-  clearAllDialog,
-} from "@besovideo/webrtc-player";
-import "@besovideo/webrtc-player/dist/main.es.css";
-
-const { instance } = PuPlayer({
-  // (可选) 容器节点 注意一个容器内只能存在一个实例  当container为假值（包括false、null、undefined）时 将返回实例引用的dom节点 容器必须指定高度 参考高德地图
-  container: document.getElementById("player_container"),
-  // 必填 设备选项
-  puOption: {
-    // 设备id
-    id: "PU_123456",
-    // 设备通道号
-    index: 0,
-  },
-  // 必填 用户授权令牌
-  token: "Y3UrQ1VfYWRtestYDHYUAStest",
-  // (可选) peer connection 连接媒体配置
-  defaultMediaOption: {
-    // 启用音频
-    audio: true,
-    // 启用视频
-    video: true,
-  },
-  // (可选) 是否静音
-  muted: false,
-  // (可选) 指定video如何适应容器 (fill: 填充容器 ; contain :保持视频比例适应容器)
-  videoFit: "fill",
-  // (可选) 指定请求url路径前缀 可使用protocol+host 如：http://192.168.6.111:9780
-  // apiPrefix: "/test_api/prefix",
-
-  // (可选) 用于测试播放视频 (存在时优先使用url播放，为浏览器直接播放)
-  // testUrl: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4",
-  // (可选) 连接建立后回调
-  onConnected: () => {},
-  // (可选) 连接建立失败时的回调
-  onConnectedFailed: () => {},
-  // (可选) 连接断开后回调
-  onDisConnected: () => {},
-  // (可选) 双击是否全屏
-  fullScreenOnDblclick: true,
-  // (可选) 启用控制器
-  enableController: false
-});
-
-// setVideoFit 更改videoFit
-instance.setVideoFit("contain");
-// setToken 更改请求时的token
-instance.setToken("newTTTTToken");
-// setPuOption 更改请求的设备信息
-instance.setPuOption({
-  id: "PU_12345test",
-  index: 123,
-});
-// setApiPrefix 更改请求时的url前缀
-instance.setApiPrefix("/测试改前缀");
-// open 异步 先关闭再开始建立连接 (可选参数: muted:boolean = false 是否静音打开)
-instance.open();
-// close 异步 释放dialog 并关闭 当前的 peer connection
-instance.close();
-// destroy 执行close 并从dom移除PuPlayer节点
-instance.destroy();
-// moveTo 将节点移动至新的容器
-instance.moveTo(document.getElementById("new_player_container"));
-// getCurrentContainer 获得当前所在的容器
-instance.getCurrentContainer();
-// hidden 隐藏 异步 (可选参数: muted?:boolean 是否静音 可不传)
-instance.hidden(true);
-// display 显示 (可选参数: muted?:boolean 是否静音 可不传)
-instance.display();
-// play 播放 异步
-instance.play();
-// mute 切换静音 (可选参数: muted:boolean = false 是否静音)
-instance.mute(true);
-// 获取puPlayer的div
-instance.getPlayerElement();
-// 获取内部引用的video元素
-instance.getVideoElement();
-
-// clearAllDialog 异步 释放全部打开的dialog 不管是音视频还是对讲
-clearAllDialog();
-```
-
-**对讲**
-
-```typescript
-import {
-  Intercom,
-  IIntercomProps,
-  IIntercomInstance,
-} from "@besovideo/webrtc-player";
-import "@besovideo/webrtc-player/dist/main.es.css";
-
-const { instance } = Intercom({
-  // 必填 设备选项
-  puOption: {
-    // 设备id
-    id: "PU_123456",
-    // 设备通道号
-    index: 0,
-  },
-  // 必填 用户授权令牌
-  token: "Y3UrQ1VfYWRtestYDHYUAStest",
-  // (可选) 连接建立后回调
-  onConnected: () => {},
-  // (可选) 连接建立失败时的回调
-  onConnectedFailed: () => {},
-  // (可选) 连接断开后回调
-  onDisConnected: () => {},
-  //(可选) 无法获取用户麦克风时
-  onGetUserMediaFailed: () => {},
-  // (可选) 指定请求url的前缀 方便代理请求
-  // apiPrefix: "/test_api/prefix",
-});
-```
-
-**会议**
-
-```typescript
-import {
-  Conference,
-  IConferenceProps,
-  IConferenceInstance,
-} from "@besovideo/webrtc-player";
-import "@besovideo/webrtc-player/dist/main.es.css";
-
-const { instance } = Conference({
-  // 必填 设备选项
-  confOption: {
-    // 会议id
-    id: "test89312",
-    // 会议成员ID
-    index: 0,
-  },
-  // 必填 用户授权令牌
-  token: "Y3UrQ1VfYWRtestYDHYUAStest",
-  // (可选) 连接建立后回调
-  onConnected: () => {},
-  // (可选) 连接建立失败时的回调
-  onConnectedFailed: () => {},
-  // (可选) 连接断开后回调
-  onDisConnected: () => {},
-  //(可选) 无法获取用户麦克风时
-  onGetUserMediaFailed: () => {},
-  // (可选) 指定请求url的前缀 方便代理请求
-  // apiPrefix: "/test_api/prefix",
-});
-```
-
-**Vue 示例**
-
-```vue
-<template>
-  <div ref="testRef" class="container"></div>
-  <div ref="test2Ref" class="container2"></div>
-  <button @click="close">关闭</button>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, ref } from "vue";
-import { PuPlayer, IPuPlayerInstance } from "@besovideo/webrtc-player";
-import "@besovideo/webrtc-player/dist/main.es.css";
-
-export default defineComponent({
-  name: "Test",
-  props: {
-    // 设备id号
-    puId: {
-      type: String,
-      required: true,
-    },
-    // 设备通道号
-    index: {
-      type: Number,
-      required: true,
-    },
-  },
-  setup(props) {
-    const testRef = ref(null);
-    const test2Ref = ref(null);
-    const instanceRef = ref<IPuPlayerInstance | null>(null);
-
-    const init = async () => {
-      const { instance } = PuPlayer({
-        container: testRef.value,
-        puOption: { id: props.puId, index: props.index },
-        token:
-          "Y3UrQ1VfYWRtaW4rYWRtaW4rMTQzOSsxOTMwMTUrMTYyNTIwMjU3OCthN2I0Y2JiZDliMzkwZWUy",
-      });
-      console.log("初始化播放器完成：", instance);
-      instanceRef.value = instance;
-
-      try {
-        await instance.open();
-      } catch (e) {}
-
-      setTimeout(() => {
-        // 测试移动到另一个容器内
-        console.log("移动节点");
-        instance.moveTo(test2Ref.value);
-      }, 5000);
-    };
-
-    onMounted(() => {
-      init();
-    });
-
-    return {
-      testRef,
-      test2Ref,
-      close: () => instanceRef.value?.close(),
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-  height: 300px;
-}
-</style>
-```
-
-## 开发 Dev
-
-```shell
-# 开发运行
-yarn
-yarn start
-
-# 打包和发布
-make publish
-
-```
-
-[环境变量切换方式](https://github.com/entropitor/dotenv-cli/pull/44)
+# @besovideo/webrtc-player
+
+![npm](https://img.shields.io/npm/v/@besovideo/webrtc-player) ![NPM](https://img.shields.io/npm/l/@besovideo/webrtc-player) ![npm](https://img.shields.io/npm/dt/@besovideo/webrtc-player)
+
+[![NPM](https://nodei.co/npm/@besovideo/webrtc-player.png)](https://nodei.co/npm/@besovideo/webrtc-player/)
+
+## 简介 Introduction
+
+> 设备视频播放、对讲封装
+
+## 安装 Installation
+
+**use npm**
+
+```shell
+npm i @besovideo/webrtc-player
+```
+
+**use yarn**
+
+```
+yarn add @besovideo/webrtc-player
+```
+
+## 示例 Example
+
+**视频**
+
+```typescript
+import {
+  PuPlayer,
+  IPuPlayerProps,
+  IPuPlayerInstance,
+  clearAllDialog,
+} from "@besovideo/webrtc-player";
+import "@besovideo/webrtc-player/dist/main.es.css";
+
+const { instance } = PuPlayer({
+  // (可选) 容器节点 注意一个容器内只能存在一个实例  当container为假值（包括false、null、undefined）时 将返回实例引用的dom节点 容器必须指定高度 参考高德地图
+  container: document.getElementById("player_container"),
+  // 必填 设备选项
+  puOption: {
+    // 设备id
+    id: "PU_123456",
+    // 设备通道号
+    index: 0,
+  },
+  // 必填 用户授权令牌
+  token: "Y3UrQ1VfYWRtestYDHYUAStest",
+  // (可选) peer connection 连接媒体配置
+  defaultMediaOption: {
+    // 启用音频
+    audio: true,
+    // 启用视频
+    video: true,
+  },
+  // (可选) 是否静音
+  muted: false,
+  // (可选) 指定video如何适应容器 (fill: 填充容器 ; contain :保持视频比例适应容器)
+  videoFit: "fill",
+  // (可选) 指定请求url路径前缀 可使用protocol+host 如：http://192.168.6.111:9780
+  // apiPrefix: "/test_api/prefix",
+
+  // (可选) 用于测试播放视频 (存在时优先使用url播放，为浏览器直接播放)
+  // testUrl: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4",
+  // (可选) 连接建立后回调
+  onConnected: () => {},
+  // (可选) 连接建立失败时的回调
+  onConnectedFailed: () => {},
+  // (可选) 连接断开后回调
+  onDisConnected: () => {},
+  // (可选) 双击是否全屏
+  fullScreenOnDblclick: true,
+  // (可选) 启用控制器
+  enableController: false
+});
+
+// setVideoFit 更改videoFit
+instance.setVideoFit("contain");
+// setToken 更改请求时的token
+instance.setToken("newTTTTToken");
+// setPuOption 更改请求的设备信息
+instance.setPuOption({
+  id: "PU_12345test",
+  index: 123,
+});
+// setApiPrefix 更改请求时的url前缀
+instance.setApiPrefix("/测试改前缀");
+// open 异步 先关闭再开始建立连接 (可选参数: muted:boolean = false 是否静音打开)
+instance.open();
+// close 异步 释放dialog 并关闭 当前的 peer connection
+instance.close();
+// destroy 执行close 并从dom移除PuPlayer节点
+instance.destroy();
+// moveTo 将节点移动至新的容器
+instance.moveTo(document.getElementById("new_player_container"));
+// getCurrentContainer 获得当前所在的容器
+instance.getCurrentContainer();
+// hidden 隐藏 异步 (可选参数: muted?:boolean 是否静音 可不传)
+instance.hidden(true);
+// display 显示 (可选参数: muted?:boolean 是否静音 可不传)
+instance.display();
+// play 播放 异步
+instance.play();
+// mute 切换静音 (可选参数: muted:boolean = false 是否静音)
+instance.mute(true);
+// 获取puPlayer的div
+instance.getPlayerElement();
+// 获取内部引用的video元素
+instance.getVideoElement();
+
+// clearAllDialog 异步 释放全部打开的dialog 不管是音视频还是对讲
+clearAllDialog();
+```
+
+**对讲**
+
+```typescript
+import {
+  Intercom,
+  IIntercomProps,
+  IIntercomInstance,
+} from "@besovideo/webrtc-player";
+import "@besovideo/webrtc-player/dist/main.es.css";
+
+const { instance } = Intercom({
+  // 必填 设备选项
+  puOption: {
+    // 设备id
+    id: "PU_123456",
+    // 设备通道号
+    index: 0,
+  },
+  // 必填 用户授权令牌
+  token: "Y3UrQ1VfYWRtestYDHYUAStest",
+  // (可选) 连接建立后回调
+  onConnected: () => {},
+  // (可选) 连接建立失败时的回调
+  onConnectedFailed: () => {},
+  // (可选) 连接断开后回调
+  onDisConnected: () => {},
+  //(可选) 无法获取用户麦克风时
+  onGetUserMediaFailed: () => {},
+  // (可选) 指定请求url的前缀 方便代理请求
+  // apiPrefix: "/test_api/prefix",
+});
+```
+
+**会议**
+
+```typescript
+import {
+  Conference,
+  IConferenceProps,
+  IConferenceInstance,
+} from "@besovideo/webrtc-player";
+import "@besovideo/webrtc-player/dist/main.es.css";
+
+const { instance } = Conference({
+  // 必填 设备选项
+  confOption: {
+    // 会议id
+    id: "test89312",
+    // 会议成员ID
+    index: 0,
+  },
+  // 必填 用户授权令牌
+  token: "Y3UrQ1VfYWRtestYDHYUAStest",
+  // (可选) 连接建立后回调
+  onConnected: () => {},
+  // (可选) 连接建立失败时的回调
+  onConnectedFailed: () => {},
+  // (可选) 连接断开后回调
+  onDisConnected: () => {},
+  //(可选) 无法获取用户麦克风时
+  onGetUserMediaFailed: () => {},
+  // (可选) 指定请求url的前缀 方便代理请求
+  // apiPrefix: "/test_api/prefix",
+});
+```
+
+**Vue 示例**
+
+```vue
+<template>
+  <div ref="testRef" class="container"></div>
+  <div ref="test2Ref" class="container2"></div>
+  <button @click="close">关闭</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from "vue";
+import { PuPlayer, IPuPlayerInstance } from "@besovideo/webrtc-player";
+import "@besovideo/webrtc-player/dist/main.es.css";
+
+export default defineComponent({
+  name: "Test",
+  props: {
+    // 设备id号
+    puId: {
+      type: String,
+      required: true,
+    },
+    // 设备通道号
+    index: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup(props) {
+    const testRef = ref(null);
+    const test2Ref = ref(null);
+    const instanceRef = ref<IPuPlayerInstance | null>(null);
+
+    const init = async () => {
+      const { instance } = PuPlayer({
+        container: testRef.value,
+        puOption: { id: props.puId, index: props.index },
+        token:
+          "Y3UrQ1VfYWRtaW4rYWRtaW4rMTQzOSsxOTMwMTUrMTYyNTIwMjU3OCthN2I0Y2JiZDliMzkwZWUy",
+      });
+      console.log("初始化播放器完成：", instance);
+      instanceRef.value = instance;
+
+      try {
+        await instance.open();
+      } catch (e) {}
+
+      setTimeout(() => {
+        // 测试移动到另一个容器内
+        console.log("移动节点");
+        instance.moveTo(test2Ref.value);
+      }, 5000);
+    };
+
+    onMounted(() => {
+      init();
+    });
+
+    return {
+      testRef,
+      test2Ref,
+      close: () => instanceRef.value?.close(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: 300px;
+}
+</style>
+```
+
+## 开发 Dev
+
+```shell
+# 开发运行
+yarn
+yarn start
+
+# 打包和发布
+make publish
+
+```
+
+[环境变量切换方式](https://github.com/entropitor/dotenv-cli/pull/44)

package/dist/main.es.css

@@ -1 +1 @@
-.bvplayer-common-flex-space{display:inline-block;flex:1}.bvplayer-icon{display:inline-block;height:22px;width:100%;vertical-align:middle}.bvplayer-icon svg{height:100%;width:100%}.bvplayer-modal{position:absolute;top:0;left:0;padding:12px 16px;font-size:14px;border:1px solid #2b303b;border-radius:3px;background:rgba(22,27,29,.8);color:#fff;box-shadow:0 0 20px -6px #000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;visibility:hidden;opacity:0;transform:scale(0);will-change:transform,opacity;transition:all .3s cubic-bezier(.6,-.28,.735,.045)}.bvplayer-modal.bvplayer-common-is-visible{visibility:visible;opacity:1;transform:scale(1);transition:all .2s cubic-bezier(.785,.135,.15,.86)}.bvplayer-modal--center{top:50%;left:50%;margin:auto;transform:translate(-50%,-50%) scale(0)}.bvplayer-modal--center.bvplayer-common-is-visible{transform:translate(-50%,-50%)}.bvplayer-modal_title-bar{display:flex;justify-content:space-between;margin-bottom:8px;font-size:16px}.bvplayer-modal_title-bar_close{cursor:pointer}.bvplayer-modal_body{padding:8px;overflow:hidden;overflow-y:auto}.bvplayer-spinner{position:absolute;top:0;left:0;height:100%;width:100%}.bvplayer-spinner>span{display:inline-block;position:absolute;top:50%;left:50%;margin:-18px 0 0 -18px;height:36px;width:36px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgICB2aWV3Qm94PSIwIDAgMjQgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICAgICAgPHJlY3QgeD0iMCIgeT0iNy42NDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNC43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMHMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iMTA7IDIwOyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8L3JlY3Q+DQogICAgPHJlY3QgeD0iOCIgeT0iNS4xNDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxOS43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgMjA7IDEwIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjAuMTVzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICA8cmVjdCB4PSIxNiIgeT0iNy4zNTg0IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNS4yODMyIiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4zcyIgZHVyPSIwLjZzIg0KICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyAyMDsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgNTsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICAgIDwvc3ZnPg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgICB2aWV3Qm94PSIwIDAgMjQgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICAgICAgPHJlY3QgeD0iMCIgeT0iNy42NDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNC43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMHMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iMTA7IDIwOyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8L3JlY3Q+DQogICAgPHJlY3QgeD0iOCIgeT0iNS4xNDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxOS43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgMjA7IDEwIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjAuMTVzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICA8cmVjdCB4PSIxNiIgeT0iNy4zNTg0IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNS4yODMyIiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4zcyIgZHVyPSIwLjZzIg0KICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyAyMDsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgNTsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICAgIDwvc3ZnPg==)}.bvplayer-spinner>span svg{height:100%}.bvplayer-mask{height:100%;width:100%;position:absolute;top:0;left:0;display:grid;align-content:center;justify-content:center;place-content:center;background-color:#000;color:#fff;font-size:14px}.bvplayer-slider{cursor:pointer;position:relative;width:100%;height:3px;line-height:3px;background:#aaa;transition:all .3s ease-in-out}.bvplayer-slider_inner{position:absolute;bottom:0;left:0;height:100%;transition:all .1s ease;background:#fff}.bvplayer-slider_thumb{cursor:pointer;position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;transition:all .3s ease-in-out;background:#fff}.bvplayer-slider_suffix{position:absolute;visibility:visible;display:inline-block;width:calc(100% + 28px);text-align:right;color:#fff;opacity:.8;font-size:12px}.bvplayer-controller{position:absolute;bottom:0;left:0;right:0;width:100%;height:98px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;opacity:0;transform:translateY(100%);will-change:visibility,opacity,transform;transition:all .3s cubic-bezier(.455,.03,.515,.955)}.bvplayer-controller.bvplayer-common-is-visible{visibility:visible;opacity:1;transform:translateY(0)}.bvplayer-controller_mask{position:absolute;bottom:0;height:100%;width:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.bvplayer-controller_inner{position:absolute;bottom:0;left:0;right:0;width:100%;height:41px;padding:0 20px;display:flex;align-items:stretch;justify-content:space-between}.bvplayer-controller_inner_bar{display:block}.bvplayer-controller_inner_bar *{vertical-align:middle}.bvplayer-controller_inner_left{cursor:default}.bvplayer-controller_inner_right{cursor:default}.bvplayer-controller_button{cursor:pointer;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:100%;border:none;outline:none;padding:0;background:none;color:inherit}.bvplayer-controller_button:not(:last-child){margin-right:8px}.bvplayer-controller_button>*{transition:all .2s ease-in-out;opacity:.8}.bvplayer-controller_button:hover>*{opacity:1}.bvplayer-controller_volume{display:inline-block}.bvplayer-controller_volume--active .bvplayer-slider,.bvplayer-controller_volume:hover .bvplayer-slider{width:45px!important}.bvplayer-controller_volume--active .bvplayer-slider_thumb,.bvplayer-controller_volume:hover .bvplayer-slider_thumb{transform:scale(1)!important}.bvplayer-controller_volume--active .bvplayer-slider_suffix,.bvplayer-controller_volume:hover .bvplayer-slider_suffix{visibility:visible}.bvplayer-controller_volume .bvplayer-controller_button{margin-right:5px}.bvplayer-controller_volume .bvplayer-slider{display:inline-block;width:0}.bvplayer-controller_volume .bvplayer-slider_thumb{transform:scale(0)}.bvplayer-controller_volume .bvplayer-slider_suffix{visibility:hidden}.bvplayer-video{display:block;pointer-events:none;box-sizing:border-box;width:100%;height:100%}.bvplayer-player{position:relative;height:100%;width:100%;background-color:#000;overflow:hidden}.bvplayer-player *{box-sizing:border-box}.bvplayer-player .bvplayer-video{position:absolute}.bvplayer-player .bvplayer-modal{min-width:120px;min-height:100px}.bvplayer-player-fit--contain .bvplayer-video{-o-object-fit:contain;object-fit:contain}.bvplayer-player-fit--fill .bvplayer-video{-o-object-fit:fill;object-fit:fill}.bvplayer-player-fit--cover .bvplayer-video{-o-object-fit:cover;object-fit:cover}.bvplayer-player-fit--scale-down .bvplayer-video{-o-object-fit:scale-down;object-fit:scale-down}.bvplayer-player-fit--none .bvplayer-video{-o-object-fit:none;object-fit:none}.bvplayer-player_info-modal_content{width:280px;min-height:180px;display:flex;flex-direction:column}.bvplayer-player_info-modal_section:not(:last-child){margin-bottom:16px}.bvplayer-player_info-modal_section_title{display:inline-block;font-weight:bold;font-size:12px;margin-bottom:8px;margin-left:16px}.bvplayer-player_info-modal_section_main{width:100%;display:flex;flex-direction:column;align-items:end}.bvplayer-player_info-modal_list{min-width:210px;font-size:12px}.bvplayer-player_info-modal_list_item{white-space:nowrap}.bvplayer-player_info-modal_list_item:not(:last-child){margin-bottom:8px}.bvplayer-player_info-modal_list_item_label{display:inline-block;width:90px;margin-right:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.bvplayer-player_info-modal_list_item_value{display:inline-block;white-space:normal;word-break:break-all}
+.bvplayer-common-flex-space{display:inline-block;flex:1}.bvplayer-icon{display:inline-block;height:22px;width:100%;vertical-align:middle}.bvplayer-icon svg{height:100%;width:100%}.bvplayer-button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:0;line-height:0;display:inline-block;padding:3px 5px;border-radius:5px;color:inherit}.bvplayer-button .bvplayer-icon{height:1em}.bvplayer-button--text{background:none}.bvplayer-button--primary{color:#fffc;background-color:#2e3e4e99}.bvplayer-input{font-size:inherit;font-family:inherit;padding:2px 4px;background-color:#fff;border:1px solid #8b8a8b;border-radius:3px;transition:box-shadow .18s ease-in-out}.bvplayer-input:not(textarea){line-height:1}.bvplayer-input[readonly]{cursor:not-allowed;border-style:dotted;color:#777}.bvplayer-input[disabled]{border-color:#ccc;background-color:#eee;cursor:not-allowed}.bvplayer-input:focus{border-color:#68747d;box-shadow:0 0 3px 1px #d5d9dc80;outline:1px solid transparent}.bvplayer-modal{position:absolute;top:0;left:0;padding:12px 16px;font-size:14px;border:1px solid #2b303b;border-radius:3px;background:rgba(22,27,29,.8);color:#fff;box-shadow:0 0 20px -6px #000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;visibility:hidden;opacity:0;transform:scale(0);will-change:transform,opacity;transition:all .3s cubic-bezier(.6,-.28,.735,.045)}.bvplayer-modal.bvplayer-common-is-visible{visibility:visible;opacity:1;transform:scale(1);transition:all .2s cubic-bezier(.785,.135,.15,.86)}.bvplayer-modal--center{top:50%;left:50%;margin:auto;transform:translate(-50%,-50%) scale(0)}.bvplayer-modal--center.bvplayer-common-is-visible{transform:translate(-50%,-50%)}.bvplayer-modal_title-bar{display:flex;justify-content:space-between;margin-bottom:8px;font-size:16px}.bvplayer-modal_title-bar_close{cursor:pointer}.bvplayer-modal_body{padding:8px;overflow:hidden;overflow-y:auto}.bvplayer-spinner{position:absolute;top:0;left:0;height:100%;width:100%}.bvplayer-spinner>span{display:inline-block;position:absolute;top:50%;left:50%;margin:-18px 0 0 -18px;height:36px;width:36px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgICB2aWV3Qm94PSIwIDAgMjQgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICAgICAgPHJlY3QgeD0iMCIgeT0iNy42NDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNC43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMHMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iMTA7IDIwOyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8L3JlY3Q+DQogICAgPHJlY3QgeD0iOCIgeT0iNS4xNDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxOS43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgMjA7IDEwIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjAuMTVzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICA8cmVjdCB4PSIxNiIgeT0iNy4zNTg0IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNS4yODMyIiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4zcyIgZHVyPSIwLjZzIg0KICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyAyMDsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgNTsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICAgIDwvc3ZnPg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgICB2aWV3Qm94PSIwIDAgMjQgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwIDUwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgICAgICAgPHJlY3QgeD0iMCIgeT0iNy42NDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNC43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMHMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHZhbHVlcz0iMTA7IDIwOyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjBzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8L3JlY3Q+DQogICAgPHJlY3QgeD0iOCIgeT0iNS4xNDE2IiB3aWR0aD0iNCIgaGVpZ2h0PSIxOS43MTY4IiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlPg0KICAgICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJoZWlnaHQiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgMjA7IDEwIiBiZWdpbj0iMC4xNXMiIGR1cj0iMC42cyINCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZT4NCiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyA1OyAxMCIgYmVnaW49IjAuMTVzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICA8cmVjdCB4PSIxNiIgeT0iNy4zNTg0IiB3aWR0aD0iNCIgaGVpZ2h0PSIxNS4yODMyIiBvcGFjaXR5PSIwLjIiPg0KICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIwLjI7IDE7IC4yIiBiZWdpbj0iMC4zcyIgZHVyPSIwLjZzIg0KICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIgYXR0cmlidXRlVHlwZT0iWE1MIiB2YWx1ZXM9IjEwOyAyMDsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InkiIGF0dHJpYnV0ZVR5cGU9IlhNTCIgdmFsdWVzPSIxMDsgNTsgMTAiIGJlZ2luPSIwLjNzIiBkdXI9IjAuNnMiDQogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGU+DQogICAgICAgIDwvcmVjdD4NCiAgICAgIDwvc3ZnPg==)}.bvplayer-spinner>span svg{height:100%}.bvplayer-mask{height:100%;width:100%;position:absolute;top:0;left:0;display:grid;align-content:center;justify-content:center;place-content:center;background-color:#000;color:#fff;font-size:14px}.bvplayer-slider{cursor:pointer;position:relative;width:100%;height:3px;line-height:3px;background:#aaa;transition:all .3s ease-in-out}.bvplayer-slider_inner{position:absolute;bottom:0;left:0;height:100%;transition:all .1s ease;background:#fff}.bvplayer-slider_thumb{cursor:pointer;position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;transition:all .3s ease-in-out;background:#fff}.bvplayer-slider_suffix{position:absolute;visibility:visible;display:inline-block;width:calc(100% + 28px);text-align:right;color:#fff;opacity:.8;font-size:12px}.bvplayer-video{display:block;box-sizing:border-box;width:100%;height:100%}.bvplayer-video_screen{pointer-events:none;width:100%;height:100%}.bvplayer-controller{position:absolute;bottom:0;left:0;right:0;width:100%;height:98px;color:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(100%);will-change:visibility,opacity,transform;transition:all .3s cubic-bezier(.455,.03,.515,.955)}.bvplayer-controller.bvplayer-common-is-visible{visibility:visible;opacity:1;transform:translateY(0)}.bvplayer-controller_mask{position:absolute;bottom:0;height:100%;width:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.bvplayer-controller_inner{position:absolute;bottom:0;left:0;right:0;width:100%;height:41px;padding:0 20px;display:flex;align-items:stretch;justify-content:space-between}.bvplayer-controller_inner_bar{display:block}.bvplayer-controller_inner_bar *{vertical-align:middle;pointer-events:auto}.bvplayer-controller_inner_left{cursor:default}.bvplayer-controller_inner_right{cursor:default}.bvplayer-controller_button{cursor:pointer;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:36px;height:100%;border:none;outline:none;padding:0;background:none;color:inherit}.bvplayer-controller_button:not(:last-child){margin-right:8px}.bvplayer-controller_button>*{transition:all .2s ease-in-out;opacity:.8}.bvplayer-controller_button:hover>*{opacity:1}.bvplayer-controller_volume{display:inline-block}.bvplayer-controller_volume--active .bvplayer-slider,.bvplayer-controller_volume:hover .bvplayer-slider{width:45px!important}.bvplayer-controller_volume--active .bvplayer-slider_thumb,.bvplayer-controller_volume:hover .bvplayer-slider_thumb{transform:scale(1)!important}.bvplayer-controller_volume--active .bvplayer-slider_suffix,.bvplayer-controller_volume:hover .bvplayer-slider_suffix{visibility:visible}.bvplayer-controller_volume .bvplayer-controller_button{margin-right:5px}.bvplayer-controller_volume .bvplayer-slider{display:inline-block;width:0}.bvplayer-controller_volume .bvplayer-slider_thumb{transform:scale(0)}.bvplayer-controller_volume .bvplayer-slider_suffix{visibility:hidden}.bvplayer-ptz{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;visibility:hidden}.bvplayer-ptz.bvplayer-common-is-visible{visibility:visible}.bvplayer-ptz.bvplayer-common-is-visible .bvplayer-ptz_control{opacity:1;transform:translate(-50%,0)}.bvplayer-ptz-control-button{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:0;padding:3px 5px;border-radius:3px;overflow:hidden;color:#fffc;opacity:1;transform:scale(1);transition:all .3s cubic-bezier(.075,.82,.165,1)}.bvplayer-ptz-control-button--press{transform:scale(.9);opacity:.8}.bvplayer-ptz-speed-slider{width:20px;height:100%;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bvplayer-ptz-speed-slider_header,.bvplayer-ptz-speed-slider_footer{position:relative;font-size:12px;margin-bottom:1px}.bvplayer-ptz-speed-slider_header:before,.bvplayer-ptz-speed-slider_footer:before{content:"";position:absolute;bottom:0;left:0;width:100%;border-bottom:1px solid rgba(255,255,255,.45);transform:scaleX(.3)}.bvplayer-ptz-speed-slider_header:after,.bvplayer-ptz-speed-slider_footer:after{content:attr(data-text);position:absolute;font-size:12px;opacity:.8}.bvplayer-ptz-speed-slider_header:after{right:-10px;top:-7px}.bvplayer-ptz-speed-slider_footer:after{right:-20px;top:-10px}.bvplayer-ptz-speed-slider_main{height:100%;position:relative;overflow:hidden;text-align:center}.bvplayer-ptz-speed-slider-track{display:inline-block;width:2px;height:100%;background-color:#ffffff73;border-radius:3px}.bvplayer-ptz-speed-slider-thumb{cursor:pointer;display:inline-block;position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;padding:4px 5px;border-radius:2px;background-color:#2e3e4e;color:#fffc;box-shadow:#00000080 0 2px 4px,#00000040 0 2px 4px}.bvplayer-ptz-speed-slider-thumb span{display:inline-block;height:4px;width:1px;background-color:#fff}.bvplayer-ptz-speed-slider-thumb span:not(:last-child){margin-right:3px}.bvplayer-ptz_control{opacity:0;pointer-events:auto;position:absolute;left:50%;bottom:40px;transform:translate(-50%,calc(100% + 40px));will-change:transform opacity;transition:all .3s cubic-bezier(.455,.03,.515,.955);display:flex;justify-content:space-between;height:25%;min-height:110px;max-height:150px;width:60%;max-width:380px;overflow:hidden;padding:8px 12px;font-size:12px;color:#fff;background:rgba(22,27,29,.4);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2);border-radius:3px;box-shadow:0 1px 5px #000000b3}.bvplayer-ptz_control>:not(:last-child){margin-right:8px}.bvplayer-ptz_control_direction-grid{position:relative;display:grid;grid-template-rows:repeat(3,minmax(25px,1fr));grid-template-columns:repeat(3,minmax(25px,1fr));grid-gap:8px;gap:8px;width:35%;min-width:100px;max-width:170px;overflow:hidden}.bvplayer-ptz_control_direction-grid_item{outline:none}.bvplayer-ptz_control_speed-option{flex:1;overflow:hidden;text-align:left;padding:6px 0}.bvplayer-ptz_control_camera-option{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.bvplayer-ptz_control_camera-option_item{white-space:nowrap}.bvplayer-ptz_control_camera-option_item:not(:last-child){margin-bottom:8px}.bvplayer-ptz_control_camera-option_item_label{display:inline-block;width:40px;margin-right:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top;-moz-text-align-last:justify;text-align-last:justify}.bvplayer-ptz_control_camera-option_item_value{display:inline-block;white-space:normal;word-break:break-all}.bvplayer-ptz_control_camera-option_item_value>:not(:last-child){margin-right:8px}.bvplayer-ptz_control_direction-button{height:100%;width:100%;max-width:60px;max-height:60px;background-color:#2e3e4ecc;box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}.bvplayer-ptz_control_direction-button .bvplayer-icon{height:50%;min-height:18px}.bvplayer-ptz_control_direction-button.bvplayer-ptz-control-button--press{box-shadow:#0000000d 0 0 0 1px}.bvplayer-ptz_control_operator-button{padding:2px;background-color:#2e3e4ecc;box-shadow:#00000029 0 3px 6px,#0000003b 0 3px 6px}.bvplayer-ptz_control_operator-button .bvplayer-icon{height:16px}.bvplayer-ptz_control_close-button{position:absolute;top:2px;right:2px;font-size:16px;padding:0;will-change:transform;transition:transform .3s}.bvplayer-ptz_control_close-button:hover{transform:scale(1.1)}.bvplayer-player{position:relative;height:100%;width:100%;background-color:#000;overflow:hidden}.bvplayer-player *{box-sizing:border-box}.bvplayer-player .bvplayer-video{position:absolute}.bvplayer-player .bvplayer-modal{min-width:120px;min-height:100px}.bvplayer-player-fit--contain .bvplayer-video_screen{-o-object-fit:contain;object-fit:contain}.bvplayer-player-fit--fill .bvplayer-video_screen{-o-object-fit:fill;object-fit:fill}.bvplayer-player-fit--cover .bvplayer-video_screen{-o-object-fit:cover;object-fit:cover}.bvplayer-player-fit--scale-down .bvplayer-video_screen{-o-object-fit:scale-down;object-fit:scale-down}.bvplayer-player-fit--none .bvplayer-video_screen{-o-object-fit:none;object-fit:none}.bvplayer-player_info-modal_content{width:280px;min-height:180px;display:flex;flex-direction:column}.bvplayer-player_info-modal_section:not(:last-child){margin-bottom:16px}.bvplayer-player_info-modal_section_title{display:inline-block;font-weight:bold;font-size:12px;margin-bottom:8px;margin-left:16px}.bvplayer-player_info-modal_section_main{width:100%;display:flex;flex-direction:column;align-items:end}.bvplayer-player_info-modal_list{min-width:210px;font-size:12px}.bvplayer-player_info-modal_list_item{white-space:nowrap}.bvplayer-player_info-modal_list_item:not(:last-child){margin-bottom:8px}.bvplayer-player_info-modal_list_item_label{display:inline-block;width:90px;margin-right:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}.bvplayer-player_info-modal_list_item_value{display:inline-block;white-space:normal;word-break:break-all}