ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Poster image fix (fixes #1763)

Browse Source
This commit is contained in:
Sam Potts 2020-04-19 20:06:58 +10:00
parent 9c7e429b48
commit 145f2ae24f
6 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/index.html
View File

@ -131,13 +131,12 @@
</div> </div>
</header> </header>
<main> <main>
<!-- style="--plyr-color-main: #47bb4d; --plyr-video-control-background-hover: var(--plyr-color-main); " --> <div id="container">
<div id="container" style="--plyr-color-main: #1ac266;">
<video <video
controls controls
crossorigin crossorigin
playsinline playsinline
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
id="player" id="player"
> >
<!-- Video files --> <!-- Video files -->

12
src/js/media.js
View File

@ -38,14 +38,12 @@ const media = {
// Wrap the video in a container // Wrap the video in a container
wrap(this.media, this.elements.wrapper); wrap(this.media, this.elements.wrapper);
// Faux poster container // Poster image container
if (this.isEmbed) { this.elements.poster = createElement('div', {
this.elements.poster = createElement('div', { class: this.config.classNames.poster,
class: this.config.classNames.poster, });
});
this.elements.wrapper.appendChild(this.elements.poster); this.elements.wrapper.appendChild(this.elements.poster);
}
} }
if (this.isHTML5) { if (this.isHTML5) {

4
src/js/plugins/vimeo.js
View File

@ -114,10 +114,10 @@ const vimeo = {
// Inject the package // Inject the package
const { poster } = player; const { poster } = player;
if (premium) { if (premium) {
iframe.setAttribute('poster', poster); iframe.setAttribute('data-poster', poster);
player.media = replaceElement(iframe, player.media); player.media = replaceElement(iframe, player.media);
} else { } else {
const wrapper = createElement('div', { class: player.config.classNames.embedContainer, poster }); const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
wrapper.appendChild(iframe); wrapper.appendChild(iframe);
player.media = replaceElement(wrapper, player.media); player.media = replaceElement(wrapper, player.media);
} }

2
src/js/plugins/youtube.js
View File

@ -124,7 +124,7 @@ const youtube = {
// Get poster, if already set // Get poster, if already set
const { poster } = player; const { poster } = player;
// Replace media element // Replace media element
const container = createElement('div', { id, poster }); const container = createElement('div', { id, 'data-poster': poster });
player.media = replaceElement(container, player.media); player.media = replaceElement(container, player.media);
// Id to poster wrapper // Id to poster wrapper

2
src/js/plyr.js
View File

@ -886,7 +886,7 @@ class Plyr {
return null; return null;
} }
return this.media.getAttribute('poster'); return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
} }
/** /**

7
src/js/ui.js
View File

@ -170,12 +170,7 @@ const ui = {
} }
// Set property synchronously to respect the call order // Set property synchronously to respect the call order
this.media.setAttribute('poster', poster); this.media.setAttribute('data-poster', poster);
// HTML5 uses native poster attribute
if (this.isHTML5) {
return Promise.resolve(poster);
}
// Wait until ui is ready // Wait until ui is ready
return ( return (