Compare commits

...

5 Commits

Author SHA1 Message Date
9feffb2972 Version bump 2015-03-15 10:18:56 +11:00
acea5cdb24 Built js 2015-03-15 10:14:00 +11:00
55ed577b6a Indentation
Converted to 4 space width tabbing
2015-03-15 10:12:36 +11:00
20b206a161 Merge pull request #62 from brunowego/patch-1
Updated SASS support
2015-03-15 10:00:00 +11:00
9c028a0ecc Updated SASS support 2015-03-14 15:50:32 -03:00
16 changed files with 1510 additions and 1500 deletions

View File

@ -1,33 +1,33 @@
{ {
"name": "plyr", "name": "plyr",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"keywords": [ "keywords": [
"Audio", "Audio",
"Video", "Video",
"HTML5 Audio", "HTML5 Audio",
"HTml5 Video" "HTml5 Video"
], ],
"authors": [ "authors": [
"Sam Potts <me@sampotts.me>" "Sam Potts <me@sampotts.me>"
], ],
"dependencies": {}, "dependencies": {},
"main": [ "main": [
"dist/plyr.css", "dist/plyr.css",
"dist/plyr.js", "dist/plyr.js",
"dist/sprite.svg", "dist/sprite.svg",
"src/less/plyr.less", "src/less/plyr.less",
"src/sass/plyr.sass", "src/sass/plyr.sass",
"src/js/plyr.js" "src/js/plyr.js"
], ],
"ignore": [ "ignore": [
"node_modules", "node_modules",
"bower_components", "bower_components",
".gitignore" ".gitignore"
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/selz/plyr.git" "url": "git://github.com/selz/plyr.git"
}, },
"license": "MIT" "license": "MIT"
} }

View File

@ -1,25 +1,25 @@
{ {
"plyr": { "plyr": {
"less": { "less": {
"plyr.css": ["src/less/plyr.less"] "plyr.css": ["src/less/plyr.less"]
}, },
"sass": { "sass": {
"plyr.css": ["src/less/plyr.sass"] "plyr.css": ["src/less/plyr.sass"]
}, },
"js": { "js": {
"plyr.js": ["src/js/plyr.js"] "plyr.js": ["src/js/plyr.js"]
} }
}, },
"docs": { "docs": {
"less": { "less": {
"docs.css": ["docs/src/less/docs.less"] "docs.css": ["docs/src/less/docs.less"]
}, },
"js": { "js": {
"docs.js": [ "docs.js": [
"docs/src/js/lib/hogan-3.0.2.mustache.js", "docs/src/js/lib/hogan-3.0.2.mustache.js",
"docs/dist/templates.js", "docs/dist/templates.js",
"docs/src/js/docs.js" "docs/src/js/docs.js"
] ]
} }
} }
} }

View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## v1.0.26
- Fixes for SASS (cheers @brunowego)
- Indentation reset to 4 spaces
## v1.0.25 ## v1.0.25
- Fixes for iOS volume controls (hidden) - Fixes for iOS volume controls (hidden)
- Classnames for left/right controls changed - Classnames for left/right controls changed

2
docs/dist/docs.js vendored

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
var templates = {}; var templates = {};
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }}); templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <div class=\"player-progress\">");t.b("\n" + i);t.b(" <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b(" <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b(" <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% buffered");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" <span class=\"player-controls-left\">");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-right\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});

View File

@ -1,18 +1,18 @@
<!doctype html> <!doctype html>
<html lang="en" class="error"> <html lang="en" class="error">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Doh. Looks like something went wrong.</title> <title>Doh. Looks like something went wrong.</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
</head> </head>
<body> <body>
<main> <main>
<h1>Doh.</h1> <h1>Doh.</h1>
<p>Looks like something went wrong.</p> <p>Looks like something went wrong.</p>
<a href="http://plyr.io" class="btn">Back to plyr.io</a> <a href="http://plyr.io" class="btn">Back to plyr.io</a>
</main> </main>
</body> </body>
</html> </html>

View File

