Add playsInline attribute on the video element (#7928)

Leaflet · Jan 21, 2022 · e4e4d5b · e4e4d5b
1 parent 4f80c6b
commit e4e4d5b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/debug/map/videooverlay.html b/debug/map/videooverlay.html
@@ -41,7 +41,10 @@
 		var overlay = L.videoOverlay(videoUrls, bounds, {
 			opacity: 0.8,
 			interactive: true,
-			autoplay: false
+			autoplay: true,
+			loop: true,
+			muted: true,
+			playsInline: true
 		});
 		map.addLayer(overlay);
 

diff --git a/spec/index.html b/spec/index.html
@@ -69,6 +69,7 @@
 	<script src="suites/layer/FeatureGroupSpec.js"></script>
 	<script src="suites/layer/GeoJSONSpec.js"></script>
 	<script src="suites/layer/ImageOverlaySpec.js"></script>
+	<script src="suites/layer/VideoOverlaySpec.js"></script>
 	<script src="suites/layer/LayerGroupSpec.js"></script>
 	<script src="suites/layer/PopupSpec.js"></script>
 	<script src="suites/layer/TooltipSpec.js"></script>

diff --git a/spec/suites/layer/VideoOverlaySpec.js b/spec/suites/layer/VideoOverlaySpec.js
@@ -0,0 +1,34 @@
+describe('VideoOverlay', function () {
+	var c, map;
+	var videoBounds = L.latLngBounds([[32, -130], [13, -100]]);
+
+	beforeEach(function () {
+		c = document.createElement('div');
+		c.style.width = '400px';
+		c.style.height = '400px';
+		document.body.appendChild(c);
+		map = new L.Map(c);
+		map.setView(new L.LatLng(55.8, 37.6), 6);	// view needs to be set so when layer is added it is initilized
+	});
+
+	afterEach(function () {
+		map.remove();
+		map = null;
+		document.body.removeChild(c);
+	});
+
+	it('create VideoOverlay', function () {
+		var overlay = L.imageOverlay().setStyle({opacity: 0.5});
+		expect(overlay.options.opacity).to.equal(0.5);
+
+
+		var videoUrls = [
+			'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
+			'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
+		];
+
+		var videoOverlay = L.videoOverlay(videoUrls, videoBounds).addTo(map);
+
+		expect(map.hasLayer(videoOverlay)).to.be.ok();
+	});
+});
diff --git a/src/layer/VideoOverlay.js b/src/layer/VideoOverlay.js
@@ -28,6 +28,7 @@ export var VideoOverlay = ImageOverlay.extend({
 	options: {
 		// @option autoplay: Boolean = true
 		// Whether the video starts playing automatically when loaded.
+		// On some browsers autoplay will only work with `muted: true`
 		autoplay: true,
 
 		// @option loop: Boolean = true
@@ -41,7 +42,11 @@ export var VideoOverlay = ImageOverlay.extend({
 
 		// @option muted: Boolean = false
 		// Whether the video starts on mute when loaded.
-		muted: false
+		muted: false,
+
+		// @option playsInline: Boolean = true
+		// Mobile browsers will play the video right where it is instead of open it up in fullscreen mode.
+		playsInline: true
 	},
 
 	_initImage: function () {
@@ -78,6 +83,7 @@ export var VideoOverlay = ImageOverlay.extend({
 		vid.autoplay = !!this.options.autoplay;
 		vid.loop = !!this.options.loop;
 		vid.muted = !!this.options.muted;
+		vid.playsInline = !!this.options.playsInline;
 		for (var i = 0; i < this._url.length; i++) {
 			var source = DomUtil.create('source');
 			source.src = this._url[i];