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

Fix for iPad and YouTube issues

Browse Source
This commit is contained in:
Sam Potts 2016-11-27 20:15:15 +11:00
parent 73a1391f2f
commit a44c7ecc3a
6 changed files with 121 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

39
src/js/plyr.js
View File

@ -257,6 +257,7 @@
isChrome: isChrome,
isSafari: isSafari,
isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
isIphone: /(iPhone|iPod)/g.test(navigator.userAgent),
isTouch: 'ontouchstart' in document.documentElement
};
}
@ -3294,6 +3295,9 @@
// Replace the container with the original element provided
plyr.container.parentNode.replaceChild(original, plyr.container);
// Allow overflow (set on fullscreen)
document.body.style.overflow = '';
// Event
_triggerEvent(original, 'destroyed', true);
}
@ -3540,31 +3544,48 @@
var browser = _browserSniff(),
isOldIE = (browser.isIE && browser.version <= 9),
isIos = browser.isIos,
isIphone = /iPhone|iPod/i.test(navigator.userAgent),
audio = !!document.createElement('audio').canPlayType,
video = !!document.createElement('video').canPlayType,
basic, full;
isIphone = browser.isIphone,
audioSupport = !!document.createElement('audio').canPlayType,
videoSupport = !!document.createElement('video').canPlayType,
basic = false,
full = false;
switch (type) {
case 'video':
basic = video;
basic = videoSupport;
full = (basic && (!isOldIE && !isIphone));
break;
case 'audio':
basic = audio;
basic = audioSupport;
full = (basic && !isOldIE);
break;
// Vimeo does not seem to be supported on iOS via API
// Issue raised https://github.com/vimeo/player.js/issues/87
case 'vimeo':
case 'youtube':
case 'soundcloud':
basic = true;
full = (!isOldIE && !isIos);
break;
case 'youtube':
basic = true;
full = (!isOldIE && !isIos);
// YouTube seems to work on iOS 10+ on iPad
if (isIos && !isIphone && browser.version >= 10) {
full = true;
}
break;
case 'soundcloud':
basic = true;
full = (!isOldIE && !isIphone);
break;
default:
basic = (audio && video);
basic = (audioSupport && videoSupport);
full = (basic && !isOldIE);
}

11
src/less/plyr.less
View File

@ -179,9 +179,10 @@
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: inherit;
// Require z-index to force border-radius
// Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0;
iframe {
@ -192,7 +193,6 @@
height: 100%;
border: 0;
user-select: none;
z-index: 1;
}
// Vimeo hack
@ -341,6 +341,7 @@
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
border-bottom-left-radius: inherit;
@ -740,6 +741,10 @@
height: 100%;
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
.plyr__controls {
position: absolute;
bottom: 0;

8
src/scss/plyr.scss
View File

@ -178,10 +178,10 @@
.plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: inherit;
// Require z-index to force border-radius
// Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0;
iframe {
@ -738,6 +738,10 @@
height: 100%;
width: 100%;
}
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
.plyr__controls {
position: absolute;
bottom: 0;