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 Potts 2016-05-01 11:30:51 +10:00
parent c4e3b5a242
commit e11a58a841
4 changed files with 24 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -7,3 +7,5 @@ docs/index.dev.html
*.mp4
index-dev.html
notes.txt
*.vtt
docs/index.dev.php

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

129
docs/index.dev.php
View File

@ -1,129 +0,0 @@
<?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>

73
src/js/plyr.js
View File

@ -42,7 +42,6 @@
iconUrl: '',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: true,
tooltips: {
controls: false,
seek: true
@ -1828,9 +1827,9 @@
// Seek to time
// The input parameter can be an event or a number
function _seek(input) {
var targetTime = 0,
paused = plyr.media.paused,
duration = _getDuration();
var targetTime = 0,
paused = plyr.media.paused,
duration = _getDuration();
// Explicit position
if (typeof input === 'number') {
@ -1851,8 +1850,10 @@
targetTime = duration;
}
// Update seek range and progress
_updateSeekDisplay(targetTime);
// Update progress
if (plyr.progress && plyr.progress.played) {
plyr.progress.played.value = ((100 / duration) * targetTime);
}
// Set the current time
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
@ -1900,18 +1901,10 @@
// Get the duration (or custom if set)
function _getDuration() {
// It should be a number, but parse it just incase
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;
}
var duration = parseInt(config.duration);
// If custom duration is funky, use regular duration
return (isNaN(duration) ? mediaDuration : duration);
return (isNaN(duration) ? plyr.media.duration : duration);
}
// Check playing state
@ -2278,33 +2271,10 @@
_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
function _updateSeekTooltip(event) {
var duration = _getDuration();
// Bail if setting not true
if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
if (!config.tooltips.seek || plyr.browser.touch || !plyr.progress.container) {
return;
}
@ -2335,7 +2305,7 @@
}
// Display the time a click would seek to
_updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
_updateTimeDisplay(((_getDuration() / 100) * percent), plyr.progress.tooltip);
// Set position
plyr.progress.tooltip.style.left = percent + "%";
@ -2453,8 +2423,13 @@
// Pause playback
_pause();
// Update seek range and progress
_updateSeekDisplay();
// Set seek input to 0
if (plyr.buttons && plyr.buttons.seek) {
plyr.buttons.seek.value = 0;
}
if (plyr.progress && plyr.progress.played) {
plyr.progress.played.value = 0;
}
// Cancel current network requests
_cancelRequests();
@ -2747,15 +2722,6 @@
// Reset UI
_checkPlaying();
// Show poster on end
if(config.showPosterOnEnd) {
// Seek to 0
_seek(0);
// Re-load media
plyr.media.load();
}
});
// Check for buffer progress
@ -2819,7 +2785,8 @@
// Set blank video src attribute
// This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
// Credit: https://github.com/mathiasbynens/small/blob/master/mp4.mp4
// Small mp4: https://github.com/mathiasbynens/small/blob/master/mp4.mp4
// Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
plyr.media.setAttribute('src', 'data:video/mp4;base64,AAAAHGZ0eXBpc29tAAACAGlzb21pc28ybXA0MQAAAAhmcmVlAAAAGm1kYXQAAAGzABAHAAABthBgUYI9t+8AAAMNbW9vdgAAAGxtdmhkAAAAAMXMvvrFzL76AAAD6AAAACoAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAABhpb2RzAAAAABCAgIAHAE/////+/wAAAiF0cmFrAAAAXHRraGQAAAAPxcy++sXMvvoAAAABAAAAAAAAACoAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAgAAAAIAAAAAAG9bWRpYQAAACBtZGhkAAAAAMXMvvrFzL76AAAAGAAAAAEVxwAAAAAALWhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABWaWRlb0hhbmRsZXIAAAABaG1pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAShzdGJsAAAAxHN0c2QAAAAAAAAAAQAAALRtcDR2AAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAgACABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAXmVzZHMAAAAAA4CAgE0AAQAEgICAPyARAAAAAAMNQAAAAAAFgICALQAAAbABAAABtYkTAAABAAAAASAAxI2IAMUARAEUQwAAAbJMYXZjNTMuMzUuMAaAgIABAgAAABhzdHRzAAAAAAAAAAEAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAAAQAAAAEAAAAUc3RzegAAAAAAAAASAAAAAQAAABRzdGNvAAAAAAAAAAEAAAAsAAAAYHVkdGEAAABYbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAbWRpcmFwcGwAAAAAAAAAAAAAAAAraWxzdAAAACOpdG9vAAAAG2RhdGEAAAABAAAAAExhdmY1My4yMS4x');
// Load the new empty source