播放器比例切换插件

通过按钮和鼠标滚轮控制全屏状态下video标签占播放器容器的比例大小

引入

npm i --save @tencent/thumbplayer-plugin-fullscreen-ratio

使用

import { createH5Player } from '@tencent/thumbplayer-h5';
import { FullscreenRatioPlugin } from '@tencent/thumbplayer-plugin-fullscreen-ratio';
const player = createH5Player({
   container: '#demo',
   plugins: [
      FullscreenRatioPlugin.pluginName,
    ],
   });
const ratio = player.plugins[FullscreenRatioPlugin.pluginName];

// 插件默认提供三个按钮，分别对应50%,75%和100%(video标签完全占满播放器容器)
// 显示按钮
ratio.show();
// 隐藏按钮
ratio.hide();

// 支持通过脚本设置比例
ratio.setRatio('half');

API

show

▸ show(): void

显示切换按钮

TIP

只有当按钮处于显示状态时，对鼠标滚轮事件的监听才会被激活

Returns: void

---

hide

▸ hide(): void

隐藏切换按钮

Returns: void

---

get el

▸ get el(): HTMLELement

获取按钮元素的DOM

Returns: HTMLElement

---

setRatio

▸ setRatio(ratio: 'half'|'medium'|'full'): void

通过js设置比例

Parameters:

Name	Type	Description
ratio	String	比例的大小，half对应50%、medium对应75%、full对应100%

Returns: void