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

Merge branch 'master' into develop

Browse Source 
# Conflicts:
#	dist/plyr.css
#	dist/plyr.js
#	docs/dist/docs.css
#	docs/dist/docs.js
#	docs/index.html
#	docs/src/js/docs.js
#	docs/src/less/components/icons.less
#	docs/src/less/components/type.less
#	docs/src/less/docs.less
#	gulpfile.js
#	package.json
#	src/js/plyr.js
This commit is contained in:
Sam 2015-12-13 22:49:02 +11:00
commit ee2cdb2c9b
15 changed files with 223 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundles.json
View File

@ -21,4 +21,4 @@
] ]
} }
} }
} }

12
controls.md
View File

@ -1,10 +1,10 @@
# Controls # Controls
This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs.
## Internationalization using default controls ## Internationalization using default controls
You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls.
### Example ### Example
@ -30,16 +30,16 @@ Note: `{seektime}` will be replaced with your configured seek time or the defaul
## Using custom HTML ## Using custom HTML
The example on [plyr.io](http://plyr.io) setup uses a Hogan template. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured. You can specify the HTML for the controls using the `html` option.
The classes and data attributes used in your template should match the `selectors` option. The classes and data attributes used in your template should match the `selectors` option.
You need to add several placeholders to your html template that are replaced when rendering: You need to add several placeholders to your html template that are replaced when rendering:
- `{id}` - the dynamically generated ID for the player (for form controls) - `{id}` - the dynamically generated ID for the player (for form controls)
- `{seektime}` - the seek time specified in options for fast forward and rewind - `{seektime}` - the seek time specified in options for fast forward and rewind
You can include only the controls you need when specifying custom html. You can include only the controls you need when specifying custom html.
### Example ### Example
@ -107,4 +107,4 @@ This is an example `html` option with all controls.
"</button>", "</button>",
"</span>", "</span>",
"</div>"].join("\n"); "</div>"].join("\n");
``` ```

2
dist/plyr.css 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.3.5/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.3.7/docs.css">
</head> </head>
<body> <body>
<main> <main>

55
docs/index.html
View File

@ -8,10 +8,10 @@
<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="https://cdn.plyr.io/1.3.5/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.5/docs.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/docs.css">
</head> </head>
<body> <body>
<header> <header>
@ -21,12 +21,12 @@
<ul> <ul>
<li> <li>
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github"> <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github">
<svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub <svg class="icon"><use xlink:href="#shr-github"/></svg>Download on GitHub
</a> </a>
</li> </li>
<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"> <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="#icon-twitter"/></svg>Tweet <svg class="icon"><use xlink:href="#shr-twitter"/></svg>Tweet
</a> </a>
</li> </li>
</ul> </ul>
@ -56,9 +56,11 @@
<!-- Video files --> <!-- 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.mp4" type="video/mp4">
<source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm"> <source src="https://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="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default> <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 --> <!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a> <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
@ -77,22 +79,39 @@
<!-- 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 loadSprite(d, u) { (function() {
var a = new XMLHttpRequest(), [
b = document.body; "https://cdn.shr.one/0.1.9/sprite.svg",
"https://cdn.plyr.io/1.3.7/sprite.svg"
]
.forEach(function(u) {
var x = new XMLHttpRequest(),
b = document.body;
// If proper CORS supported // Check for CORS support
if("withCredentials" in a) { // If you're loading from same domain, you can remove the if statement
a.open("GET", u, true); // XHR for Chrome/Firefox/Opera/Safari
a.send(); if ("withCredentials" in x) {
a.onload = function(){ 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"); var c = document.createElement("div");
c.setAttribute("hidden", ""); c.setAttribute("hidden", "");
c.innerHTML = a.responseText; c.innerHTML = x.responseText;
b.insertBefore(c, b.childNodes[0]); b.insertBefore(c, b.childNodes[0]);
} }
} });
} })();
// Load the plyr sprite // Load the plyr sprite
loadSprite(document, "../dist/sprite.svg"); loadSprite(document, "../dist/sprite.svg");
@ -101,12 +120,12 @@
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="https://cdn.plyr.io/1.3.5/plyr.js"></script> <script src="https://cdn.plyr.io/1.3.7/plyr.js"></script>
<!-- Shr core script --> <!-- Shr core script -->
<script src="https://cdn.shr.one/0.1.7/shr.js"></script> <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="https://cdn.plyr.io/1.3.5/docs.js"></script> <script src="https://cdn.plyr.io/1.3.7/docs.js"></script>
</body> </body>
</html> </html>

