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

Use only one index.html for testing locally, fixes for limited controls, larger seek handle

Browse Source
This commit is contained in:
Sam Potts 2016-01-14 00:23:57 +11:00
parent bc67d969cb
commit ca8fd08e81
10 changed files with 57 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog.md
View File

@ -9,6 +9,9 @@
- Fix for private/incognito mode local storage bug (fixes #131)
- UMD module setup (fixes #121)
- Specify iframe title for Vimeo and YouTube (fixes #124)
- Better handling of mission controls (fixes #132)
- Retain classname on source change (fixes #120)
- Increased thumb size on seek (partially fixes #130)
## v1.3.5
- Fixed bug with API use on basic supported browsers

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.3.7/docs.css">
<link rel="stylesheet" href="dist/docs.css">
</head>
<body>
<main>

12
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
<link rel="stylesheet" href="../dist/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css">
<link rel="stylesheet" href="dist/docs.css">
</head>
<body>
<header>
@ -79,8 +79,8 @@
<script>
(function() {
[
'https://cdn.plyr.io/1.3.7/sprite.svg',
'https://cdn.plyr.io/1.3.7/docs.svg'
'../dist/sprite.svg',
'dist/docs.svg'
]
.forEach(function(u) {
var x = new XMLHttpRequest(), b = document.body;
@ -99,12 +99,12 @@
</script>
<!-- Plyr core script -->
<script src="https://cdn.plyr.io/1.3.7/plyr.js"></script>
<script src="../dist/plyr.js"></script>
<!-- Shr core script -->
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
<!-- Docs script -->
<script src="https://cdn.plyr.io/1.3.7/docs.js"></script>
<script src="dist/docs.js"></script>
</body>
</html>

130
docs/index.master.html
View File

@ -1,130 +0,0 @@
<!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 HTML5 media player with custom controls and WebVTT captions 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-primary" data-shr-network="github">
<svg class="icon"><use xlink:href="#shr-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-twitter" data-shr-network="twitter">
<svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet
</a>
</li>
</ul>
</nav>
</header>
<main role="main" id="main">
<nav class="btn-bar nav-panel">
<ul>
<li><a href="#video" class="btn active btn-small">Video</a></li>
<li><a href="#youtube" class="btn btn-small">YouTube</a></li>
<li><a href="#audio" class="btn btn-small">Audio</a></li>
</ul>
</nav>
<div class="panels">
<section class="panel example-video active" id="video">
<div class="player">
<video poster="poster.jpg" controls crossorigin>
<!-- Video files -->
<source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
<!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
</video>
</div>
<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
</section>
<section class="panel example-video" id="youtube">
<div class="player">
<div data-video-id="Au87oAJ2jeE" data-type="youtube"></div>
</div>
<small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small>
</section>
<section class="panel example-audio" id="audio">
<div class="player">
<audio controls>
<!-- Audio files -->
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
<!-- Fallback for browsers that don't support the <audio> element -->
<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
</audio>
</div>
<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
</section>
</div>
</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() {
[
"https://cdn.shr.one/0.1.9/sprite.svg",
"../dist/sprite.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 if statement
// XHR for Chrome/Firefox/Opera/Safari
if ("withCredentials" in x) {
x.open("GET", u, true);
}
// XDomainRequest for older IE
else if (typeof XDomainRequest != "undefined") {
x = new XDomainRequest();
x.open("GET", u);
}
else {
return;
}
x.send();
x.onload = function() {
var c = document.createElement("div");
c.setAttribute("hidden", "");
c.innerHTML = x.responseText;
b.insertBefore(c, b.childNodes[0]);
}
});
})();
</script>
<!-- Plyr core script -->
<script src="../src/js/plyr.js"></script>
<!-- Shr core script -->
<script src="https://cdn.shr.one/0.1.9/shr.js"></script>
<!-- Docs script -->
<script src="dist/docs.js"></script>
</body>
</html>

11
gulpfile.js
View File

@ -214,7 +214,8 @@ options = {
// If aws is setup
if("cdn" in aws) {
var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"),
localpath = new RegExp("(\.\.\/)?dist", "gi");
}
// Publish version to CDN bucket
@ -243,14 +244,14 @@ gulp.task("docs", function () {
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(gulp.dest(root));
// Replace versioned files in *.html
// Replace local file paths with remote paths in docs
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
gulp.src([paths.docs.root + "*.html"])
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(gulp.dest(paths.docs.root))
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
.pipe(gzip())
.pipe(s3(aws.docs, options.docs));
// Upload error.html to cdn using docs options
// Upload error.html to cdn (as well as docs site)
gulp.src([paths.docs.root + "error.html"])
.pipe(gzip())
.pipe(s3(aws.cdn, options.docs));

2
readme.md
View File

@ -541,7 +541,7 @@ Vimeo example
```javascript
player.source({
type: 'vimeo',
type: 'video',
title: 'Example title',
sources: [{
src: '143418951',

53
src/js/plyr.js
View File

@ -533,6 +533,11 @@
// Trigger event
function _triggerEvent(element, event) {
// Bail if no element
if(!element || !event) {
return;
}
// Create faux event
var fauxEvent = document.createEvent('MouseEvents');
@ -545,6 +550,11 @@
// Toggle aria-pressed state on a toggle button
function _toggleState(target, state) {
// Bail if no target
if(!target) {
return;
}
// Get state
state = (typeof state === 'boolean' ? state : !target.getAttribute('aria-pressed'));
@ -909,14 +919,14 @@
// Setup aria attribute for play and iframe title
function _setTitle(iframe) {
// Find the current text
var label = plyr.buttons.play.innerText || config.i18n.play;
var label = config.i18n.play;
// If there's a media title set, use that for the label
if (typeof(config.title) !== 'undefined' && config.title.length) {
label += ', ' + config.title;
}
// If there's no play button, bail
// If there's a play button, set label
if (plyr.buttons.play) {
plyr.buttons.play.setAttribute('aria-label', label);
}
@ -2065,6 +2075,24 @@
// IE doesn't support input event, so we fallback to change
var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input');
// Click play/pause helpers
function _onPlay() {
_play();
setTimeout(function() {
if(plyr.buttons.pause) {
plyr.buttons.pause.focus();
}
}, 100);
}
function _onPause() {
_pause();
setTimeout(function() {
if(plyr.buttons.play) {
plyr.buttons.play.focus();
}
}, 100);
}
// Detect tab focus
function checkFocus() {
var focused = document.activeElement;
@ -2095,22 +2123,11 @@
});
}
// Messages
/*_on(window, 'message', function(event) {
_log(event);
});*/
// Play
_on(plyr.buttons.play, 'click', function() {
_play();
setTimeout(function() { plyr.buttons.pause.focus(); }, 100);
});
_on(plyr.buttons.play, 'click', _onPlay);
// Pause
_on(plyr.buttons.pause, 'click', function() {
_pause();
setTimeout(function() { plyr.buttons.play.focus(); }, 100);
});
_on(plyr.buttons.pause, 'click', _onPause);
// Restart
_on(plyr.buttons.restart, 'click', _seek);
@ -2179,14 +2196,14 @@
if (plyr.type === 'video' && config.click) {
_on(plyr.videoContainer, 'click', function() {
if (plyr.media.paused) {
_triggerEvent(plyr.buttons.play, 'click');
_onPlay();
}
else if (plyr.media.ended) {
_seek();
_triggerEvent(plyr.buttons.play, 'click');
_onPlay();
}
else {
_triggerEvent(plyr.buttons.pause, 'click');
_onPause();
}
});
}

17
src/less/plyr.less
View File

@ -113,16 +113,6 @@
border-radius: 100%;
transition: background .3s ease, transform .2s ease;
cursor: ew-resize;
&:hover {
transform: scale(110%);
}
&:active {
height: @volume-thumb-height + 3;
width: @volume-thumb-width + 3;
border: 2px solid @control-bg-hover;
background: #fff !important;
}
}
.volume-track() {
height: @volume-track-height;
@ -133,8 +123,9 @@
.seek-thumb() {
background: transparent;
border: 0;
width: (@control-spacing * 2);
width: (@control-spacing * 4);
height: @control-spacing;
transform: translateX(-50%);
}
.seek-track() {
background: none;
@ -544,10 +535,6 @@
-webkit-appearance: none;
margin-top: -((@volume-thumb-height - @volume-track-height) / 2);
.volume-thumb();
&:active {
margin-top: -(((@volume-thumb-height - @volume-track-height) / 2) + 1);
}
}
// Mozilla