Used to load and display a video player over specific bounds of the map. Extends ImageOverlay
.
用于在地图的特定边界上加载和显示视频播放器。扩展 ImageOverlay。
A video overlay uses the <video>
HTML5 element.
视频叠加层使用 <video> HTML5 元素。
Usage example
使用示例
var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
videoBounds = [[ 32, -130], [ 13, -100]];
L.videoOverlay(videoUrl, videoBounds ).addTo(map);
Creation
Factory | Description |
---|---|
L.videoOverlay(<String|Array|HTMLVideoElement> video, <LatLngBounds> bounds, <VideoOverlay options> options?) | Instantiates an image overlay object given the URL of the video (or array of URLs, or even a video element) and the geographical bounds it is tied to. 实例化一个图像覆盖对象,给定视频的 URL(或 URL 数组,甚至是一个视频元素)和它所绑定的地理范围。 |
Options
Option | Type | Default | Description |
---|---|---|---|
autoplay | Boolean | true | Whether the video starts playing automatically when loaded. On some browsers autoplay will only work with muted: true 视频加载时是否自动开始播放。在某些浏览器上,自动播放仅适用于 muted: true |
loop | Boolean | true | Whether the video will loop back to the beginning when played. 播放时视频是否会循环回到开头。 |
keepAspectRatio | Boolean | true | Whether the video will save aspect ratio after the projection. Relevant for supported browsers. See browser compatibility 投影后视频是否保存纵横比。与支持的浏览器相关。查看浏览器兼容性 |
muted | Boolean | false | Whether the video starts on mute when loaded. 加载时视频是否以静音启动。 |
playsInline | Boolean | true | Mobile browsers will play the video right where it is instead of open it up in fullscreen mode. 移动浏览器将在原处播放视频,而不是以全屏模式打开。 |
▶ Options inherited from ImageOverlay
从 ImageOverlay 继承的选项
Option | Type | Default | Description |
---|---|---|---|
opacity | Number | 1.0 | The opacity of the image overlay. 图像叠加层的不透明度。 |
alt | String | '' | Text for the alt attribute of the image (useful for accessibility).图片的 alt 属性的文本(有助于辅助功能)。 |
interactive | Boolean | false | If true , the image overlay will emit mouse events when clicked or hovered.如果为 true,则图像叠加层将在单击或悬停时发出鼠标事件。 |
crossOrigin | Boolean|String | false | Whether the crossOrigin attribute will be added to the image. If a String is provided, the image will have its crossOrigin attribute set to the String provided. This is needed if you want to access image pixel data. Refer to CORS Settings for valid String values. 是否将 crossOrigin 属性添加到图像中。如果提供了字符串,则图像将其 crossOrigin 属性设置为提供的字符串。如果您想访问图像像素数据,则需要这样做。有关有效的字符串值,请参阅 CORS 设置。 |
errorOverlayUrl | String | '' | URL to the overlay image to show in place of the overlay that failed to load. 覆盖图像的 URL,以代替加载失败的覆盖图像。 |
zIndex | Number | 1 | The explicit zIndex of the overlay layer. 覆盖层的显式 zIndex。 |
className | String | '' | A custom class name to assign to the image. Empty by default. 要分配给图像的自定义类名称。默认为空。 |
▶ Options inherited from Interactive layer
从交互层继承的选项
Option | Type | Default | Description |
---|---|---|---|
bubblingMouseEvents | Boolean | true | When true , a mouse event on this layer will trigger the same event on the map (unless L.DomEvent.stopPropagation is used).如果为 true,此图层上的鼠标事件将触发地图上的相同事件(除非使用 L.DomEvent.stopPropagation)。 |
▶ Options inherited from Layer
从图层继承的选项
Option | Type | Default | Description |
---|---|---|---|
pane | String | 'overlayPane' | By default the layer will be added to the map’s overlay pane. Overriding this option will cause the layer to be placed on another pane by default. 默认情况下,图层将添加到地图的叠加窗格中。覆盖此选项将导致图层默认放置在另一个窗格上。 |
attribution | String | null | String to be shown in the attribution control, e.g. “© OpenStreetMap contributors”. It describes the layer data and is often a legal obligation towards copyright holders and tile providers. 要在归因控件中显示的字符串,例如“© OpenStreetMap 贡献者”。它描述了图层数据,并且通常是对版权所有者和切片提供者的法律义务。 |
Events
Event | Data | Description |
---|---|---|
load | Event | Fired when the video has finished loading the first frame 当视频完成加载第一帧时触发 |
▶ Events inherited from ImageOverlay
从 ImageOverlay 继承的事件
Event | Data | Description |
---|---|---|
error | Event | Fired when the ImageOverlay layer fails to load its image 当 ImageOverlay 图层无法加载其图像时触发 |
▶ Mouse events inherited from Interactive layer
从交互层继承的鼠标事件
Event | Data | Description |
---|---|---|
click | MouseEvent | Fired when the user clicks (or taps) the layer. 当用户单击(或点击)图层时触发。 |
dblclick | MouseEvent | Fired when the user double-clicks (or double-taps) the layer. 当用户双击(或双击)图层时触发。 |
mousedown | MouseEvent | Fired when the user pushes the mouse button on the layer. 当用户在图层上按下鼠标按钮时触发。 |
mouseup | MouseEvent | Fired when the user releases the mouse button pushed on the layer. 当用户释放在图层上按下的鼠标按钮时触发。 |
mouseover | MouseEvent | Fired when the mouse enters the layer. 当鼠标进入图层时触发。 |
mouseout | MouseEvent | Fired when the mouse leaves the layer. 当鼠标离开图层时触发。 |
contextmenu | MouseEvent | Fired when the user right-clicks on the layer, prevents default browser context menu from showing if there are listeners on this event. Also fired on mobile when the user holds a single touch for a second (also called long press). 当用户右键单击图层时触发,防止默认浏览器上下文菜单显示此事件是否有侦听器。当用户按住单次触摸一秒钟(也称为长按)时,也会在移动设备上触发。 |
▶ Events inherited from Layer
从图层继承的事件
Event | Data | Description |
---|---|---|
add | Event | Fired after the layer is added to a map 在图层添加到地图后触发 |
remove | Event | Fired after the layer is removed from a map 从地图中移除图层后触发 |
▶ Popup events inherited from Layer
从图层继承的弹出事件
Event | Data | Description |
---|---|---|
popupopen | PopupEvent | Fired when a popup bound to this layer is opened 打开绑定到该层的弹出窗口时触发 |
popupclose | PopupEvent | Fired when a popup bound to this layer is closed 当绑定到该层的弹出窗口关闭时触发 |
▶ Tooltip events inherited from Layer
Event | Data | Description |
---|---|---|
tooltipopen | TooltipEvent | Fired when a tooltip bound to this layer is opened. 打开绑定到此图层的工具提示时触发。 |
tooltipclose | TooltipEvent | Fired when a tooltip bound to this layer is closed. 当绑定到该层的工具提示关闭时触发。 |
Methods
Method | Returns | Description |
---|---|---|
getElement() | HTMLVideoElement | Returns the instance of HTMLVideoElement used by this overlay.返回此叠加层使用的 HTMLVideoElement 实例。 |
▶ Methods inherited from ImageOverlay
从 ImageOverlay 继承的方法
Method | Returns | Description |
---|---|---|
setOpacity(<Number> opacity) | this | Sets the opacity of the overlay. 设置叠加层的不透明度。 |
bringToFront() | this | Brings the layer to the top of all overlays. 将图层置于所有叠加层的顶部。 |
bringToBack() | this | Brings the layer to the bottom of all overlays. 将图层置于所有叠加层的底部。 |
setUrl(<String> url) | this | Changes the URL of the image. 更改图像的 URL。 |
setBounds(<LatLngBounds> bounds) | this | Update the bounds that this ImageOverlay covers 更新此 ImageOverlay 覆盖的边界 |
setZIndex(<Number> value) | this | Changes the zIndex of the image overlay. 更改图像叠加层的 zIndex。 |
getBounds() | LatLngBounds | Get the bounds that this ImageOverlay covers 获取此 ImageOverlay 覆盖的范围 |
getCenter() | LatLng | Returns the center of the ImageOverlay. 返回 ImageOverlay 的中心。 |
▶ Methods inherited from Layer
从图层继承的方法
Method | Returns | Description |
---|---|---|
addTo(<Map|LayerGroup> map) | this | Adds the layer to the given map or layer group. 将图层添加到给定的地图或图层组。 |
remove() | this | Removes the layer from the map it is currently active on. 从当前处于活动状态的地图中移除图层。 |
removeFrom(<Map> map) | this | Removes the layer from the given map 从给定地图中删除图层 |
removeFrom(<LayerGroup> group) | this | Removes the layer from the given LayerGroup 从给定的图层组中移除图层 |
getPane(<String> name?) | HTMLElement | Returns the HTMLElement representing the named pane on the map. If name is omitted, returns the pane for this layer.返回表示地图上命名窗格的 HTMLElement。如果省略名称,则返回此图层的窗格。 |
getAttribution() | String | Used by the attribution control , returns the attribution option.由归因控制使用,返回归因选项。 |
▶ Popup methods inherited from Layer
从图层继承的弹出方法
Method | Returns | Description |
---|---|---|
bindPopup(<String|HTMLElement|Function|Popup> content, <Popup options> options?) | this | Binds a popup to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .使用传递的内容将弹出窗口绑定到图层并设置必要的事件侦听器。如果传递了一个函数,它将接收图层作为第一个参数,并应返回一个字符串或 HTMLElement。 |
unbindPopup() | this | Removes the popup previously bound with bindPopup .移除之前与 bindPopup 绑定的弹出窗口。 |
openPopup(<LatLng> latlng?) | this | Opens the bound popup at the specified latlng or at the default popup anchor if no latlng is passed.如果未传递任何 latlng,则在指定的 latlng 或默认弹出窗口锚点处打开绑定弹出窗口。 |
closePopup() | this | Closes the popup bound to this layer if it is open. 如果该层打开,则关闭绑定到该层的弹出窗口。 |
togglePopup() | this | Opens or closes the popup bound to this layer depending on its current state. 根据当前状态打开或关闭绑定到该层的弹出窗口。 |
isPopupOpen() | boolean | Returns true if the popup bound to this layer is currently open.如果绑定到此图层的弹出窗口当前打开,则返回 true。 |
setPopupContent(<String|HTMLElement|Popup> content) | this | Sets the content of the popup bound to this layer. 设置绑定到该层的弹出窗口的内容。 |
getPopup() | Popup | Returns the popup bound to this layer. 返回绑定到该层的弹出窗口。 |
▶ Tooltip methods inherited from Layer
从图层继承的工具提示方法
Method | Returns | Description |
---|---|---|
bindTooltip(<String|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) | this | Binds a tooltip to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement .使用传递的内容将工具提示绑定到图层并设置必要的事件侦听器。如果传递了一个函数,它将接收图层作为第一个参数,并应返回一个字符串或 HTMLElement。 |
unbindTooltip() | this | Removes the tooltip previously bound with bindTooltip .移除之前与 bindTooltip 绑定的工具提示。 |
openTooltip(<LatLng> latlng?) | this | Opens the bound tooltip at the specified latlng or at the default tooltip anchor if no latlng is passed.如果未传递任何 latlng,则在指定的 latlng 或默认的工具提示锚点处打开绑定的工具提示。 |
closeTooltip() | this | Closes the tooltip bound to this layer if it is open. 如果此图层打开,则关闭绑定到此图层的工具提示。 |
toggleTooltip() | this | Opens or closes the tooltip bound to this layer depending on its current state. 根据其当前状态打开或关闭绑定到此图层的工具提示。 |
isTooltipOpen() | boolean | Returns true if the tooltip bound to this layer is currently open.如果绑定到此图层的工具提示当前打开,则返回 true。 |
setTooltipContent(<String|HTMLElement|Tooltip> content) | this | Sets the content of the tooltip bound to this layer. 设置绑定到该图层的工具提示的内容。 |
getTooltip() | Tooltip | Returns the tooltip bound to this layer. 返回绑定到该图层的工具提示。 |
▶ Methods inherited from Evented
继承自 Evented 的方法
Method | Returns | Description |
---|---|---|
on(<String> type, <Function> fn, <Object> context?) | this | Adds a listener function (fn ) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. 'click dblclick' ).将侦听器函数 (fn) 添加到对象的特定事件类型。您可以选择指定侦听器的上下文(this 关键字将指向的对象)。您还可以传递几种以空格分隔的类型(例如“click dblclick”)。 |
on(<Object> eventMap) | this | Adds a set of type/listener pairs, e.g. {click: onClick, mousemove: onMouseMove} 添加一组类型/侦听器对,例如{点击:onClick,鼠标移动:onMouseMove} |
off(<String> type, <Function> fn?, <Object> context?) | this | Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to on , you must pass the same context to off in order to remove the listener.删除以前添加的侦听器函数。如果未指定函数,它将从对象中删除该特定事件的所有侦听器。请注意,如果您将自定义上下文传递给 on,则必须将相同的上下文传递给 off 才能移除侦听器。 |
off(<Object> eventMap) | this | Removes a set of type/listener pairs. 删除一组类型/侦听器对。 |
off() | this | Removes all listeners to all events on the object. This includes implicitly attached events. 删除对象上所有事件的所有侦听器。这包括隐式附加事件。 |
fire(<String> type, <Object> data?, <Boolean> propagate?) | this | Fires an event of the specified type. You can optionally provide a data object — the first argument of the listener function will contain its properties. The event can optionally be propagated to event parents. 触发指定类型的事件。您可以选择提供一个数据对象——侦听器函数的第一个参数将包含其属性。可以选择将事件传播到事件父级。 |
listens(<String> type, <Boolean> propagate?) | Boolean | Returns true if a particular event type has any listeners attached to it. The verification can optionally be propagated, it will return true if parents have the listener attached to it.如果特定事件类型附加了任何侦听器,则返回 true。验证可以选择传播,如果父母有监听器附加到它,它将返回 true。 |
once(…) | this | Behaves as on(…) , except the listener will only get fired once and then removed.表现为 on(…),除了监听器只会被触发一次然后被移除。 |
addEventParent(<Evented> obj) | this | Adds an event parent – an Evented that will receive propagated events添加事件父级 – 将接收传播事件的事件 |
removeEventParent(<Evented> obj) | this | Removes an event parent, so it will stop receiving propagated events 删除事件父级,因此它将停止接收传播的事件 |
addEventListener(…) | this | Alias to on(…) |
removeEventListener(…) | this | Alias to off(…) |
clearAllEventListeners(…) | this | Alias to off() |
addOneTimeEventListener(…) | this | Alias to once(…) |
fireEvent(…) | this | Alias to fire(…) |
hasEventListeners(…) | Boolean | Alias to listens(…) |