diff --git a/assets/js/docs.js b/assets/js/docs.js index 25b83d9d..89803ee2 100644 --- a/assets/js/docs.js +++ b/assets/js/docs.js @@ -8,5 +8,8 @@ plyr.setup({ debug: true, title: "Video demo", - html: templates.controls.render({}) + html: templates.controls.render({}), + captions: { + defaultActive: true + } }); \ No newline at end of file diff --git a/assets/js/plyr.js b/assets/js/plyr.js index d589ce34..c1049210 100644 --- a/assets/js/plyr.js +++ b/assets/js/plyr.js @@ -6,10 +6,6 @@ // Credits: http://paypal.github.io/accessible-html5-video-player/ // ========================================================================== -// Replace browser sniff with feature detection -// http://diveintohtml5.info/everything.html -// - /*global ActiveXObject*/ (function (api) { @@ -20,11 +16,11 @@ // Default config var defaults = { - enabled: true, // /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) + enabled: true, debug: false, seekInterval: 10, volume: 5, - clickToPause: true, + click: true, selectors: { container: ".player", controls: ".player-controls", @@ -58,7 +54,7 @@ } }, captions: { - defaultActive: true + defaultActive: false }, fullscreen: { enabled: true @@ -756,7 +752,7 @@ _on(player.buttons.fullscreen, "click", _toggleFullscreen); // Click video - if(player.type === "video" && config.clickToPause) { + if(player.type === "video" && config.click) { _on(player.videoContainer, "click", function() { if(player.media.paused) { _play(); diff --git a/assets/less/plyr.less b/assets/less/plyr.less index 9da7e124..17f14bdd 100644 --- a/assets/less/plyr.less +++ b/assets/less/plyr.less @@ -387,12 +387,6 @@ } } - // Full browser view hides toggle - &-fullscreen [data-player='fullscreen'], - &-fullscreen [data-player='fullscreen'] + label { - display: none; - } - // Some options are hidden by default [data-player='captions'], [data-player='captions'] + label, @@ -406,6 +400,12 @@ &.fullscreen-enabled [data-player='fullscreen'] + label { display: inline-block; } + + // Full browser view hides toggle + &-fullscreen [data-player='fullscreen'], + &-fullscreen [data-player='fullscreen'] + label { + display: none !important; + } } // Fixing display for IE10+ diff --git a/bower.json b/bower.json index d1c3af16..ad6526db 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "plyr", "description": "A simple HTML5 media player using custom controls", - "homepage": "https://github.com/sampotts/plyr", + "homepage": "http://plyr.io", "keywords": [ "Audio", "Video", @@ -23,7 +23,7 @@ ], "repository": { "type": "git", - "url": "git://github.com/sampotts/plyr.git" + "url": "git://github.com/selz/plyr.git" }, "license": "MIT" } \ No newline at end of file diff --git a/dist/css/plyr.css b/dist/css/plyr.css index 62aacfaa..537dacb1 100644 --- a/dist/css/plyr.css +++ b/dist/css/plyr.css @@ -1 +1 @@ -.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden;background:#000}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.75);text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:560px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:inline-block;margin-top:10px}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:hover,.player-controls label:hover{background:#3498db}.player-controls button:hover svg,.player-controls label:hover svg{fill:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:#000 dotted thin;outline-offset:1px}.player-controls button:focus svg,.player-controls input:focus+label svg{fill:#fff}.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;margin:0;vertical-align:top}.player-progress[value]{-webkit-appearance:none;border:none;background:#565d64;cursor:pointer;color:#3498db}.player-progress[value]::-webkit-progress-bar{background:#565d64}.player-progress[value]::-webkit-progress-value{background:currentColor}.player-progress[value]::-moz-progress-bar{background:currentColor}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player.muted .player-controls .icon-muted{display:block}.player.muted .player-controls .icon-muted+svg{display:none}.player-volume{vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume::-ms-fill-lower,.player-volume::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume:focus{outline:0}.player-volume:focus::-webkit-slider-thumb{background:#3498db}.player-volume:focus::-moz-range-thumb{background:#3498db}.player-volume:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player:-webkit-full-screen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen,.player:-moz-full-screen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen,.player:-ms-fullscreen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen,.player:fullscreen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen .player-video,.player:-webkit-full-screen .player-video{height:100%;width:100%}.player-fullscreen .player-video,.player:-moz-full-screen .player-video{height:100%;width:100%}.player-fullscreen .player-video,.player:-ms-fullscreen .player-video{height:100%;width:100%}.player-fullscreen .player-video,.player:fullscreen .player-video{height:100%;width:100%}.player-fullscreen .player-video video,.player:-webkit-full-screen .player-video video{height:100%}.player-fullscreen .player-video video,.player:-moz-full-screen .player-video video{height:100%}.player-fullscreen .player-video video,.player:-ms-fullscreen .player-video video{height:100%}.player-fullscreen .player-video video,.player:fullscreen .player-video video{height:100%}.player-fullscreen .player-video .player-captions,.player:-webkit-full-screen .player-video .player-captions{top:auto;bottom:90px}.player-fullscreen .player-video .player-captions,.player:-moz-full-screen .player-video .player-captions{top:auto;bottom:90px}.player-fullscreen .player-video .player-captions,.player:-ms-fullscreen .player-video .player-captions{top:auto;bottom:90px}.player-fullscreen .player-video .player-captions,.player:fullscreen .player-video .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video .player-captions,.player:-webkit-full-screen .player-video .player-captions{bottom:60px}.player-fullscreen .player-video .player-captions,.player:-moz-full-screen .player-video .player-captions{bottom:60px}.player-fullscreen .player-video .player-captions,.player:-ms-fullscreen .player-video .player-captions{bottom:60px}.player-fullscreen .player-video .player-captions,.player:fullscreen .player-video .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video .player-captions,.player:-webkit-full-screen .player-video .player-captions{bottom:80px}.player-fullscreen .player-video .player-captions,.player:-moz-full-screen .player-video .player-captions{bottom:80px}.player-fullscreen .player-video .player-captions,.player:-ms-fullscreen .player-video .player-captions{bottom:80px}.player-fullscreen .player-video .player-captions,.player:fullscreen .player-video .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player:-webkit-full-screen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls,.player:-moz-full-screen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls,.player:-ms-fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls,.player:fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:-webkit-full-screen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:-moz-full-screen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:-ms-fullscreen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:fullscreen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:-webkit-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:-moz-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:-ms-fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}.player [data-player=fullscreen],.player [data-player=fullscreen]+label,.player [data-player=captions],.player [data-player=captions]+label,.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.video-controls .player-volume{position:relative;padding:0}.player-time{margin-top:4px}.player-captions{padding:8px;min-height:36px}} \ No newline at end of file +.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.player{position:relative;max-width:100%;min-width:290px;overflow:hidden;background:#000}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:16px;text-shadow:0 1px 1px rgba(0,0,0,.75);text-align:center;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}@media (min-width:560px){.player-captions{font-size:24px}}.player.captions-active .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1}.player-controls:after,.player-controls:before{content:"";display:table}.player-controls:after{clear:both}.player-controls-sound{display:inline-block;margin-top:10px}@media (min-width:560px){.player-controls-playback{float:left}.player-controls-sound{float:right;margin-top:0}}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:hover,.player-controls label:hover{background:#3498db}.player-controls button:hover svg,.player-controls label:hover svg{fill:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:#000 dotted thin;outline-offset:1px}.player-controls button:focus svg,.player-controls input:focus+label svg{fill:#fff}.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player-progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;margin:0;vertical-align:top}.player-progress[value]{-webkit-appearance:none;border:none;background:#565d64;cursor:pointer;color:#3498db}.player-progress[value]::-webkit-progress-bar{background:#565d64}.player-progress[value]::-webkit-progress-value{background:currentColor}.player-progress[value]::-moz-progress-bar{background:currentColor}.player-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player.muted .player-controls .icon-muted{display:block}.player.muted .player-controls .icon-muted+svg{display:none}.player-volume{vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;width:100px;margin:0 10px 0 0;padding:0;cursor:pointer;background:0 0}.player-volume::-webkit-slider-runnable-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-3px;height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-moz-range-track{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume::-ms-track{height:6px;background:0 0;border-color:transparent;border-width:3px 0;color:transparent}.player-volume::-ms-fill-lower,.player-volume::-ms-fill-upper{height:6px;background:#565d64;border:0;border-radius:3px}.player-volume::-ms-thumb{height:12px;width:12px;background:#cbd0d3;border:0;border-radius:6px;transition:background .3s ease;cursor:ew-resize}.player-volume:focus{outline:0}.player-volume:focus::-webkit-slider-thumb{background:#3498db}.player-volume:focus::-moz-range-thumb{background:#3498db}.player-volume:focus::-ms-thumb{background:#3498db}.player-fullscreen,.player:-webkit-full-screen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen,.player:-moz-full-screen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen,.player:-ms-fullscreen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen,.player:fullscreen{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%;z-index:999999}.player-fullscreen .player-video,.player:-webkit-full-screen .player-video{height:100%;width:100%}.player-fullscreen .player-video,.player:-moz-full-screen .player-video{height:100%;width:100%}.player-fullscreen .player-video,.player:-ms-fullscreen .player-video{height:100%;width:100%}.player-fullscreen .player-video,.player:fullscreen .player-video{height:100%;width:100%}.player-fullscreen .player-video video,.player:-webkit-full-screen .player-video video{height:100%}.player-fullscreen .player-video video,.player:-moz-full-screen .player-video video{height:100%}.player-fullscreen .player-video video,.player:-ms-fullscreen .player-video video{height:100%}.player-fullscreen .player-video video,.player:fullscreen .player-video video{height:100%}.player-fullscreen .player-video .player-captions,.player:-webkit-full-screen .player-video .player-captions{top:auto;bottom:90px}.player-fullscreen .player-video .player-captions,.player:-moz-full-screen .player-video .player-captions{top:auto;bottom:90px}.player-fullscreen .player-video .player-captions,.player:-ms-fullscreen .player-video .player-captions{top:auto;bottom:90px}.player-fullscreen .player-video .player-captions,.player:fullscreen .player-video .player-captions{top:auto;bottom:90px}@media (min-width:560px) and (max-width:767px){.player-fullscreen .player-video .player-captions,.player:-webkit-full-screen .player-video .player-captions{bottom:60px}.player-fullscreen .player-video .player-captions,.player:-moz-full-screen .player-video .player-captions{bottom:60px}.player-fullscreen .player-video .player-captions,.player:-ms-fullscreen .player-video .player-captions{bottom:60px}.player-fullscreen .player-video .player-captions,.player:fullscreen .player-video .player-captions{bottom:60px}}@media (min-width:768px){.player-fullscreen .player-video .player-captions,.player:-webkit-full-screen .player-video .player-captions{bottom:80px}.player-fullscreen .player-video .player-captions,.player:-moz-full-screen .player-video .player-captions{bottom:80px}.player-fullscreen .player-video .player-captions,.player:-ms-fullscreen .player-video .player-captions{bottom:80px}.player-fullscreen .player-video .player-captions,.player:fullscreen .player-video .player-captions{bottom:80px}}.player-fullscreen .player-controls,.player:-webkit-full-screen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls,.player:-moz-full-screen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls,.player:-ms-fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls,.player:fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:-webkit-full-screen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:-moz-full-screen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:-ms-fullscreen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen,.player:fullscreen .player-controls .icon-exit-fullscreen{display:block}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:-webkit-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:-moz-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:-ms-fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}.player-fullscreen .player-controls .icon-exit-fullscreen+svg,.player:fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}.player [data-player=captions],.player [data-player=captions]+label,.player [data-player=fullscreen],.player [data-player=fullscreen]+label{display:none}.player.captions-enabled [data-player=captions],.player.captions-enabled [data-player=captions]+label,.player.fullscreen-enabled [data-player=fullscreen],.player.fullscreen-enabled [data-player=fullscreen]+label{display:inline-block}.player-fullscreen [data-player=fullscreen],.player-fullscreen [data-player=fullscreen]+label{display:none!important}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.video-controls .player-volume{position:relative;padding:0}.player-time{margin-top:4px}.player-captions{padding:8px;min-height:36px}} \ No newline at end of file diff --git a/index.html b/index.html index 65fcf142..aede91e0 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@
- download video + Download
@@ -45,7 +45,7 @@
- Download it + Download
diff --git a/package.json b/package.json index 54f2ada5..54963df1 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "plyr", "version": "1.0.0", "description": "A simple HTML5 media player using custom controls", + "homepage": "http://plyr.io", "main": "gulpfile.js", "dependencies": {}, "devDependencies": { @@ -27,7 +28,7 @@ ], "repository": { "type": "git", - "url": "git://github.com/sampotts/plyr.git" + "url": "git://github.com/selz/plyr.git" }, "authors": [ "Sam Potts " diff --git a/readme.md b/readme.md index d9545562..bb41e113 100644 --- a/readme.md +++ b/readme.md @@ -1,18 +1,212 @@ -# Useful links +# Plyr +A simple, accessible HTML5 media player. -- [http://www.w3.org/2010/05/video/mediaevents.html](http://www.w3.org/2010/05/video/mediaevents.html) -- [http://www.osmf.org/strobe_mediaplayback.html](http://www.osmf.org/strobe_mediaplayback.html) -- [http://osmf.org/dev/2.0gm/](http://osmf.org/dev/2.0gm/) -- [http://stackoverflow.com/questions/4763042/html5-video-fallback-to-flash-if-no-ogv-file](http://stackoverflow.com/questions/4763042/html5-video-fallback-to-flash-if-no-ogv-file) -- [http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/](http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/) -- [http://stackoverflow.com/questions/21552914/flash-fallback-in-html5-video-tag-does-not-work-in-opera](http://stackoverflow.com/questions/21552914/flash-fallback-in-html5-video-tag-does-not-work-in-opera) -- [http://osmf.org/configurator/fmp/#](http://osmf.org/configurator/fmp/#) -- [http://stackoverflow.com/questions/5138077/html5-video-file-loading-complete-event](http://stackoverflow.com/questions/5138077/html5-video-file-loading-complete-event) -- [http://www.sitepoint.com/essential-audio-and-video-events-for-html5/](http://www.sitepoint.com/essential-audio-and-video-events-for-html5/) -- [http://dev.opera.com/articles/view/simple-html5-video-flash-fallback-custom-controls/](http://dev.opera.com/articles/view/simple-html5-video-flash-fallback-custom-controls/) +[Checkout the demo](http://plyr.io) -- [http://www.hongkiat.com/blog/html5-progress-bar/](http://www.hongkiat.com/blog/html5-progress-bar/) -- [http://codereview.stackexchange.com/questions/21105/pattern-for-creating-a-globally-accessible-custom-plugin](http://codereview.stackexchange.com/questions/21105/pattern-for-creating-a-globally-accessible-custom-plugin) -- [https://scotch.io/tutorials/building-your-own-javascript-modal-plugin](https://scotch.io/tutorials/building-your-own-javascript-modal-plugin) -- [http://stackoverflow.com/questions/13606188/writing-a-library-what-structure](http://stackoverflow.com/questions/13606188/writing-a-library-what-structure) -- [http://code.tutsplus.com/tutorials/build-your-first-javascript-library--net-26796](http://code.tutsplus.com/tutorials/build-your-first-javascript-library--net-26796) \ No newline at end of file +## Why? +We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. + +## Features +- **Accessible** - full support for captions and screen readers. +- **Lightweight** - just 4KB minified and gzipped. +- **Customisable** - make the player look how you want with the markup you want. +- **Semantic** - uses HTML5 form inputs for volume (range) and progress element for playback progress. +- **No dependencies** - written in native JS. +- **API** - easy to use API. +- **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. + +## Planned development +- Accept a string selector, a node, or a nodelist for the `container` property of `selectors`. +- Accept a selector for the `html` template property. + +## Implementation + +### CSS +If you want to use the default css, add the css file from /dist into your head, or even better use the less file included in /assets in your build to save a request. + +```html + +``` + +### SVG +The SVG sprite for the controls icons is loaded in by AJAX to help with performance. This is best added before the closing `` + +```html + +``` +More info on SVG sprites here: +[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) +and the AJAX technique here: +[http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/) + +### HTML +The only extra markup that's needed to use plyr is a `
` wrapper. Replace the source, poster and captions with urls for your media. +```html +
+ +
+``` +And the same for `