130
docs/index.master.html Normal file
View File

@ -0,0 +1,130 @@
<!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>

8
docs/src/js/docs.js
View File

@ -2,7 +2,7 @@
// Docs example // Docs example
// ========================================================================== // ==========================================================================
/*global plyr, shr */ /*global plyr, shr*/
// Setup the player // Setup the player
plyr.setup({ plyr.setup({
@ -25,7 +25,7 @@ shr.setup({
}); });
// General functions // General functions
(function() { (function() {
var buttons = document.querySelectorAll('[data-source]'); var buttons = document.querySelectorAll('[data-source]');
// Bind to each button // Bind to each button
@ -103,7 +103,7 @@ shr.setup({
} }
})(); })();
// Google analytics // Google analytics
// For demo site (http://[www.]plyr.io) only // For demo site (http://[www.]plyr.io) only
if(document.domain.indexOf('plyr.io') > -1) { if(document.domain.indexOf('plyr.io') > -1) {
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
@ -112,4 +112,4 @@ if(document.domain.indexOf('plyr.io') > -1) {
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-40881672-11', 'auto'); ga('create', 'UA-40881672-11', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
} }

8
docs/src/less/components/buttons.less
View File

@ -78,7 +78,7 @@ nav {
} }
} }
// Shared // Shared
.btn, .btn,
.btn-count { .btn-count {
display: inline-block; display: inline-block;
@ -88,7 +88,7 @@ nav {
user-select: none; user-select: none;
} }
// Buttons // Buttons
.btn { .btn {
padding: (@padding-base / 2) @padding-base; padding: (@padding-base / 2) @padding-base;
background: @body-background; background: @body-background;
@ -121,7 +121,7 @@ nav {
box-shadow: 0 1px 1px rgba(0,0,0, .15); box-shadow: 0 1px 1px rgba(0,0,0, .15);
text-shadow: 0 1px 1px rgba(0,0,0, .1); text-shadow: 0 1px 1px rgba(0,0,0, .1);
color: #fff; color: #fff;
&:hover, &:hover,
&:focus { &:focus {
color: #fff; color: #fff;
@ -156,4 +156,4 @@ nav {
border-width: 1px 0 0 1px; border-width: 1px 0 0 1px;
transform: rotate(-45deg) translate(-50%, -50%); transform: rotate(-45deg) translate(-50%, -50%);
} }
} }

2
docs/src/less/components/icons.less
View File

@ -19,4 +19,4 @@ label svg {
a .icon, a .icon,
.btn .icon { .btn .icon {
margin-right: (@padding-base / 2); margin-right: (@padding-base / 2);
} }

4
docs/src/less/components/type.less
View File

@ -29,7 +29,7 @@ small {
ul ul
li { li {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -58,4 +58,4 @@ a {
} }
.color-youtube { .color-youtube {
color: @color-youtube; color: @color-youtube;
} }

2
docs/src/less/docs.less
View File

@ -24,4 +24,4 @@
@import "components/buttons.less"; @import "components/buttons.less";
@import "components/panels.less"; @import "components/panels.less";
@import "components/error.less"; @import "components/error.less";
@import "components/examples.less"; @import "components/examples.less";

2
docs/src/less/variables.less
View File

@ -35,4 +35,4 @@
// Examples // Examples
@example-width-audio: 520px; @example-width-audio: 520px;
@example-width-video: 1200px; @example-width-video: 1200px;

34
gulpfile.js
View File

@ -41,8 +41,7 @@ paths = {
// 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/**/*")
sprite: path.join(root, "docs/src/sprite/*.svg")
}, },
// Output paths // Output paths
output: path.join(root, "docs/dist/"), output: path.join(root, "docs/dist/"),
@ -53,7 +52,7 @@ paths = {
}, },
// Task arrays // Task arrays
tasks = { tasks = {
less: [], less: [],
sass: [], sass: [],
js: [] js: []
@ -92,7 +91,7 @@ var build = {
}, },
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);
@ -111,7 +110,7 @@ var build = {
}, },
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);
@ -130,16 +129,16 @@ var build = {
}, },
sprite: function(bundle) { sprite: function(bundle) {
// Process Icons // Process Icons
gulp.task("sprite-" + bundle, function () { gulp.task("sprite", function () {
return gulp return gulp
.src(paths[bundle].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[bundle].output)); .pipe(gulp.dest(paths.plyr.output));
}); });
} }
}; };
@ -148,12 +147,16 @@ var build = {
build.js(bundles.plyr.js, "plyr"); build.js(bundles.plyr.js, "plyr");
build.less(bundles.plyr.less, "plyr"); build.less(bundles.plyr.less, "plyr");
build.sass(bundles.plyr.sass, "plyr"); build.sass(bundles.plyr.sass, "plyr");
build.sprite("plyr"); build.sprite();
// Docs files // Docs files
build.less(bundles.docs.less, "docs"); build.less(bundles.docs.less, "docs");
build.js(bundles.docs.js, "docs"); build.js(bundles.docs.js, "docs");
build.sprite("docs");
// Build all JS
gulp.task("js", function(){
run(tasks.js);
});
// Build SASS (for testing, default is LESS) // Build SASS (for testing, default is LESS)
gulp.task("sass", function(){ gulp.task("sass", function(){
@ -170,12 +173,11 @@ 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.sprite, ["sprite-docs"]);
}); });
// Default gulp task // Default gulp task
gulp.task("default", function(){ gulp.task("default", function(){
run(tasks.js, tasks.less, "sprite-plyr", "sprite-docs", "watch"); run(tasks.js, tasks.less, "sprite", "watch");
}); });
// Publish a version to CDN and docs // Publish a version to CDN and docs
@ -211,7 +213,7 @@ if("cdn" in aws) {
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(size({ .pipe(size({
showFiles: true, showFiles: true,
@ -259,7 +261,7 @@ gulp.task("open", function () {
})); }));
}); });
// Do everything // Do everything
gulp.task("publish", function () { gulp.task("publish", function () {
run(tasks.js, tasks.less, "sprite-plyr", "sprite-docs", "cdn", "docs"); run(tasks.js, tasks.less, "sprite", "cdn", "docs");
}); });

