diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index f26d2334e..a1e51b44f 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -842,7 +842,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa function onNavigatedToOsd() { var dlg = videoDialog; if (dlg) { - dlg.classList.remove('videoPlayerContainer-withBackdrop'); dlg.classList.remove('videoPlayerContainer-onTop'); onStartedAndNavigatedToOsd(); @@ -879,7 +878,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } else { appRouter.setTransparency('backdrop'); - videoDialog.classList.remove('videoPlayerContainer-withBackdrop'); videoDialog.classList.remove('videoPlayerContainer-onTop'); onStartedAndNavigatedToOsd(); @@ -1296,12 +1294,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa function createMediaElement(options) { - if (browser.tv || browser.iOS || browser.mobile) { - // too slow - // also on iOS, the backdrop image doesn't look right - // on android mobile, it works, but can be slow to have the video surface fully cover the backdrop - options.backdropUrl = null; - } return new Promise(function (resolve, reject) { var dlg = document.querySelector('.videoPlayerContainer'); @@ -1316,11 +1308,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa dlg.classList.add('videoPlayerContainer'); - if (options.backdropUrl) { - dlg.classList.add('videoPlayerContainer-withBackdrop'); - dlg.style.backgroundImage = "url('" + options.backdropUrl + "')"; - } - if (options.fullscreen) { dlg.classList.add('videoPlayerContainer-onTop'); } @@ -1354,6 +1341,9 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa videoElement.addEventListener('play', onPlay); videoElement.addEventListener('click', onClick); videoElement.addEventListener('dblclick', onDblClick); + if (options.backdropUrl) { + videoElement.poster = options.backdropUrl; + } document.body.insertBefore(dlg, document.body.firstChild); videoDialog = dlg; @@ -1378,11 +1368,6 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } }); } else { - if (options.backdropUrl) { - dlg.classList.add('videoPlayerContainer-withBackdrop'); - dlg.style.backgroundImage = "url('" + options.backdropUrl + "')"; - } - resolve(dlg.querySelector('video')); } }); diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css index 5ecf4af66..b83a7816f 100644 --- a/src/components/htmlvideoplayer/style.css +++ b/src/components/htmlvideoplayer/style.css @@ -6,20 +6,9 @@ right: 0; display: flex; align-items: center; -} - -.videoPlayerContainer:not(.videoPlayerContainer-withBackdrop) { background: #000 !important; } -.videoPlayerContainer-withBackdrop { - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - background-attachment: fixed; - background-color: #000; -} - .videoPlayerContainer-onTop { z-index: 1000; }