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