From 5f45414201b0c1d81c4b67bdf2bd30e6009ecc93 Mon Sep 17 00:00:00 2001 From: Unknown Date: Fri, 2 Feb 2018 11:43:13 +0200 Subject: [PATCH 1/3] Improving the projection of video by setting videoElement style --- src/layer/VideoOverlay.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/layer/VideoOverlay.js b/src/layer/VideoOverlay.js index 2b8c0f78bf7..26dc726a5ae 100644 --- a/src/layer/VideoOverlay.js +++ b/src/layer/VideoOverlay.js @@ -62,6 +62,7 @@ export var VideoOverlay = ImageOverlay.extend({ if (!Util.isArray(this._url)) { this._url = [this._url]; } + vid.style['objectFit'] = 'fill'; vid.autoplay = !!this.options.autoplay; vid.loop = !!this.options.loop; for (var i = 0; i < this._url.length; i++) { From 8fe68d0854ea01210ea7fe650bafe983524a0d6c Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 18 Apr 2018 15:55:53 +0300 Subject: [PATCH 2/3] use the improvement only for supported browsers and when user want it --- src/layer/VideoOverlay.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/layer/VideoOverlay.js b/src/layer/VideoOverlay.js index 26dc726a5ae..1f76ea50ff6 100644 --- a/src/layer/VideoOverlay.js +++ b/src/layer/VideoOverlay.js @@ -32,7 +32,11 @@ export var VideoOverlay = ImageOverlay.extend({ // @option loop: Boolean = true // Whether the video will loop back to the beginning when played. - loop: true + loop: true, + + // @option saveAspectRatio: Boolean = true + // Whether the video will save aspect ratio after the projection. + saveAspectRatio: true }, _initImage: function () { @@ -62,7 +66,7 @@ export var VideoOverlay = ImageOverlay.extend({ if (!Util.isArray(this._url)) { this._url = [this._url]; } - vid.style['objectFit'] = 'fill'; + if (!this.options.saveAspectRatio && vid.style.hasOwnProperty('objectFit')) { vid.style['objectFit'] = 'fill'; } vid.autoplay = !!this.options.autoplay; vid.loop = !!this.options.loop; for (var i = 0; i < this._url.length; i++) { From de28b07cf7188b0049269efa8e88474698256cb3 Mon Sep 17 00:00:00 2001 From: Unknown Date: Wed, 18 Apr 2018 16:24:00 +0300 Subject: [PATCH 3/3] small fixes + add a note about browser compatibility --- src/layer/VideoOverlay.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/layer/VideoOverlay.js b/src/layer/VideoOverlay.js index 1f76ea50ff6..a8ad4c244b9 100644 --- a/src/layer/VideoOverlay.js +++ b/src/layer/VideoOverlay.js @@ -34,9 +34,10 @@ export var VideoOverlay = ImageOverlay.extend({ // Whether the video will loop back to the beginning when played. loop: true, - // @option saveAspectRatio: Boolean = true + // @option keepAspectRatio: Boolean = true // Whether the video will save aspect ratio after the projection. - saveAspectRatio: true + // Relevant for supported browsers. Browser compatibility- https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit + keepAspectRatio: true }, _initImage: function () { @@ -66,7 +67,7 @@ export var VideoOverlay = ImageOverlay.extend({ if (!Util.isArray(this._url)) { this._url = [this._url]; } - if (!this.options.saveAspectRatio && vid.style.hasOwnProperty('objectFit')) { vid.style['objectFit'] = 'fill'; } + if (!this.options.keepAspectRatio && vid.style.hasOwnProperty('objectFit')) { vid.style['objectFit'] = 'fill'; } vid.autoplay = !!this.options.autoplay; vid.loop = !!this.options.loop; for (var i = 0; i < this._url.length; i++) {