diff --git a/src/auto-advance.js b/src/auto-advance.js index 29ad2ae..d294832 100644 --- a/src/auto-advance.js +++ b/src/auto-advance.js @@ -72,7 +72,8 @@ const setup = (player, delay) => { player.playlist.autoadvance_.timeout = player.setTimeout(() => { reset(player); player.off('play', cancelOnPlay); - player.playlist.next(); + // Poster should be suppressed when auto-advancing + player.playlist.next(true); }, delay * 1000); }; diff --git a/src/play-item.js b/src/play-item.js index 1552e1c..d518e96 100644 --- a/src/play-item.js +++ b/src/play-item.js @@ -25,11 +25,13 @@ const clearTracks = (player) => { * * @param {Object} item * A source from the playlist. + * @param {boolean} [suppressPoster] + * Should the native poster be suppressed? Defaults to false. * * @return {Player} * The player that is now playing the item */ -const playItem = (player, item) => { +const playItem = (player, item, suppressPoster = false) => { const replay = !player.paused() || player.ended(); player.trigger('beforeplaylistitem', item.originalValue || item); @@ -38,7 +40,7 @@ const playItem = (player, item) => { player.playlist.currentPlaylistItemId_ = item.playlistItemId_; } - player.poster(item.poster || ''); + player.poster(suppressPoster ? '' : item.poster || ''); player.src(item.sources); clearTracks(player); diff --git a/src/playlist-maker.js b/src/playlist-maker.js index 335813e..0856148 100644 --- a/src/playlist-maker.js +++ b/src/playlist-maker.js @@ -290,11 +290,13 @@ export default function factory(player, initialList, initialIndex = 0) { * * @param {number} [index] * If given as a valid value, plays the playlist item at that index. + * @param {boolean} [suppressPoster] + * Should the native poster be suppressed? Defaults to false. * * @return {number} * The current item index. */ - playlist.currentItem = (index) => { + playlist.currentItem = (index, suppressPoster) => { // If the playlist is changing, only act as a getter. if (changing) { return playlist.currentIndex_; @@ -310,19 +312,9 @@ export default function factory(player, initialList, initialIndex = 0) { playlist.currentIndex_ = index; playItem( playlist.player_, - list[playlist.currentIndex_] + list[playlist.currentIndex_], + suppressPoster ); - - // When playing multiple videos in a playlist the videojs PosterImage - // will be hidden using CSS. However, in some browsers the native poster - // attribute will briefly appear while the new source loads. Prevent - // this by hiding every poster after the first play list item. This - // doesn't cover every use case for showing/hiding the poster, but - // it will significantly improve the user experience. - if (index > 0) { - player.poster(''); - } - return playlist.currentIndex_; } @@ -604,10 +596,12 @@ export default function factory(player, initialList, initialIndex = 0) { /** * Plays the next item in the playlist. * + * @param {boolean} [suppressPoster] + * Should the native poster be suppressed? Defaults to false. * @return {Object|undefined} * Returns undefined and has no side effects if on last item. */ - playlist.next = () => { + playlist.next = (suppressPoster = false) => { if (changing) { return; } @@ -615,7 +609,7 @@ export default function factory(player, initialList, initialIndex = 0) { const index = playlist.nextIndex(); if (index !== playlist.currentIndex_) { - const newItem = playlist.currentItem(index); + const newItem = playlist.currentItem(index, suppressPoster); return list[newItem].originalValue || list[newItem]; } diff --git a/test/playlist-maker.test.js b/test/playlist-maker.test.js index 26ae9ef..27c0d63 100644 --- a/test/playlist-maker.test.js +++ b/test/playlist-maker.test.js @@ -167,7 +167,7 @@ QUnit.test('playlist.currentItem() works as expected', function(assert) { assert.equal(playlist.currentItem(-Infinity), 2, 'cannot change to an invalid item'); }); -QUnit.test('playlist.currentItem() shows the poster for the first video', function(assert) { +QUnit.test('playlist.currentItem() shows a poster by default', function(assert) { const player = playerProxyMaker(); const playlist = playlistMaker(player, videoList); @@ -175,14 +175,12 @@ QUnit.test('playlist.currentItem() shows the poster for the first video', functi assert.notEqual(player.poster(), '', 'poster is shown for playlist index 0'); }); -QUnit.test('playlist.currentItem() hides the poster for all videos after the first', function(assert) { +QUnit.test('playlist.currentItem() will hide the poster if suppressPoster param is true', function(assert) { const player = playerProxyMaker(); const playlist = playlistMaker(player, videoList); - for (let i = 1; i <= playlist.lastIndex(); i++) { - playlist.currentItem(i); - assert.equal(player.poster(), '', 'poster is hidden for playlist index ' + i); - } + playlist.currentItem(1, true); + assert.equal(player.poster(), '', 'poster is suppressed'); }); QUnit.test('playlist.currentItem() returns -1 with an empty playlist', function(assert) {