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>
</header>
<main>
<!-- style="--plyr-color-main: #47bb4d; --plyr-video-control-background-hover: var(--plyr-color-main); " -->
<div id="container" style="--plyr-color-main: #1ac266;">
<div id="container">
<video
controls
crossorigin
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"
>
<!-- Video files -->

12
src/js/media.js
View File

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

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

@ -114,10 +114,10 @@ const vimeo = {
// Inject the package
const { poster } = player;
if (premium) {
iframe.setAttribute('poster', poster);
iframe.setAttribute('data-poster', poster);
player.media = replaceElement(iframe, player.media);
} 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);
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
const { poster } = player;
// Replace media element
const container = createElement('div', { id, poster });
const container = createElement('div', { id, 'data-poster': poster });
player.media = replaceElement(container, player.media);
// Id to poster wrapper

2
src/js/plyr.js
View File

@ -886,7 +886,7 @@ class Plyr {
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
this.media.setAttribute('poster', poster);
// HTML5 uses native poster attribute
if (this.isHTML5) {
return Promise.resolve(poster);
}
this.media.setAttribute('data-poster', poster);
// Wait until ui is ready
return (