Compare commits

...

5 Commits

Author SHA1 Message Date
55b085c4d0 Bug fixes for fullscreen mode 2015-02-24 15:44:56 +11:00
dd72a973d6 Docs fix 2015-02-24 12:39:22 +11:00
1b8b5d6ee4 Tidying up, bower changes
- Folder tidy up
- Bower updated to include source files
- Upgraded to svgstore 5.0.0
2015-02-24 12:37:23 +11:00
c105063ad9 Update license.md 2015-02-22 22:08:03 +11:00
ff43701e97 Readme update 2015-02-22 10:34:20 +11:00
37 changed files with 106 additions and 116 deletions

View File

@ -1,16 +0,0 @@
@font-face {
font-family: "Avenir";
src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"),
url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Avenir";
src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"),
url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
font-style: normal;
font-weight: 600;
}

View File

@ -1,5 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.11",
"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": [
@ -14,7 +15,10 @@
"dependencies": {}, "dependencies": {},
"main": [ "main": [
"dist/css/plyr.css", "dist/css/plyr.css",
"dist/js/plyr.js" "dist/js/plyr.js",
"dist/sprite.svg",
"src/less/plyr.less",
"src/js/plyr.js"
], ],
"ignore": [ "ignore": [
"node_modules", "node_modules",

View File

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

2
dist/css/docs.css vendored
View File

@ -1 +1 @@
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600} /*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}

2
dist/css/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/js/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

@ -17,23 +17,21 @@ var fs = require("fs"),
svgmin = require("gulp-svgmin"), svgmin = require("gulp-svgmin"),
hogan = require("gulp-hogan-compile"); hogan = require("gulp-hogan-compile");
var projectPath = __dirname; var root = __dirname,
var paths = { paths = {
project: projectPath,
// Watch paths // Watch paths
watchless: path.join(projectPath, "assets/less/**/*"), watch: {
watchjs: path.join(projectPath, "assets/js/**/*"), less: path.join(root, "src/less/**/*"),
watchicons: path.join(projectPath, "assets/icons/**/*"), js: path.join(root, "src/js/**/*"),
watchtemplates: path.join(projectPath, "assets/templates/**/*"), sprite: path.join(root, "src/sprite/*.svg"),
templates: path.join(root, "src/templates/*.html"),
// SVG Icons },
svg: path.join(projectPath, "assets/icons/*.svg"),
// Output paths // Output paths
js: path.join(projectPath, "dist/js/"), output: {
css: path.join(projectPath, "dist/css/"), js: path.join(root, "dist/js/"),
icons: path.join(projectPath, "dist/svg/") css: path.join(root, "dist/css/"),
sprite: path.join(root, "dist/")
}
}, },
// Task names // Task names
@ -41,7 +39,7 @@ taskNames = {
jsAll: "js-all", jsAll: "js-all",
lessBuild: "less-", lessBuild: "less-",
jsBuild: "js-", jsBuild: "js-",
iconBuild: "icon-build", sprite: "sprite-build",
templates: "templates" templates: "templates"
}, },
// Task arrays // Task arrays
@ -49,7 +47,7 @@ lessBuildTasks = [],
jsBuildTasks = [], jsBuildTasks = [],
// Fetch bundles from JSON // Fetch bundles from JSON
bundles = loadJSON(path.join(paths.project, "bundles.json")); bundles = loadJSON(path.join(root, "bundles.json"));
// Load json // Load json
function loadJSON(path) { function loadJSON(path) {
@ -59,14 +57,14 @@ function loadJSON(path) {
// Build templates // Build templates
gulp.task(taskNames.templates, function () { gulp.task(taskNames.templates, function () {
return gulp return gulp
.src(paths.watchtemplates) .src(paths.watch.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.js)); .pipe(gulp.dest(paths.output.js));
}); });
// Process JS // Process JS
@ -80,7 +78,7 @@ for (var key in bundles.js) {
.src(bundles.js[key]) .src(bundles.js[key])
.pipe(concat(key)) .pipe(concat(key))
.pipe(uglify()) .pipe(uglify())
.pipe(gulp.dest(paths.js)); .pipe(gulp.dest(paths.output.js));
}); });
})(key); })(key);
} }
@ -97,32 +95,29 @@ for (var key in bundles.less) {
.pipe(less()) .pipe(less())
.on("error", gutil.log) .on("error", gutil.log)
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions", "> 1%", "ie 9"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minifyCss()) .pipe(minifyCss())
.pipe(gulp.dest(paths.css)); .pipe(gulp.dest(paths.output.css));
}); });
})(key); })(key);
} }
// Process Icons // Process Icons
gulp.task(taskNames.iconBuild, function () { gulp.task(taskNames.sprite, function () {
return gulp return gulp
.src(paths.svg) .src(paths.watch.sprite)
.pipe(svgmin({ .pipe(svgmin({
plugins: [{ plugins: [{
removeDesc: true removeDesc: true
}] }]
})) }))
.pipe(svgstore({ .pipe(svgstore())
prefix: "icon-", .pipe(gulp.dest(paths.output.sprite));
fileName: "sprite.svg"
}))
.pipe(gulp.dest(paths.icons));
}); });
// Default gulp task // Default gulp task
gulp.task("default", function(){ gulp.task("default", function(){
runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.iconBuild, "watch")); runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch"));
}); });
// Build all JS (inc. templates) // Build all JS (inc. templates)
@ -132,8 +127,8 @@ gulp.task(taskNames.jsAll, function(){
// Watch for file changes // Watch for file changes
gulp.task("watch", function () { gulp.task("watch", function () {
//gulp.watch(paths.watchtemplates, [taskNames.jsAll]); //gulp.watch(paths.watch.templates, [taskNames.jsAll]);
//gulp.watch(paths.watchjs, [taskNames.jsAll]); //gulp.watch(paths.watch.js, [taskNames.jsAll]);
gulp.watch(paths.watchless, lessBuildTasks); gulp.watch(paths.watch.less, lessBuildTasks);
gulp.watch(paths.watchicons, [taskNames.iconBuild]); gulp.watch(paths.watch.sprite, [taskNames.iconBuild]);
}); });

View File

@ -26,7 +26,7 @@
<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm"> <source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
<!-- Text track file --> <!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="assets/movie_en_captions.vtt" default> <track kind="captions" label="English" srclang="en" src="//cdn.sampotts.me/plyr/movie_en_captions.vtt" default>
<!-- Fallback for browsers that don't support the <video> element --> <!-- Fallback for browsers that don't support the <video> element -->
<div> <div>
@ -55,7 +55,7 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<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,"dist/svg/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,"dist/sprite.svg");
</script> </script>
<!-- Core player --> <!-- Core player -->

View File

@ -1,27 +1,12 @@
Copyright (c) 2014, Selz.com Copyright (c) 2015, Selz.com
All rights reserved. All rights reserved.
Redistribution and use in source and binary forms, with or without modification, Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
list of conditions and the following disclaimer in the documentation and/or
other materials provided with the distribution.
* Neither the name of the eBay nor the names of its 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
subsidiaries or affiliates may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.0", "version": "1.0.11",
"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",
@ -13,7 +13,7 @@
"gulp-less": "~1.3.1", "gulp-less": "~1.3.1",
"gulp-minify-css": "~0.3.6", "gulp-minify-css": "~0.3.6",
"gulp-svgmin": "^1.0.0", "gulp-svgmin": "^1.0.0",
"gulp-svgstore": "^4.0.1", "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"

View File

@ -16,12 +16,15 @@ We wanted a lightweight, accessible and customisable media player that just supp
- **Fallback** - if there's no support, the native players are used. - **Fallback** - if there's no support, the native players are used.
- **Fullscreen** - options to run the player full browser or the user can toggle fullscreen. - **Fullscreen** - options to run the player full browser or the user can toggle fullscreen.
## Changelog
Check out [the changelog](changelog.md)
## Planned development ## Planned development
- Accept a string selector, a node, or a nodelist for the `container` property of `selectors`. - Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
- Accept a selector for the `html` template property. - Accept a selector for the `html` template property.
- Multiple language captions (with selection)
## Changelog 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.
Check out [the changelog](changelog.md)
## Implementation ## Implementation
@ -292,12 +295,11 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
Any unsupported browsers will display links to download the media if the correct html is used. Any unsupported browsers will display links to download the media if the correct html is used.
## Issues ## Issues
If you find anything weird with the library, please let us know using the Github issues tracker. If you find anything weird with Plyr, please let us know using the Github issues tracker.
## Author ## Author
This was created by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) This was created by Sam Potts ([@sam_potts](https://twitter.com/sam_potts))
## Useful links and credits ## Useful links and credits
Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from: Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
- [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player) - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)

View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.0.9 // plyr.js v1.0.11
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// ========================================================================== // ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Credits: http://paypal.github.io/accessible-html5-video-player/

View File

@ -35,7 +35,6 @@ html {
body { body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff; background: #fff;
//.font-size(16);
line-height: 1.5; line-height: 1.5;
text-align: center; text-align: center;
color: #6D797F; color: #6D797F;

View File

@ -0,0 +1,16 @@
@font-face {
font-family: "Avenir";
src: url("../../src/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
url("../../src/fonts/AvenirLTStd-Medium.woff") format("woff"),
url("../../src/fonts/AvenirLTStd-Medium.ttf") format("truetype");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Avenir";
src: url("../../src/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
url("../../src/fonts/AvenirLTStd-Heavy.woff") format("woff"),
url("../../src/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
font-style: normal;
font-weight: 600;
}

View File

@ -10,12 +10,19 @@
@gray: #565d64; @gray: #565d64;
@gray-light: #cbd0d3; @gray-light: #cbd0d3;
// Font sizes
@font-size-small: 14px;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.5));
// Controls // Controls
@controls-bg: @gray-dark;
@control-color: @gray-light;
@control-color-active: @blue;
@control-color-inactive: @gray;
@control-spacing: 10px; @control-spacing: 10px;
@controls-bg: @gray-dark;
@control-bg-hover: @blue;
@control-color: @gray-light;
@control-color-inactive: @gray;
@control-color-focus: #fff;
@control-color-hover: #fff;
// Progress // Progress
@progress-bg: lighten(@gray, 10%); @progress-bg: lighten(@gray, 10%);
@ -28,11 +35,11 @@
@range-thumb-height: (@range-track-height * 2); @range-thumb-height: (@range-track-height * 2);
@range-thumb-width: (@range-track-height * 2); @range-thumb-width: (@range-track-height * 2);
@range-thumb-bg: @control-color; @range-thumb-bg: @control-color;
@range-thumb-bg-focus: @control-color-active; @range-thumb-bg-focus: @control-bg-hover;
// Breakpoints // Breakpoints
@bp-control-split: 560px; // When controls split into left/right @bp-control-split: 560px; // When controls split into left/right
@bg-captions-large: 768px; // When captions jump to the larger font size @bp-captions-large: 768px; // When captions jump to the larger font size
// Utility classes & mixins // Utility classes & mixins
// ------------------------------- // -------------------------------
@ -127,7 +134,7 @@
padding: 20px; padding: 20px;
min-height: 2.5em; min-height: 2.5em;
color: #fff; color: #fff;
font-size: 16px; font-size: @font-size-base;
font-weight: 600; font-weight: 600;
text-shadow: text-shadow:
-1px -1px 0 @gray, -1px -1px 0 @gray,
@ -137,8 +144,8 @@
text-align: center; text-align: center;
.font-smoothing(); .font-smoothing();
@media (min-width: @bg-captions-large) { @media (min-width: @bp-captions-large) {
font-size: 24px; font-size: @font-size-large;
} }
} }
&.captions-active &-captions { &.captions-active &-captions {
@ -206,12 +213,12 @@
input:focus + label, input:focus + label,
button:focus { button:focus {
.tab-focus(); .tab-focus();
color: #fff; color: @control-color-focus;
} }
button:hover, button:hover,
input + label:hover { input + label:hover {
background: @control-color-active; background: @control-bg-hover;
color: #fff; color: @control-color-hover;
} }
.icon-exit-fullscreen, .icon-exit-fullscreen,
.icon-muted { .icon-muted {
@ -221,9 +228,9 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: @control-spacing; margin-left: @control-spacing;
color: #fff; color: @control-color;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: @font-size-small;
.font-smoothing(); .font-smoothing();
} }
} }
@ -254,7 +261,6 @@
border: none; border: none;
background: transparent; background: transparent;
&::-webkit-progress-bar { &::-webkit-progress-bar {
background: transparent; background: transparent;
} }
@ -262,11 +268,9 @@
// Inherit from currentColor; // Inherit from currentColor;
&::-webkit-progress-value { &::-webkit-progress-value {
background: currentColor; background: currentColor;
transition: width .1s ease;
} }
&::-moz-progress-bar { &::-moz-progress-bar {
background: currentColor; background: currentColor;
transition: width .1s ease;
} }
} }
} }
@ -306,7 +310,6 @@
vertical-align: middle; vertical-align: middle;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
//height: 6px;
width: 100px; width: 100px;
margin: 0 @control-spacing 0 0; margin: 0 @control-spacing 0 0;
padding: 0; padding: 0;
@ -373,6 +376,7 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 10000000; z-index: 10000000;
background: #000;
.player-video-wrapper { .player-video-wrapper {
height: 100%; height: 100%;
@ -385,10 +389,10 @@
top: auto; top: auto;
bottom: 90px; bottom: 90px;
@media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) { @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
bottom: 60px; bottom: 60px;
} }
@media (min-width: @bg-captions-large) { @media (min-width: @bp-captions-large) {
bottom: 80px; bottom: 80px;
} }
} }
@ -398,14 +402,15 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
}
}
.icon-exit-fullscreen { // When true full screen, show exit fullscreen icon
display: block; &.fullscreen-active .icon-exit-fullscreen {
display: block;
& + svg { & + svg {
display: none; display: none;
}
}
} }
} }

View File

Before

Width:  |  Height:  |  Size: 726 B

After

Width:  |  Height:  |  Size: 726 B

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

Before

Width:  |  Height:  |  Size: 635 B

After

Width:  |  Height:  |  Size: 635 B

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 515 B

After

Width:  |  Height:  |  Size: 515 B

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 1021 B

After

Width:  |  Height:  |  Size: 1021 B

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB