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

Bug fixes

Browse Source
This commit is contained in:
Sam 2016-05-01 00:35:30 +10:00
parent f1b44e6da0
commit c4e3b5a242
7 changed files with 214 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
changelog.md
View File

@ -1,5 +1,11 @@
# Changelog # Changelog
## v1.6.2
- Fix for tooltip displaying when duration is not set (fixes #177)
- `showPosterOnEnd` option to show poster on video finish (fixes #59)
- Error handler for YouTube (fixes #189)
- Initial SoundCloud support (fixes #194)
## v1.6.1 ## v1.6.1
- Tooltip changes for accessibility - Tooltip changes for accessibility

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

129
docs/index.dev.php Normal file
View File

@ -0,0 +1,129 @@
<?php
function base64($type, $file) {
return 'data:video/' . $type . ';base64,' . base64_encode(file_get_contents($file));
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Plyr - A simple HTML5 media player</title>
<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
<meta name="author" content="Sam Potts">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="../dist/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="dist/docs.css">
</head>
<body>
<header>
<h1>Plyr</h1>
<p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
<nav>
<ul>
<li>
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
<svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
<svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
</a>
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<nav class="btn__bar">
<ul>
<li class="active">
<button type="button" class="btn" data-source="video">Video</button>
</li>
<li>
<button type="button" class="btn" data-source="audio">Audio</button>
</li>
<li>
<button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
</li>
<li>
<button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
</li>
</ul>
</nav>
<section>
<div class="js-media-player">
<video controls crossorigin>
<!-- Video files -->
<source type="video/mp4" src="<?php echo base64("mp4", "SampleVideo_1280x720_1mb.mp4"); ?>">
</video>
</div>
<ul>
<li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
<li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
<li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
<li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small>
</ul>
</section>
</main>
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script>
(function() {
[
'../dist/sprite.svg',
'dist/docs.svg'
]
.forEach(function(u) {
var x = new XMLHttpRequest(),
b = document.body;
// Check for CORS support
// If you're loading from same domain, you can remove the whole if/else statement
// XHR for Chrome/Firefox/Opera/Safari/IE10+
if ('withCredentials' in x) {
x.open('GET', u, true);
}
// XDomainRequest for IE8 & IE9
else if (typeof XDomainRequest == 'function') {
x = new XDomainRequest();
x.open('GET', u);
}
else { return; }
// Inject hidden div with sprite on load
x.onload = function() {
var c = document.createElement('div');
c.setAttribute('hidden', '');
c.innerHTML = x.responseText;
b.insertBefore(c, b.childNodes[0]);
}
// Timeout for IE9
setTimeout(function () {
x.send();
}, 0);
});
})();
</script>
<!-- Plyr core script -->
<script src="../src/js/plyr.js"></script>
<!-- Docs script -->
<script src="dist/docs.js"></script>
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
<script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js"></script>
<!-- Sharing libary (https://shr.one) -->
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
<script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
</body>
</html>

64
src/js/plyr.js
View File

@ -42,6 +42,7 @@
iconUrl: '', iconUrl: '',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
showPosterOnEnd: true,
tooltips: { tooltips: {
controls: false, controls: false,
seek: true seek: true
@ -1850,10 +1851,8 @@
targetTime = duration; targetTime = duration;
} }
// Update progress // Update seek range and progress
if (plyr.progress && plyr.progress.played) { _updateSeekDisplay(targetTime);
plyr.progress.played.value = ((100 / duration) * targetTime);
}
// Set the current time // Set the current time
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
@ -1901,10 +1900,18 @@
// Get the duration (or custom if set) // Get the duration (or custom if set)
function _getDuration() { function _getDuration() {
// It should be a number, but parse it just incase // It should be a number, but parse it just incase
var duration = parseInt(config.duration); var duration = parseInt(config.duration),
// True duration
mediaDuration = 0;
// Only if duration available
if(plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
mediaDuration = plyr.media.duration;
}
// If custom duration is funky, use regular duration // If custom duration is funky, use regular duration
return (isNaN(duration) ? plyr.media.duration : duration); return (isNaN(duration) ? mediaDuration : duration);
} }
// Check playing state // Check playing state
@ -2271,10 +2278,33 @@
_updateProgress(event); _updateProgress(event);
} }
// Update seek range and progress
function _updateSeekDisplay(time) {
// Default to 0
if (typeof time !== 'number') {
time = 0;
}
var duration = _getDuration(),
value = _getPercentage(time, duration);
// Update progress
if (plyr.progress && plyr.progress.played) {
plyr.progress.played.value = value;
}
// Update seek range input
if (plyr.buttons && plyr.buttons.seek) {
plyr.buttons.seek.value = value;
}
}
// Update hover tooltip for seeking // Update hover tooltip for seeking
function _updateSeekTooltip(event) { function _updateSeekTooltip(event) {
var duration = _getDuration();
// Bail if setting not true // Bail if setting not true
if (!config.tooltips.seek || plyr.browser.touch || !plyr.progress.container) { if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
return; return;
} }
@ -2305,7 +2335,7 @@
} }
// Display the time a click would seek to // Display the time a click would seek to
_updateTimeDisplay(((_getDuration() / 100) * percent), plyr.progress.tooltip); _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
// Set position // Set position
plyr.progress.tooltip.style.left = percent + "%"; plyr.progress.tooltip.style.left = percent + "%";
@ -2423,13 +2453,8 @@
// Pause playback // Pause playback
_pause(); _pause();
// Set seek input to 0 // Update seek range and progress
if (plyr.buttons && plyr.buttons.seek) { _updateSeekDisplay();
plyr.buttons.seek.value = 0;
}
if (plyr.progress && plyr.progress.played) {
plyr.progress.played.value = 0;
}
// Cancel current network requests // Cancel current network requests
_cancelRequests(); _cancelRequests();
@ -2722,6 +2747,15 @@
// Reset UI // Reset UI
_checkPlaying(); _checkPlaying();
// Show poster on end
if(config.showPosterOnEnd) {
// Seek to 0
_seek(0);
// Re-load media
plyr.media.load();
}
}); });
// Check for buffer progress // Check for buffer progress