14
package.json
View File

@ -1,28 +1,28 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.3.5", "version": "1.4.0",
"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.9.0", "gulp": "^3.9.0",
"gulp-autoprefixer": "^3.0.2", "gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.3.3", "gulp-concat": "^2.3.3",
"gulp-gzip": "^1.0.0", "gulp-gzip": "^1.0.0",
"gulp-less": "^3.0.3", "gulp-less": "^3.0.5",
"gulp-minify-css": "^1.2.1", "gulp-minify-css": "^1.2.1",
"gulp-open": "^1.0.0", "gulp-open": "^1.0.0",
"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": "^2.0.4", "gulp-sass": "^2.1.0",
"gulp-size": "^2.0.0", "gulp-size": "^2.0.0",
"gulp-svgmin": "^1.0.0", "gulp-svgmin": "^1.0.0",
"gulp-svgstore": "^5.0.0", "gulp-svgstore": "^5.0.0",
"gulp-uglify": "^1.4.1", "gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.6", "gulp-util": "^3.0.7",
"run-sequence": "^1.1.4" "run-sequence": "^1.1.5"
}, },
"scripts": { "scripts": {
"preinstall": "npm install -g gulp" "preinstall": "npm install -g gulp"

18
readme.md
View File

@ -1,7 +1,7 @@
# Plyr # Plyr
A simple, accessible HTML5 media player. A simple, accessible HTML5 media player.
[Checkout the demo](http://plyr.io) Checkout the [demo](http://plyr.io).
[![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io) [![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io)
@ -24,9 +24,9 @@ We wanted a lightweight, accessible and customisable media player that just supp
Oh and yes, it works with Bootstrap. Oh and yes, it works with Bootstrap.
## Changelog ## Changelog
Check out [the changelog](changelog.md) Check out the [changelog](changelog.md).
## Planned development ## Planned Development
- Vimeo support - Vimeo support
- Playback speed - Playback speed
- Playlists - Playlists
@ -34,13 +34,13 @@ Check out [the changelog](changelog.md)
- Audio captions - Audio captions
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues) ... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request. If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
## Implementation ## Implementation
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.3.5/plyr.js` to `https://cdn.plyr.io/1.3.5/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.3.7/plyr.js` to `https://cdn.plyr.io/1.3.7/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -60,14 +60,14 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
If you want to use our CDN, you can use the following: If you want to use our CDN, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/1.3.5/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/1.3.7/plyr.css">
<script src="https://cdn.plyr.io/1.3.5/plyr.js"></script> <script src="https://cdn.plyr.io/1.3.7/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.5/sprite.svg`. You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.7/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.
```html ```html
<link rel="stylesheet" href="dist/plyr.css"> <link rel="stylesheet" href="dist/plyr.css">