Class: VideoPlayControl

VideoPlayControl

VideoMap 或 VideoLayer 的播放/暂停控件。

new VideoPlayControl(options)

mapboxgl/control/VideoPlayControl.js, line 32
Name Type Description
options Object 可选

参数。

Name Type Description
target VideoMap | VideoLayer 可选

要控制的对象。添加到 VideoMap 时可省略并自动绑定。
size number 可选

内置按钮直径，单位像素。使用 setHTML / setDOMContent 自定义内容后不再生效。
Version:
  • 12.1.2
Examples
videoMap.addControl(new mapboxgl.supermap.VideoPlayControl(), 'bottom-left');
map.addControl(new mapboxgl.supermap.VideoPlayControl({ target: videoLayer }), 'bottom-left');
// 自定义整个控件内容（可以是自己的 button）：带 sm-mapboxgl-play-when-paused 的元素仅在暂停时显示，sm-mapboxgl-play-when-playing 仅在播放时显示
const control = new mapboxgl.supermap.VideoPlayControl();
control.setHTML(
  '播放暂停'
);

API Relations

Returned by: VideoPlayControl.setDOMContent , VideoPlayControl.setHTML.

Methods

setDOMContent(node){VideoPlayControl}

mapboxgl/control/VideoPlayControl.js, line 77

以 DOM 节点设置按钮内容，用法同 setHTML。节点由调用方创建，不做过滤；节点会被直接放入按钮，不会克隆。

Name Type Description
node Node

DOM 节点。
Returns:
Type Description
VideoPlayControl this。

setHTML(html){VideoPlayControl}

mapboxgl/control/VideoPlayControl.js, line 65

设置控件内容，会替换包括内置圆形按钮在内的全部内容，可以是任意自定义结构（如自己的 button）。内容中任意位置被点击都会切换播放/暂停。内容可同时包含两种状态：带 sm-mapboxgl-play-when-paused 类的元素仅在暂停时显示，带 sm-mapboxgl-play-when-playing 类的元素仅在播放时显示；也可用控件容器（.sm-mapboxgl-play-ctrl）上的 is-playing / is-paused 类自行编写样式。自定义内容的 title、aria-label 需自行设置。内容会被过滤：移除 script、iframe、style 等危险标签，以及 on* 事件属性和 javascript: 等危险链接。如需完全自定义，请使用 setDOMContent。

Name Type Description
html string

HTML 字符串。
Returns:
Type Description
VideoPlayControl this。