27
src/less/plyr.less
View File

@ -206,7 +206,6 @@
font-size: @plyr-font-size-captions-base; font-size: @plyr-font-size-captions-base;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased;
span { span {
border-radius: 2px; border-radius: 2px;
@ -436,7 +435,6 @@
color: @plyr-tooltip-color; color: @plyr-tooltip-color;
font-size: @plyr-font-size-small; font-size: @plyr-font-size-small;
line-height: 1.3; line-height: 1.3;
-webkit-font-smoothing: subpixel-antialiased;
transform: translate(-50%, 10px) scale(.8); transform: translate(-50%, 10px) scale(.8);
transform-origin: 50% 100%; transform-origin: 50% 100%;
@ -498,9 +496,9 @@
} }
} }
.plyr__progress--buffer[value], .plyr__progress--buffer,
.plyr__progress--played[value], .plyr__progress--played,
.plyr__volume--display[value] { .plyr__volume--display {
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
@ -530,8 +528,8 @@
border-radius: 100px; border-radius: 100px;
} }
} }
.plyr__progress--played[value], .plyr__progress--played,
.plyr__volume--display[value] { .plyr__volume--display {
z-index: 1; z-index: 1;
color: @plyr-range-selected-bg; color: @plyr-range-selected-bg;
background: transparent; background: transparent;
@ -553,7 +551,7 @@
display: none; display: none;
} }
} }
.plyr__progress--buffer[value] { .plyr__progress--buffer {
&::-webkit-progress-value { &::-webkit-progress-value {
transition: width .2s ease; transition: width .2s ease;
} }
@ -564,18 +562,18 @@
transition: width .2s ease; transition: width .2s ease;
} }
} }
.plyr--video .plyr__progress--buffer[value], .plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display[value] { .plyr--video .plyr__volume--display {
background: @plyr-video-range-track-bg; background: @plyr-video-range-track-bg;
} }
.plyr--video .plyr__progress--buffer[value] { .plyr--video .plyr__progress--buffer {
color: @plyr-video-progress-buffered-bg; color: @plyr-video-progress-buffered-bg;
} }
.plyr--audio .plyr__progress--buffer[value], .plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display[value] { .plyr--audio .plyr__volume--display {
background: @plyr-audio-range-track-bg; background: @plyr-audio-range-track-bg;
} }
.plyr--audio .plyr__progress--buffer[value] { .plyr--audio .plyr__progress--buffer {
color: @plyr-audio-progress-buffered-bg; color: @plyr-audio-progress-buffered-bg;
} }
@ -609,7 +607,6 @@
vertical-align: middle; vertical-align: middle;
font-size: @plyr-font-size-small; font-size: @plyr-font-size-small;
line-height: .95; line-height: .95;
-webkit-font-smoothing: subpixel-antialiased;
} }
// Media duration hidden on small screens // Media duration hidden on small screens
.plyr__time + .plyr__time { .plyr__time + .plyr__time {

27
src/scss/plyr.scss
View File

@ -206,7 +206,6 @@
font-size: $plyr-font-size-captions-base; font-size: $plyr-font-size-captions-base;
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased;
span { span {
border-radius: 2px; border-radius: 2px;
@ -436,7 +435,6 @@
color: $plyr-tooltip-color; color: $plyr-tooltip-color;
font-size: $plyr-font-size-small; font-size: $plyr-font-size-small;
line-height: 1.3; line-height: 1.3;
-webkit-font-smoothing: subpixel-antialiased;
transform: translate(-50%, 10px) scale(.8); transform: translate(-50%, 10px) scale(.8);
transform-origin: 50% 100%; transform-origin: 50% 100%;
@ -498,9 +496,9 @@
} }
} }
.plyr__progress--buffer[value], .plyr__progress--buffer,
.plyr__progress--played[value], .plyr__progress--played,
.plyr__volume--display[value] { .plyr__volume--display {
position: absolute; position: absolute;
left: 0; left: 0;
top: 50%; top: 50%;
@ -530,8 +528,8 @@
border-radius: 100px; border-radius: 100px;
} }
} }
.plyr__progress--played[value], .plyr__progress--played,
.plyr__volume--display[value] { .plyr__volume--display {
z-index: 1; z-index: 1;
color: $plyr-range-selected-bg; color: $plyr-range-selected-bg;
background: transparent; background: transparent;
@ -553,7 +551,7 @@
display: none; display: none;
} }
} }
.plyr__progress--buffer[value] { .plyr__progress--buffer {
&::-webkit-progress-value { &::-webkit-progress-value {
transition: width .2s ease; transition: width .2s ease;
} }
@ -564,18 +562,18 @@
transition: width .2s ease; transition: width .2s ease;
} }
} }
.plyr--video .plyr__progress--buffer[value], .plyr--video .plyr__progress--buffer,
.plyr--video .plyr__volume--display[value] { .plyr--video .plyr__volume--display {
background: $plyr-video-range-track-bg; background: $plyr-video-range-track-bg;
} }
.plyr--video .plyr__progress--buffer[value] { .plyr--video .plyr__progress--buffer {
color: $plyr-video-progress-buffered-bg; color: $plyr-video-progress-buffered-bg;
} }
.plyr--audio .plyr__progress--buffer[value], .plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display[value] { .plyr--audio .plyr__volume--display {
background: $plyr-audio-range-track-bg; background: $plyr-audio-range-track-bg;
} }
.plyr--audio .plyr__progress--buffer[value] { .plyr--audio .plyr__progress--buffer {
color: $plyr-audio-progress-buffered-bg; color: $plyr-audio-progress-buffered-bg;
} }
@ -609,7 +607,6 @@
vertical-align: middle; vertical-align: middle;
font-size: $plyr-font-size-small; font-size: $plyr-font-size-small;
line-height: .95; line-height: .95;
-webkit-font-smoothing: subpixel-antialiased;
} }
// Media duration hidden on small screens // Media duration hidden on small screens
.plyr__time + .plyr__time { .plyr__time + .plyr__time {