@ -1,79 +1,79 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Plyr - A simple HTML5 media player</title> <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="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
<meta name="author" content="Sam Potts"> <meta name="author" content="Sam Potts">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
</head> </head>
<body> <body>
<header> <header>
<h1>Plyr</h1> <h1>Plyr</h1>
<p>A simple HTML5 media player with custom controls and WebVTT captions.</p> <p>A simple HTML5 media player with custom controls and WebVTT captions.</p>
<a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a> <a href="https://github.com/selz/plyr" target="_blank" class="btn">Download on GitHub</a>
</header> </header>
<main> <main>
<section class="example-video"> <section class="example-video">
<div class="player"> <div class="player">
<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin> <video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
<!-- Video files --> <!-- Video files -->
<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4"> <source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> <source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
<!-- Text track file --> <!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default> <track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>
<!-- Fallback for browsers that don't support the <video> element --> <!-- Fallback for browsers that don't support the <video> element -->
<div> <div>
<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a> <a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
</div> </div>
</video> </video>
</div> </div>
<small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small> <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>
<section class="example-audio"> <section class="example-audio">
<div class="player"> <div class="player">
<audio controls> <audio controls>
<!-- Audio files --> <!-- 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.mp3" type="audio/mp3">
<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg"> <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 --> <!-- Fallback for browsers that don't support the <audio> element -->
<div> <div>
<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a> <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
</div> </div>
</audio> </audio>
</div> </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> <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> </section>
</main> </main>
<footer> <footer>
<p>Used by &hellip;</p> <p>Used by &hellip;</p>
<a href="https://selz.com" target="_blank" class="logo"> <a href="https://selz.com" target="_blank" class="logo">
<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz"> <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
</a> </a>
</footer> </footer>
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <script>
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.25/sprite.svg"); (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.26/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script> <script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="//cdn.plyr.io/1.0.25/docs.js"></script> <script src="//cdn.plyr.io/1.0.26/docs.js"></script>
</body> </body>
</html> </html>

View File

@ -12,153 +12,153 @@
// Variables // Variables
// --------------------------------------- // ---------------------------------------
// Colors // Colors
@blue: #3498DB; @blue: #3498DB;
@gray-dark: #343f4a; @gray-dark: #343f4a;
@gray: #565d64; @gray: #565d64;
@gray-light: #cbd0d3; @gray-light: #cbd0d3;
// Elements // Elements
@link-color: @blue; @link-color: @blue;
@padding-base: 20px; @padding-base: 20px;
// Breakpoints // Breakpoints
@screen-md: 768px; @screen-md: 768px;
// BORDER-BOX ALL THE THINGS! // BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/ // http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before { *, *::after, *::before {
box-sizing: border-box; box-sizing: border-box;
} }
// Base // Base
body { body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff; background: #fff;
line-height: 1.5; line-height: 1.5;
text-align: center; text-align: center;
color: #6D797F; color: #6D797F;
} }
// Error page // Error page
html.error, html.error,
.error body { .error body {
height: 100%; height: 100%;
} }
.error body { .error body {
width: 100%; width: 100%;
display: table; display: table;
table-layout: fixed; table-layout: fixed;
} }
.error main { .error main {
display: table-cell; display: table-cell;
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
} }
// Type // Type
h1, h1,
h2 { h2 {
letter-spacing: -.025em; letter-spacing: -.025em;
color: #2E3C44; color: #2E3C44;
margin: 0 0 (@padding-base / 2); margin: 0 0 (@padding-base / 2);
line-height: 1.2; line-height: 1.2;
.font-smoothing(); .font-smoothing();
} }
h1 { h1 {
.font-size(64); .font-size(64);
color: #3498DB; color: #3498DB;
} }
p, p,
small { small {
margin: 0 0 @padding-base; margin: 0 0 @padding-base;
} }
small { small {
display: block; display: block;
padding: 0 (@padding-base / 2); padding: 0 (@padding-base / 2);
.font-size(14); .font-size(14);
} }
// Header // Header
header { header {
padding: @padding-base; padding: @padding-base;
margin-bottom: @padding-base; margin-bottom: @padding-base;
p { p {
.font-size(18); .font-size(18);
} }
@media (min-width: 560px) { @media (min-width: 560px) {
padding-top: (@padding-base * 3); padding-top: (@padding-base * 3);
padding-bottom: (@padding-base * 3); padding-bottom: (@padding-base * 3);
} }
} }
// Sections // Sections
section { section {
padding-bottom: @padding-base; padding-bottom: @padding-base;
@media (min-width: 560px) { @media (min-width: 560px) {
padding-bottom: (@padding-base * 2); padding-bottom: (@padding-base * 2);
} }
} }
// Links & Buttons // Links & Buttons
a { a {
text-decoration: none; text-decoration: none;
color: @link-color; color: @link-color;
border-bottom: 1px solid currentColor; border-bottom: 1px solid currentColor;
transition: all .3s ease; transition: all .3s ease;
&:hover, &:hover,
&:focus { &:focus {
color: #000; color: #000;
} }
&:focus { &:focus {
.tab-focus(); .tab-focus();
} }
&.logo { &.logo {
border: 0; border: 0;
} }
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: (@padding-base / 2) (@padding-base * 1.5); padding: (@padding-base / 2) (@padding-base * 1.5);
background: @link-color; background: @link-color;
border: 0; border: 0;
color: #fff; color: #fff;
.font-smoothing(on); .font-smoothing(on);
font-weight: 600; font-weight: 600;
border-radius: 3px; border-radius: 3px;
user-select: none; user-select: none;
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
background: darken(@link-color, 5%); background: darken(@link-color, 5%);
} }
} }
// Players // Players
.example-audio .player { .example-audio .player {
max-width: 480px; max-width: 480px;
} }
.example-video .player { .example-video .player {
max-width: 1200px; max-width: 1200px;
} }
.example-audio .player, .example-audio .player,
.example-video .player { .example-video .player {
margin: 0 auto @padding-base; margin: 0 auto @padding-base;
&-fullscreen, &-fullscreen,
&.fullscreen-active { &.fullscreen-active {
max-width: none; max-width: none;
} }
} }
// Footer // Footer
footer { footer {
margin-bottom: @padding-base; margin-bottom: @padding-base;
p { p {
margin-bottom: (@padding-base / 2); margin-bottom: (@padding-base / 2);
} }
} }

