| 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 | // On some browsers autoplay will only work with `muted: true`
|
| 32 | autoplay: true,
|
| 33 |
|
| 34 | // @option loop: Boolean = true
|
| 35 | // Whether the video will loop back to the beginning when played.
|
| 36 | loop: true,
|
| 37 |
|
| 38 | // @option keepAspectRatio: Boolean = true
|
| 39 | // Whether the video will save aspect ratio after the projection.
|
| 40 | // Relevant for supported browsers. See [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
|
| 41 | keepAspectRatio: true,
|
| 42 |
|
| 43 | // @option muted: Boolean = false
|
| 44 | // Whether the video starts on mute when loaded.
|
| 45 | muted: false,
|
| 46 |
|
| 47 | // @option playsInline: Boolean = true
|
| 48 | // Mobile browsers will play the video right where it is instead of open it up in fullscreen mode.
|
| 49 | playsInline: true
|
| 50 | },
|
| 51 |
|
| 52 | _initImage: function () {
|
| 53 | var wasElementSupplied = this._url.tagName === 'VIDEO';
|
| 54 | var vid = this._image = wasElementSupplied ? this._url : DomUtil.create('video');
|
| 55 |
|
| 56 | DomUtil.addClass(vid, 'leaflet-image-layer');
|
| 57 | if (this._zoomAnimated) { DomUtil.addClass(vid, 'leaflet-zoom-animated'); }
|
| 58 | if (this.options.className) { DomUtil.addClass(vid, this.options.className); }
|
| 59 |
|
| 60 | vid.onselectstart = Util.falseFn;
|
| 61 | vid.onmousemove = Util.falseFn;
|
| 62 |
|
| 63 | // @event load: Event
|
| 64 | // Fired when the video has finished loading the first frame
|
| 65 | vid.onloadeddata = Util.bind(this.fire, this, 'load');
|
| 66 |
|
| 67 | if (wasElementSupplied) {
|
| 68 | var sourceElements = vid.getElementsByTagName('source');
|
| 69 | var sources = [];
|
| 70 | for (var j = 0; j < sourceElements.length; j++) {
|
| 71 | sources.push(sourceElements[j].src);
|
| 72 | }
|
| 73 |
|
| 74 | this._url = (sourceElements.length > 0) ? sources : [vid.src];
|
| 75 | return;
|
| 76 | }
|
| 77 |
|
| 78 | if (!Util.isArray(this._url)) { this._url = [this._url]; }
|
| 79 |
|
| 80 | if (!this.options.keepAspectRatio && Object.prototype.hasOwnProperty.call(vid.style, 'objectFit')) {
|
| 81 | vid.style['objectFit'] = 'fill';
|
| 82 | }
|
| 83 | vid.autoplay = !!this.options.autoplay;
|
| 84 | vid.loop = !!this.options.loop;
|
| 85 | vid.muted = !!this.options.muted;
|
| 86 | vid.playsInline = !!this.options.playsInline;
|
| 87 | for (var i = 0; i < this._url.length; i++) {
|
| 88 | var source = DomUtil.create('source');
|
| 89 | source.src = this._url[i];
|
| 90 | vid.appendChild(source);
|
| 91 | }
|
| 92 | }
|
| 93 |
|
| 94 | // @method getElement(): HTMLVideoElement
|
| 95 | // Returns the instance of [`HTMLVideoElement`](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement)
|
| 96 | // used by this overlay.
|
| 97 | });
|
| 98 |
|
| 99 |
|
| 100 | // @factory L.videoOverlay(video: String|Array|HTMLVideoElement, bounds: LatLngBounds, options?: VideoOverlay options)
|
| 101 | // Instantiates an image overlay object given the URL of the video (or array of URLs, or even a video element) and the
|
| 102 | // geographical bounds it is tied to.
|
| 103 |
|
| 104 | export function videoOverlay(video, bounds, options) {
|
| 105 | return new VideoOverlay(video, bounds, options);
|
| 106 | }
|