1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
import {ImageOverlay} from './ImageOverlay';
import * as DomUtil from '../dom/DomUtil';
import * as Util from '../core/Util';
/*
* @class VideoOverlay
* @aka L.VideoOverlay
* @inherits ImageOverlay
*
* Used to load and display a video player over specific bounds of the map. Extends `ImageOverlay`.
*
* A video overlay uses the [`<video>`](https://developer.mozilla.org/docs/Web/HTML/Element/video)
* HTML5 element.
*
* @example
*
* ```js
* var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
* videoBounds = [[ 32, -130], [ 13, -100]];
* L.VideoOverlay(videoUrl, videoBounds ).addTo(map);
* ```
*/
export var VideoOverlay = ImageOverlay.extend({
// @section
// @aka VideoOverlay options
options: {
// @option autoplay: Boolean = true
// Whether the video starts playing automatically when loaded.
autoplay: true,
// @option loop: Boolean = true
// Whether the video will loop back to the beginning when played.
loop: true
},
_initImage: function () {
var wasElementSupplied = this._url.tagName === 'VIDEO';
var vid = this._image = wasElementSupplied ? this._url : DomUtil.create('video');
DomUtil.addClass(vid, 'leaflet-image-layer');
if (this._zoomAnimated) { DomUtil.addClass(vid, 'leaflet-zoom-animated'); }
vid.onselectstart = Util.falseFn;
vid.onmousemove = Util.falseFn;
// @event load: Event
// Fired when the video has finished loading the first frame
vid.onloadeddata = Util.bind(this.fire, this, 'load');
if (wasElementSupplied) {
var sourceElements = vid.getElementsByTagName('source');
var sources = [];
for (var j = 0; j < sourceElements.length; j++) {
sources.push(sourceElements[j].src);
}
this._url = (sourceElements.length > 0) ? sources : [vid.src];
return;
}
if (!Util.isArray(this._url)) { this._url = [this._url]; }
vid.autoplay = !!this.options.autoplay;
vid.loop = !!this.options.loop;
for (var i = 0; i < this._url.length; i++) {
var source = DomUtil.create('source');
source.src = this._url[i];
vid.appendChild(source);
}
}
// @method getElement(): HTMLVideoElement
// Returns the instance of [`HTMLVideoElement`](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement)
// used by this overlay.
});
// @factory L.videoOverlay(video: String|Array|HTMLVideoElement, bounds: LatLngBounds, options?: VideoOverlay 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.
export function videoOverlay(video, bounds, options) {
return new VideoOverlay(video, bounds, options);
}
|