View File

@ -1,16 +1,16 @@
@font-face { @font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"),
url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype"); url("//cdn.plyr.io/fonts/avenir-medium.ttf") format("truetype");
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
} }
@font-face { @font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"),
url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"),
url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype"); url("//cdn.plyr.io/fonts/avenir-bold.ttf") format("truetype");
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
} }

View File

@ -5,38 +5,38 @@
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
// --------------------------------------- // ---------------------------------------
.clearfix() { .clearfix() {
zoom: 1; zoom: 1;
&:before, &:before,
&:after { content: ""; display: table; } &:after { content: ""; display: table; }
&:after { clear: both; } &:after { clear: both; }
} }
// Webkit-style focus // Webkit-style focus
// --------------------------------------- // ---------------------------------------
.tab-focus() { .tab-focus() {
// Default // Default
outline: thin dotted @gray-dark; outline: thin dotted @gray-dark;
// Webkit // Webkit
//outline: 5px auto -webkit-focus-ring-color; //outline: 5px auto -webkit-focus-ring-color;
outline-offset: 1px; outline-offset: 1px;
} }
// Use rems for font sizing // Use rems for font sizing
// Leave <body> at 100%/16px // Leave <body> at 100%/16px
// --------------------------------------- // ---------------------------------------
.font-size(@font-size: 16){ .font-size(@font-size: 16){
@rem: round((@font-size / 16), 1); @rem: round((@font-size / 16), 1);
font-size: (@font-size * 1px); font-size: (@font-size * 1px);
font-size: ~"@{rem}rem"; font-size: ~"@{rem}rem";
} }
// Font smoothing // Font smoothing
// --------------------------------------- // ---------------------------------------
.font-smoothing(@mode: on) when (@mode = on) { .font-smoothing(@mode: on) when (@mode = on) {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.font-smoothing(@mode: on) when (@mode = off) { .font-smoothing(@mode: on) when (@mode = off) {
-moz-osx-font-smoothing: auto; -moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }

View File

@ -1,62 +1,62 @@
<div class="player-controls"> <div class="player-controls">
<div class="player-progress"> <div class="player-progress">
<label for="seek{id}" class="sr-only">Seek</label> <label for="seek{id}" class="sr-only">Seek</label>
<input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek"> <input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">
<progress class="player-progress-played" max="100" value="0"> <progress class="player-progress-played" max="100" value="0">
<span>0</span>% played <span>0</span>% played
</progress> </progress>
<progress class="player-progress-buffer" max="100" value="0"> <progress class="player-progress-buffer" max="100" value="0">
<span>0</span>% buffered <span>0</span>% buffered
</progress> </progress>
</div> </div>
<span class="player-controls-left"> <span class="player-controls-left">
<button type="button" data-player="restart"> <button type="button" data-player="restart">
<svg><use xlink:href="#icon-restart"></use></svg> <svg><use xlink:href="#icon-restart"></use></svg>
<span class="sr-only">Restart</span> <span class="sr-only">Restart</span>
</button> </button>
<button type="button" data-player="rewind"> <button type="button" data-player="rewind">
<svg><use xlink:href="#icon-rewind"></use></svg> <svg><use xlink:href="#icon-rewind"></use></svg>
<span class="sr-only">Rewind {seektime} secs</span> <span class="sr-only">Rewind {seektime} secs</span>
</button> </button>
<button type="button" data-player="play"> <button type="button" data-player="play">
<svg><use xlink:href="#icon-play"></use></svg> <svg><use xlink:href="#icon-play"></use></svg>
<span class="sr-only">Play</span> <span class="sr-only">Play</span>
</button> </button>
<button type="button" data-player="pause"> <button type="button" data-player="pause">
<svg><use xlink:href="#icon-pause"></use></svg> <svg><use xlink:href="#icon-pause"></use></svg>
<span class="sr-only">Pause</span> <span class="sr-only">Pause</span>
</button> </button>
<button type="button" data-player="fast-forward"> <button type="button" data-player="fast-forward">
<svg><use xlink:href="#icon-fast-forward"></use></svg> <svg><use xlink:href="#icon-fast-forward"></use></svg>
<span class="sr-only">Forward {seektime} secs</span> <span class="sr-only">Forward {seektime} secs</span>
</button> </button>
<span class="player-time"> <span class="player-time">
<span class="sr-only">Time</span> <span class="sr-only">Time</span>
<span class="player-duration">00:00</span> <span class="player-duration">00:00</span>
</span> </span>
</span> </span>
<span class="player-controls-right"> <span class="player-controls-right">
<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute"> <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
<label id="mute{id}" for="mute{id}"> <label id="mute{id}" for="mute{id}">
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg> <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
<svg><use xlink:href="#icon-volume"></use></svg> <svg><use xlink:href="#icon-volume"></use></svg>
<span class="sr-only">Toggle Mute</span> <span class="sr-only">Toggle Mute</span>
</label> </label>
<label for="volume{id}" class="sr-only">Volume</label> <label for="volume{id}" class="sr-only">Volume</label>
<input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume"> <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
<input class="sr-only" id="captions{id}" type="checkbox" data-player="captions"> <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
<label for="captions{id}"> <label for="captions{id}">
<svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg> <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>
<svg><use xlink:href="#icon-captions-off"></use></svg> <svg><use xlink:href="#icon-captions-off"></use></svg>
<span class="sr-only">Toggle Captions</span> <span class="sr-only">Toggle Captions</span>
</label> </label>
<button type="button" data-player="fullscreen"> <button type="button" data-player="fullscreen">
<svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg> <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>
<svg><use xlink:href="#icon-enter-fullscreen"></use></svg> <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>
<span class="sr-only">Toggle Fullscreen</span> <span class="sr-only">Toggle Fullscreen</span>
</button> </button>
</span> </span>
</div> </div>

View File

@ -4,59 +4,59 @@
/*global require, __dirname*/ /*global require, __dirname*/
/*jshint -W079 */ /*jshint -W079 */
var fs = require("fs"), var fs = require("fs"),
path = require("path"), path = require("path"),
gulp = require("gulp"), gulp = require("gulp"),
gutil = require("gulp-util"), gutil = require("gulp-util"),
concat = require("gulp-concat"), concat = require("gulp-concat"),
uglify = require("gulp-uglify"), uglify = require("gulp-uglify"),
less = require("gulp-less"), less = require("gulp-less"),
sass = require("gulp-sass"), sass = require("gulp-sass"),
minify = require("gulp-minify-css"), minify = require("gulp-minify-css"),
run = require("run-sequence"), run = require("run-sequence"),
prefix = require("gulp-autoprefixer"), prefix = require("gulp-autoprefixer"),
svgstore = require("gulp-svgstore"), svgstore = require("gulp-svgstore"),
svgmin = require("gulp-svgmin"), svgmin = require("gulp-svgmin"),
hogan = require("gulp-hogan-compile"), hogan = require("gulp-hogan-compile"),
rename = require("gulp-rename"), rename = require("gulp-rename"),
s3 = require("gulp-s3"), s3 = require("gulp-s3"),
gzip = require("gulp-gzip"), gzip = require("gulp-gzip"),
replace = require("gulp-replace"), replace = require("gulp-replace"),
open = require("gulp-open"); open = require("gulp-open");
var root = __dirname, var root = __dirname,
paths = { paths = {
plyr: { plyr: {
// Source paths // Source paths
src: { src: {
less: path.join(root, "src/less/**/*"), less: path.join(root, "src/less/**/*"),
sass: path.join(root, "src/sass/**/*"), sass: path.join(root, "src/sass/**/*"),
js: path.join(root, "src/js/**/*"), js: path.join(root, "src/js/**/*"),
sprite: path.join(root, "src/sprite/*.svg") sprite: path.join(root, "src/sprite/*.svg")
}, },
// Output paths // Output paths
output: path.join(root, "dist/") output: path.join(root, "dist/")
}, },
docs: { docs: {
// Source paths // Source paths
src: { src: {
less: path.join(root, "docs/src/less/**/*"), less: path.join(root, "docs/src/less/**/*"),
js: path.join(root, "docs/src/js/**/*"), js: path.join(root, "docs/src/js/**/*"),
templates: path.join(root, "docs/src/templates/*.html") templates: path.join(root, "docs/src/templates/*.html")
}, },
// Output paths // Output paths
output: path.join(root, "docs/dist/"), output: path.join(root, "docs/dist/"),
// Docs // Docs
root: path.join(root, "docs/") root: path.join(root, "docs/")
}, },
upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")] upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
}, },
// Task arrays // Task arrays
tasks = { tasks = {
less: [], less: [],
sass: [], sass: [],
js: [] js: []
}, },
// Fetch bundles from JSON // Fetch bundles from JSON
@ -69,88 +69,88 @@ function loadJSON(path) {
} }
var build = { var build = {
js: function (files, bundle) { js: function (files, bundle) {
for (var key in files) { for (var key in files) {
(function(key) { (function(key) {
var name = "js-" + key; var name = "js-" + key;
tasks.js.push(name); tasks.js.push(name);
gulp.task(name, function () { gulp.task(name, function () {
return gulp return gulp
.src(bundles[bundle].js[key]) .src(bundles[bundle].js[key])
.pipe(concat(key)) .pipe(concat(key))
.pipe(uglify()) .pipe(uglify())
.pipe(gulp.dest(paths[bundle].output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
less: function(files, bundle) { less: function(files, bundle) {
for (var key in files) { for (var key in files) {
(function (key) { (function (key) {
var name = "less-" + key; var name = "less-" + key;
tasks.less.push(name); tasks.less.push(name);
gulp.task(name, function () { gulp.task(name, function () {
return gulp return gulp
.src(bundles[bundle].less[key]) .src(bundles[bundle].less[key])
.pipe(less()) .pipe(less())
.on("error", gutil.log) .on("error", gutil.log)
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minify()) .pipe(minify())
.pipe(gulp.dest(paths[bundle].output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
sass: function(files, bundle) { sass: function(files, bundle) {
for (var key in files) { for (var key in files) {
(function (key) { (function (key) {
var name = "sass-" + key; var name = "sass-" + key;
tasks.sass.push(name); tasks.sass.push(name);
gulp.task(name, function () { gulp.task(name, function () {
return gulp return gulp
.src(bundles[bundle].sass[key]) .src(bundles[bundle].sass[key])
.pipe(sass()) .pipe(sass())
.on("error", gutil.log) .on("error", gutil.log)
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minify()) .pipe(minify())
.pipe(gulp.dest(paths[bundle].output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
sprite: function() { sprite: function() {
// Process Icons // Process Icons
gulp.task("sprite", function () { gulp.task("sprite", function () {
return gulp return gulp
.src(paths.plyr.src.sprite) .src(paths.plyr.src.sprite)
.pipe(svgmin({ .pipe(svgmin({
plugins: [{ plugins: [{
removeDesc: true removeDesc: true
}] }]
})) }))
.pipe(svgstore()) .pipe(svgstore())
.pipe(gulp.dest(paths.plyr.output)); .pipe(gulp.dest(paths.plyr.output));
}); });
}, },
templates: function() { templates: function() {
// Build templates // Build templates
gulp.task("templates", function () { gulp.task("templates", function () {
return gulp return gulp
.src(paths.docs.src.templates) .src(paths.docs.src.templates)
.pipe(hogan("templates.js", { .pipe(hogan("templates.js", {
wrapper: false, wrapper: false,
templateName: function (file) { templateName: function (file) {
return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
} }
})) }))
.pipe(gulp.dest(paths.docs.output)); .pipe(gulp.dest(paths.docs.output));
}); });
} }
}; };
// Plyr core files // Plyr core files
@ -166,22 +166,22 @@ build.js(bundles.docs.js, "docs");
// Default gulp task // Default gulp task
gulp.task("default", function(){ gulp.task("default", function(){
run("templates", tasks.js, tasks.less, "sprite"); run("templates", tasks.js, tasks.less, "sprite");
}); });
// Build all JS (inc. templates) // Build all JS (inc. templates)
gulp.task("js", function(){ gulp.task("js", function(){
run("templates", tasks.js); run("templates", tasks.js);
}); });
// Build SASS (for testing, default is LESS) // Build SASS (for testing, default is LESS)
gulp.task("sass", function(){ gulp.task("sass", function(){
run(tasks.sass); run(tasks.sass);
}); });
// Watch for file changes // Watch for file changes
gulp.task("watch", function () { gulp.task("watch", function () {
// Plyr core // Plyr core
gulp.watch(paths.plyr.src.js, tasks.js); gulp.watch(paths.plyr.src.js, tasks.js);
gulp.watch(paths.plyr.src.less, tasks.less); gulp.watch(paths.plyr.src.less, tasks.less);
gulp.watch(paths.plyr.src.sprite, "sprite"); gulp.watch(paths.plyr.src.sprite, "sprite");
@ -189,7 +189,7 @@ gulp.task("watch", function () {
// Docs // Docs
gulp.watch(paths.docs.src.js, tasks.js); gulp.watch(paths.docs.src.js, tasks.js);
gulp.watch(paths.docs.src.less, tasks.less); gulp.watch(paths.docs.src.less, tasks.less);
gulp.watch(paths.docs.src.templates, "js"); gulp.watch(paths.docs.src.templates, "js");
}); });
// Publish a version to CDN and docs // Publish a version to CDN and docs
@ -198,69 +198,69 @@ gulp.task("watch", function () {
// Some options // Some options
var aws = loadJSON(path.join(root, "aws.json")), var aws = loadJSON(path.join(root, "aws.json")),
version = package.version, version = package.version,
maxAge = 31536000, // seconds 1 year maxAge = 31536000, // seconds 1 year
options = { options = {
cdn: { cdn: {
headers: { headers: {
"Cache-Control": "max-age=" + maxAge + ", no-transform, public", "Cache-Control": "max-age=" + maxAge + ", no-transform, public",
"Vary": "Accept-Encoding" "Vary": "Accept-Encoding"
}, },
gzippedOnly: true gzippedOnly: true
}, },
docs: { docs: {
headers: { headers: {
"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0", "Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
"Vary": "Accept-Encoding" "Vary": "Accept-Encoding"
}, },
gzippedOnly: true gzippedOnly: true
} }
}, },
cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"); cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi");
// Publish version to CDN bucket // Publish version to CDN bucket
gulp.task("cdn", function () { gulp.task("cdn", function () {
console.log("Uploading " + version + " to " + aws.cdn.bucket); console.log("Uploading " + version + " to " + aws.cdn.bucket);
// Upload to CDN // Upload to CDN
gulp.src(paths.upload) gulp.src(paths.upload)
.pipe(rename(function (path) { .pipe(rename(function (path) {
path.dirname = path.dirname.replace(".", version); path.dirname = path.dirname.replace(".", version);
})) }))
.pipe(gzip()) .pipe(gzip())
.pipe(s3(aws.cdn, options.cdn)); .pipe(s3(aws.cdn, options.cdn));
}); });
// Publish to Docs bucket // Publish to Docs bucket
gulp.task("docs", function () { gulp.task("docs", function () {
console.log("Uploading " + version + " docs to " + aws.docs.bucket); console.log("Uploading " + version + " docs to " + aws.docs.bucket);
// Replace versioned files in *.html // Replace versioned files in *.html
gulp.src([paths.docs.root + "*.html"]) gulp.src([paths.docs.root + "*.html"])
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version)) .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(gulp.dest(paths.docs.root)) .pipe(gulp.dest(paths.docs.root))
.pipe(gzip()) .pipe(gzip())
.pipe(s3(aws.docs, options.docs)); .pipe(s3(aws.docs, options.docs));
// Upload error.html to cdn using docs options // Upload error.html to cdn using docs options
gulp.src([paths.docs.root + "error.html"]) gulp.src([paths.docs.root + "error.html"])
.pipe(gzip()) .pipe(gzip())
.pipe(s3(aws.cdn, options.docs)); .pipe(s3(aws.cdn, options.docs));
}); });
// Open the docs site to check it's sweet // Open the docs site to check it's sweet
gulp.task("open", function () { gulp.task("open", function () {
console.log("Opening " + aws.docs.bucket + "..."); console.log("Opening " + aws.docs.bucket + "...");
// A file must be specified or gulp will skip the task // A file must be specified or gulp will skip the task
// Doesn't matter which file since we set the URL above // Doesn't matter which file since we set the URL above
// Weird, I know... // Weird, I know...
gulp.src([paths.docs.root + "index.html"]) gulp.src([paths.docs.root + "index.html"])
.pipe(open("", { .pipe(open("", {
url: "http://" + aws.docs.bucket url: "http://" + aws.docs.bucket
})); }));
}); });
// Do everything // Do everything
gulp.task("publish", function () { gulp.task("publish", function () {
run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open"); run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs", "open");
}); });

View File

@ -1,43 +1,43 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.25", "version": "1.0.26",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"gulp": "~3.8.6", "gulp": "~3.8.6",
"gulp-autoprefixer": "^0.0.8", "gulp-autoprefixer": "^0.0.8",
"gulp-concat": "~2.3.3", "gulp-concat": "~2.3.3",
"gulp-gzip": "^1.0.0", "gulp-gzip": "^1.0.0",
"gulp-hogan-compile": "^0.4.1", "gulp-hogan-compile": "^0.4.1",
"gulp-less": "~1.3.1", "gulp-less": "~1.3.1",
"gulp-minify-css": "~0.3.6", "gulp-minify-css": "~0.3.6",
"gulp-open": "^0.3.2", "gulp-open": "^0.3.2",
"gulp-rename": "^1.2.0", "gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.3", "gulp-replace": "^0.5.3",
"gulp-s3": "^0.3.0", "gulp-s3": "^0.3.0",
"gulp-sass": "^1.3.3", "gulp-sass": "^1.3.3",
"gulp-svgmin": "^1.0.0", "gulp-svgmin": "^1.0.0",
"gulp-svgstore": "^5.0.0", "gulp-svgstore": "^5.0.0",
"gulp-uglify": "~0.3.1", "gulp-uglify": "~0.3.1",
"gulp-util": "~2.2.20", "gulp-util": "~2.2.20",
"run-sequence": "^0.3.6" "run-sequence": "^0.3.6"
}, },
"scripts": { "scripts": {
"preinstall": "npm install -g gulp" "preinstall": "npm install -g gulp"
}, },
"keywords": [ "keywords": [
"HTML5 Video", "HTML5 Video",
"HTML5 Audio", "HTML5 Audio",
"Media Player" "Media Player"
], ],
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/selz/plyr.git" "url": "git://github.com/selz/plyr.git"
}, },
"authors": [ "authors": [
"Sam Potts <me@sampotts.me>" "Sam Potts <me@sampotts.me>"
], ],
"license": "MIT" "license": "MIT"
} }

View File

@ -38,7 +38,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup. Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.25/plyr.js` to `https://cdn.plyr.io/1.0.25/plyr.js` **Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.26/plyr.js` to `https://cdn.plyr.io/1.0.26/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported. If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html ```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script> <script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.25/sprite.svg`. You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.26/sprite.svg`.
### CSS ### CSS
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff