Compare commits
16 Commits
v3.0.0-bet
...
v3.0.0-bet
Author | SHA1 | Date | |
---|---|---|---|
f67315e20c | |||
2150c44036 | |||
70c9fbdde3 | |||
f3ea31c515 | |||
1ee88cba16 | |||
af3ae75229 | |||
d76ef3ff91 | |||
2691c7c9d6 | |||
26b1d8ce8f | |||
6fae148fc1 | |||
bb51647fe2 | |||
71efbe7a92 | |||
afd695cb39 | |||
c4eb4c97ac | |||
8f7a8940f3 | |||
5e68f8c8dd |
4
.npmignore
Normal file
4
.npmignore
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
demo
|
||||||
|
.github
|
||||||
|
.vscode
|
||||||
|
*.code-workspace
|
@ -17,8 +17,8 @@ This is a massive release. A _mostly_ complete rewrite in ES6. What started out
|
|||||||
|
|
||||||
### Other stuff
|
### Other stuff
|
||||||
|
|
||||||
* Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use
|
* Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use. It may come back if we work out an automated way to convert the SASS
|
||||||
* Moved to ES6. All the rage these days
|
* Moved to ES6. All the rage these days. You'll need to look at polyfills. The demo uses [polyfill.io](https://polyfill.io)
|
||||||
* Added basic looping support
|
* Added basic looping support
|
||||||
* Added an aspect ratio option for those that can't leave the 90s and want 4:3
|
* Added an aspect ratio option for those that can't leave the 90s and want 4:3
|
||||||
* `controlshidden` and `controlsshown` events added for when the controls show or hide
|
* `controlshidden` and `controlsshown` events added for when the controls show or hide
|
||||||
@ -44,6 +44,7 @@ You gotta break eggs to make an omelette. Sadly, there's quite a few breaking ch
|
|||||||
|
|
||||||
* Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before
|
* Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before
|
||||||
* Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info
|
* Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info
|
||||||
|
* The data attributes for the embeds are now `data-plyr-provider` and `data-plyr-embed-id` to prevent compatibility issues. These can be changed under `config.attributes.embed` if required
|
||||||
* `blankUrl` -> `blankVideo`
|
* `blankUrl` -> `blankVideo`
|
||||||
* `volume` is now `0` to `1` as per HTML5 spec
|
* `volume` is now `0` to `1` as per HTML5 spec
|
||||||
* `keyboardShorcuts` (typo) is now just `keyboard`
|
* `keyboardShorcuts` (typo) is now just `keyboard`
|
||||||
@ -66,7 +67,7 @@ You gotta break eggs to make an omelette. Sadly, there's quite a few breaking ch
|
|||||||
|
|
||||||
### Polyfilling
|
### Polyfilling
|
||||||
|
|
||||||
Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [https://polyfill.io](polyfill.io).
|
Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io).
|
||||||
|
|
||||||
## v2.0.18
|
## v2.0.18
|
||||||
|
|
||||||
|
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
@ -1,3 +1,3 @@
|
|||||||
!function(){"use strict";var e,t,o,i,a,r;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{tag:"https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480"}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),a=window.history&&window.history.pushState;function r(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(a,n){if(a in o&&(n||a!==i)&&(i.length||a!==o.video)){switch(a){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=a,Array.from(t).forEach(function(e){return r(e.parentElement,"active",!1)}),r(document.querySelector('[data-source="'+a+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+a).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),a&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),a){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement(o),r=t.getElementsByTagName(o)[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(a,r),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
|
!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="//www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
|
||||||
|
|
||||||
//# sourceMappingURL=demo.js.map
|
//# sourceMappingURL=demo.js.map
|
||||||
|
2
demo/dist/demo.js.map
vendored
2
demo/dist/demo.js.map
vendored
File diff suppressed because one or more lines are too long
@ -10,6 +10,7 @@
|
|||||||
<link rel="stylesheet" href="dist/error.css">
|
<link rel="stylesheet" href="dist/error.css">
|
||||||
|
|
||||||
<!-- Preload -->
|
<!-- Preload -->
|
||||||
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
|
||||||
</head>
|
</head>
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
<link rel="stylesheet" href="dist/demo.css">
|
<link rel="stylesheet" href="dist/demo.css">
|
||||||
|
|
||||||
<!-- Preload -->
|
<!-- Preload -->
|
||||||
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
|
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
|
||||||
</head>
|
</head>
|
||||||
@ -65,8 +66,11 @@
|
|||||||
</svg>Vimeo</button>
|
</svg>Vimeo</button>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>Advertisement service provided by
|
<p>Premium video monitization from
|
||||||
<a href="https://vi.ai" target="_blank">vi.ai</a>
|
<a href="https://vi.ai/publisher-video-monetization/" target="_blank" class="no-border">
|
||||||
|
<img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi">
|
||||||
|
<span class="sr-only">ai.vi</span>
|
||||||
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="call-to-action">
|
<div class="call-to-action">
|
||||||
@ -166,7 +170,7 @@
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- Polyfills -->
|
<!-- Polyfills -->
|
||||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,fetch"></script>
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="../dist/plyr.js"></script>
|
<script src="../dist/plyr.js"></script>
|
||||||
|
@ -1,183 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
|
|
||||||
<meta name="description" property="og: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">
|
|
||||||
|
|
||||||
<!-- Icons -->
|
|
||||||
<link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
|
|
||||||
<link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
|
|
||||||
<link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
|
|
||||||
|
|
||||||
<!-- Opengraph -->
|
|
||||||
<meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player">
|
|
||||||
<meta property="og:site_name" content="Plyr">
|
|
||||||
<meta property="og:url" content="https://plyr.io">
|
|
||||||
<meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png">
|
|
||||||
|
|
||||||
<!-- Twitter -->
|
|
||||||
<meta name="twitter:card" content="summary">
|
|
||||||
<meta name="twitter:site" content="@sam_potts">
|
|
||||||
<meta name="twitter:creator" content="@sam_potts">
|
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
|
||||||
|
|
||||||
<!-- Docs styles -->
|
|
||||||
<link rel="stylesheet" href="dist/demo.css">
|
|
||||||
|
|
||||||
<!-- Preload -->
|
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
|
|
||||||
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="grid">
|
|
||||||
<header>
|
|
||||||
<h1>Plyr</h1>
|
|
||||||
<p>A simple, accessible and customisable media player for
|
|
||||||
<button type="button" class="faux-link" data-source="video">
|
|
||||||
<svg class="icon">
|
|
||||||
<title>HTML5</title>
|
|
||||||
<path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
|
|
||||||
</svg>Video</button>,
|
|
||||||
<button type="button" class="faux-link" data-source="audio">
|
|
||||||
<svg class="icon">
|
|
||||||
<title>HTML5</title>
|
|
||||||
<path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
|
|
||||||
</svg>Audio</button>,
|
|
||||||
<button type="button" class="faux-link" data-source="youtube">
|
|
||||||
<svg class="icon" role="presentation">
|
|
||||||
<title>YouTube</title>
|
|
||||||
<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
|
|
||||||
s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
|
|
||||||
M6,11V5l5,3L6,11z"></path>
|
|
||||||
</svg>YouTube</button> and
|
|
||||||
<button type="button" class="faux-link" data-source="vimeo">
|
|
||||||
<svg class="icon" role="presentation">
|
|
||||||
<title>Vimeo</title>
|
|
||||||
<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
|
|
||||||
C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
|
|
||||||
c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
|
|
||||||
</svg>Vimeo</button>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<!--<p>Monetization options provided by
|
|
||||||
<a href="https://vi.ai" target="_blank">vi.ai</a>
|
|
||||||
</p>-->
|
|
||||||
|
|
||||||
<div class="call-to-action">
|
|
||||||
<span class="button--with-count">
|
|
||||||
<a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
|
|
||||||
<svg class="icon" role="presentation">
|
|
||||||
<title>GitHub</title>
|
|
||||||
<path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
|
|
||||||
C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
|
|
||||||
c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
|
|
||||||
c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
|
|
||||||
c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
|
|
||||||
c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
|
|
||||||
</svg>
|
|
||||||
Download on GitHub
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
|
|
||||||
<!-- Video files -->
|
|
||||||
<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
|
|
||||||
<!--<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">-->
|
|
||||||
|
|
||||||
<!-- Text track file -->
|
|
||||||
<track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
|
|
||||||
<track kind="captions" label="Français" srclang="fr" src="media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
|
|
||||||
|
|
||||||
<!-- Fallback for browsers that don't support the <video> element -->
|
|
||||||
<a href="media/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
|
|
||||||
</video>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li class="plyr__cite plyr__cite--video" hidden>
|
|
||||||
<small>
|
|
||||||
<svg class="icon">
|
|
||||||
<title>HTML5</title>
|
|
||||||
<path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
|
|
||||||
</svg>
|
|
||||||
<a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm
|
|
||||||
</small>
|
|
||||||
</li>
|
|
||||||
<li class="plyr__cite plyr__cite--audio" hidden>
|
|
||||||
<small>
|
|
||||||
<svg class="icon" title="HTML5">
|
|
||||||
<title>HTML5</title>
|
|
||||||
<path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
|
|
||||||
</svg>
|
|
||||||
<a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi
|
|
||||||
</small>
|
|
||||||
</li>
|
|
||||||
<li class="plyr__cite plyr__cite--youtube" hidden>
|
|
||||||
<small>
|
|
||||||
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
|
|
||||||
<span class="color--youtube">
|
|
||||||
<svg class="icon" role="presentation">
|
|
||||||
<title>YouTube</title>
|
|
||||||
<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
|
|
||||||
s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
|
|
||||||
M6,11V5l5,3L6,11z"></path>
|
|
||||||
</svg>YouTube
|
|
||||||
</span>
|
|
||||||
</small>
|
|
||||||
</li>
|
|
||||||
<li class="plyr__cite plyr__cite--vimeo" hidden>
|
|
||||||
<small>
|
|
||||||
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
|
|
||||||
<span class="color--vimeo">
|
|
||||||
<svg class="icon" role="presentation">
|
|
||||||
<title>Vimeo</title>
|
|
||||||
<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
|
|
||||||
C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
|
|
||||||
c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
|
|
||||||
</svg>Vimeo
|
|
||||||
</span>
|
|
||||||
</small>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<aside>
|
|
||||||
<svg class="icon">
|
|
||||||
<title>Twitter</title>
|
|
||||||
<path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
|
|
||||||
C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
|
|
||||||
c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
|
|
||||||
c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
|
|
||||||
</svg>
|
|
||||||
<p>If you think Plyr's good,
|
|
||||||
<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" data-shr-network="twitter">tweet it</a>
|
|
||||||
</p>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- Polyfills -->
|
|
||||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,fetch"></script>
|
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
|
||||||
<script src="../dist/plyr.js"></script>
|
|
||||||
|
|
||||||
<!-- Sharing libary (https://shr.one) -->
|
|
||||||
<script src="https://cdn.shr.one/1.0.1/shr.js"></script>
|
|
||||||
|
|
||||||
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
|
|
||||||
<script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
|
|
||||||
|
|
||||||
<!-- Docs script -->
|
|
||||||
<script src="dist/demo.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
@ -35,10 +35,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Setup the player
|
// Setup the player
|
||||||
const player = new window.Plyr('#player', {
|
const player = new Plyr('#player', {
|
||||||
debug: true,
|
debug: true,
|
||||||
title: 'View From A Blue Moon',
|
title: 'View From A Blue Moon',
|
||||||
iconUrl: '../dist/plyr.svg',
|
// iconUrl: '../dist/plyr.svg',
|
||||||
keyboard: {
|
keyboard: {
|
||||||
global: true,
|
global: true,
|
||||||
},
|
},
|
||||||
@ -52,11 +52,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
|
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
|
||||||
},
|
},
|
||||||
ads: {
|
ads: {
|
||||||
tag:
|
enabled: true,
|
||||||
'https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480',
|
|
||||||
// Test tags
|
|
||||||
// tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
|
|
||||||
// tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=',
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -34,8 +34,13 @@
|
|||||||
@import '../components/icons';
|
@import '../components/icons';
|
||||||
@import '../components/links';
|
@import '../components/links';
|
||||||
@import '../components/lists';
|
@import '../components/lists';
|
||||||
|
@import '../components/media';
|
||||||
@import '../components/navigation';
|
@import '../components/navigation';
|
||||||
@import '../components/players';
|
@import '../components/players';
|
||||||
|
|
||||||
// Plyr
|
// Plyr
|
||||||
@import '../../../../src/sass/plyr';
|
@import '../../../../src/sass/plyr';
|
||||||
|
|
||||||
|
// Utils
|
||||||
|
@import '../utilities/cosmetic';
|
||||||
|
@import '../utilities/hidden';
|
||||||
|
@ -42,4 +42,8 @@ a {
|
|||||||
&.tab-focus {
|
&.tab-focus {
|
||||||
@include tab-focus();
|
@include tab-focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.no-border::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,11 +1,10 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Color
|
// Basic media
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|
||||||
.color--vimeo {
|
img,
|
||||||
color: $color-vimeo;
|
video,
|
||||||
}
|
audio {
|
||||||
|
max-width: 100%;
|
||||||
.color--youtube {
|
vertical-align: middle;
|
||||||
color: $color-youtube;
|
|
||||||
}
|
}
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@include font-size($font-size-h1);
|
@include font-size($font-size-h1);
|
||||||
font-weight: $font-weight-bold;
|
font-weight: $font-weight-light;
|
||||||
letter-spacing: $letter-spacing-headings;
|
letter-spacing: $letter-spacing-headings;
|
||||||
margin: 0 0 ($spacing-base / 2);
|
margin: 0 0 ($spacing-base / 2);
|
||||||
}
|
}
|
||||||
|
7
demo/src/sass/utilities/cosmetic.scss
Normal file
7
demo/src/sass/utilities/cosmetic.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
// ==========================================================================
|
||||||
|
// Misc cosmetic
|
||||||
|
// ==========================================================================
|
||||||
|
|
||||||
|
.no-border {
|
||||||
|
border: 0;
|
||||||
|
}
|
@ -5,3 +5,16 @@
|
|||||||
[hidden] {
|
[hidden] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hide only visually, but have it available for screen readers: h5bp.com/v
|
||||||
|
.sr-only {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
opacity: 0.001;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js.map
vendored
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
@ -312,9 +312,13 @@ if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
|
|||||||
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
|
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
|
||||||
.pipe(gulp.dest(root));
|
.pipe(gulp.dest(root));
|
||||||
|
|
||||||
// Replace versioned files in plyr.js
|
// Replace versioned URLs in source
|
||||||
|
const files = [
|
||||||
|
'plyr.js',
|
||||||
|
'defaults.js',
|
||||||
|
];
|
||||||
gulp
|
gulp
|
||||||
.src(path.join(root, 'src/js/plyr.js'))
|
.src(files.map(file => path.join(root, `src/js/${file}`)))
|
||||||
.pipe(replace(semver, `v${version}`))
|
.pipe(replace(semver, `v${version}`))
|
||||||
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
|
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
|
||||||
.pipe(gulp.dest(path.join(root, 'src/js/')));
|
.pipe(gulp.dest(path.join(root, 'src/js/')));
|
||||||
|
14
package.json
14
package.json
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "3.0.0-beta.7",
|
"version": "3.0.0-beta.12",
|
||||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||||
"homepage": "https://plyr.io",
|
"homepage": "https://plyr.io",
|
||||||
"main": "./dist",
|
"main": "./dist/plyr.js",
|
||||||
"sass": "./src/sass/plyr.scss",
|
"sass": "./src/sass/plyr.scss",
|
||||||
"style": "./dist/plyr.css",
|
"style": "./dist/plyr.css",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -12,7 +12,7 @@
|
|||||||
"babel-plugin-external-helpers": "^6.22.0",
|
"babel-plugin-external-helpers": "^6.22.0",
|
||||||
"babel-preset-env": "^1.6.1",
|
"babel-preset-env": "^1.6.1",
|
||||||
"del": "^3.0.0",
|
"del": "^3.0.0",
|
||||||
"eslint": "^4.16.0",
|
"eslint": "^4.17.0",
|
||||||
"eslint-config-airbnb-base": "^12.1.0",
|
"eslint-config-airbnb-base": "^12.1.0",
|
||||||
"eslint-config-prettier": "^2.9.0",
|
"eslint-config-prettier": "^2.9.0",
|
||||||
"eslint-plugin-import": "^2.8.0",
|
"eslint-plugin-import": "^2.8.0",
|
||||||
@ -28,12 +28,12 @@
|
|||||||
"gulp-s3": "^0.11.0",
|
"gulp-s3": "^0.11.0",
|
||||||
"gulp-sass": "^3.1.0",
|
"gulp-sass": "^3.1.0",
|
||||||
"gulp-size": "^3.0.0",
|
"gulp-size": "^3.0.0",
|
||||||
"gulp-sourcemaps": "^1.12.1",
|
"gulp-sourcemaps": "^2.6.4",
|
||||||
"gulp-svgmin": "^1.2.4",
|
"gulp-svgmin": "^1.2.4",
|
||||||
"gulp-svgstore": "^6.1.1",
|
"gulp-svgstore": "^6.1.1",
|
||||||
"gulp-util": "^3.0.8",
|
"gulp-util": "^3.0.8",
|
||||||
"rollup-plugin-babel": "^3.0.3",
|
"rollup-plugin-babel": "^3.0.3",
|
||||||
"rollup-plugin-commonjs": "^8.2.6",
|
"rollup-plugin-commonjs": "^8.3.0",
|
||||||
"rollup-plugin-node-resolve": "^3.0.2",
|
"rollup-plugin-node-resolve": "^3.0.2",
|
||||||
"rollup-plugin-uglify": "^3.0.0",
|
"rollup-plugin-uglify": "^3.0.0",
|
||||||
"run-sequence": "^2.2.1",
|
"run-sequence": "^2.2.1",
|
||||||
@ -42,9 +42,9 @@
|
|||||||
"stylelint-config-sass-guidelines": "^4.1.0",
|
"stylelint-config-sass-guidelines": "^4.1.0",
|
||||||
"stylelint-config-standard": "^18.0.0",
|
"stylelint-config-standard": "^18.0.0",
|
||||||
"stylelint-order": "^0.8.0",
|
"stylelint-order": "^0.8.0",
|
||||||
"stylelint-scss": "^2.2.0",
|
"stylelint-scss": "^2.3.0",
|
||||||
"stylelint-selector-bem-pattern": "^2.0.0",
|
"stylelint-selector-bem-pattern": "^2.0.0",
|
||||||
"uglify-es": "^3.3.8"
|
"uglify-es": "^3.3.9"
|
||||||
},
|
},
|
||||||
"keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
|
"keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
|
||||||
"repository": {
|
"repository": {
|
||||||
|
47
readme.md
47
readme.md
@ -6,7 +6,7 @@ Beware: This version is currently in beta and not production-ready
|
|||||||
|
|
||||||
A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
|
A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
|
||||||
|
|
||||||
[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](http://bit.ly/plyr-chat)
|
[Checkout the demo](https://plyr.io) - [Donate to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)
|
||||||
|
|
||||||
[](https://plyr.io)
|
[](https://plyr.io)
|
||||||
|
|
||||||
@ -95,20 +95,40 @@ For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the
|
|||||||
|
|
||||||
#### YouTube embed
|
#### YouTube embed
|
||||||
|
|
||||||
|
We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) with the embedded players. You can elect to use an `<iframe>` as the source element (which Plyr will progressively enhance) or a bog standard `<div>` with two essential data attributes - `data-plyr-provider` and `data-plyr-embed-id`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="plyr__video-embed" id="player">
|
<div class="plyr__video-embed" id="player">
|
||||||
<iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
|
<iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used.
|
||||||
|
|
||||||
|
Or the `<div>` non progressively enhanced method:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.
|
||||||
|
|
||||||
#### Vimeo embed
|
#### Vimeo embed
|
||||||
|
|
||||||
|
Much the same as YouTube above.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="plyr__video-embed" id="player">
|
<div class="plyr__video-embed" id="player">
|
||||||
<iframe src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
|
<iframe src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Or the `<div>` non progressively enhanced method:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
|
||||||
|
```
|
||||||
|
|
||||||
### JavaScript
|
### JavaScript
|
||||||
|
|
||||||
Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under
|
Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under
|
||||||
@ -122,9 +142,11 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
|
|||||||
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
|
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.plyr.io/3.0.0-beta.7/plyr.js"></script>
|
<script src="https://cdn.plyr.io/3.0.0-beta.12/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
_Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
|
||||||
|
|
||||||
### CSS
|
### CSS
|
||||||
|
|
||||||
Include the `plyr.css` stylsheet into your `<head>`
|
Include the `plyr.css` stylsheet into your `<head>`
|
||||||
@ -136,13 +158,13 @@ Include the `plyr.css` stylsheet into your `<head>`
|
|||||||
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.7/plyr.css">
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.12/plyr.css">
|
||||||
```
|
```
|
||||||
|
|
||||||
### SVG Sprite
|
### SVG Sprite
|
||||||
|
|
||||||
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
|
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
|
||||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.7/plyr.svg`.
|
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.12/plyr.svg`.
|
||||||
|
|
||||||
## Advanced
|
## Advanced
|
||||||
|
|
||||||
@ -570,22 +592,25 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http
|
|||||||
|
|
||||||
## Browser support
|
## Browser support
|
||||||
|
|
||||||
Plyr supports the last 2 versions of most _modern_ browsers. IE11 is also supported.
|
Plyr supports the last 2 versions of most _modern_ browsers.
|
||||||
|
|
||||||
| Browser | Supported |
|
| Browser | Supported |
|
||||||
| ------------- | -------------- |
|
| ------------- | --------- |
|
||||||
| Safari | ✔ |
|
| Safari | ✔ |
|
||||||
| Mobile Safari | ✔¹ |
|
| Mobile Safari | ✔¹ |
|
||||||
| Firefox | ✔ |
|
| Firefox | ✔ |
|
||||||
| Chrome | ✔ |
|
| Chrome | ✔ |
|
||||||
| Opera | ✔ |
|
| Opera | ✔ |
|
||||||
| Edge | ✔ |
|
| Edge | ✔ |
|
||||||
| IE10+ | ✔² |
|
| IE11 | ✔ |
|
||||||
| IE9 | API only³ |
|
| IE10 | ✔² |
|
||||||
|
|
||||||
1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled.
|
1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide.
|
||||||
2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)
|
2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options))
|
||||||
3. IE10 has no native fullscreen support, fallback can be used (see [options](#options))
|
|
||||||
|
### Polyfills
|
||||||
|
|
||||||
|
Plyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the ~90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs. The easiest method I've found is to use [polyfill.io](https://polyfill.io) which provides polyfills based on user agent. This is the method the demo uses.
|
||||||
|
|
||||||
### Checking for support
|
### Checking for support
|
||||||
|
|
||||||
|
@ -56,7 +56,7 @@ const defaults = {
|
|||||||
// Sprite (for icons)
|
// Sprite (for icons)
|
||||||
loadSprite: true,
|
loadSprite: true,
|
||||||
iconPrefix: 'plyr',
|
iconPrefix: 'plyr',
|
||||||
iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
|
iconUrl: 'https://cdn.plyr.io/3.0.0-beta.12/plyr.svg',
|
||||||
|
|
||||||
// Blank video (used to prevent errors on source change)
|
// Blank video (used to prevent errors on source change)
|
||||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||||
@ -358,14 +358,23 @@ const defaults = {
|
|||||||
tabFocus: 'plyr__tab-focus',
|
tabFocus: 'plyr__tab-focus',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Embed attributes
|
||||||
|
attributes: {
|
||||||
|
embed: {
|
||||||
|
provider: 'data-plyr-provider',
|
||||||
|
id: 'data-plyr-embed-id',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
// API keys
|
// API keys
|
||||||
keys: {
|
keys: {
|
||||||
google: null,
|
google: null,
|
||||||
},
|
},
|
||||||
|
|
||||||
// Ads
|
// Advertisements plugin
|
||||||
|
// Tag is not required as publisher is determined by vi.ai using the domain
|
||||||
ads: {
|
ads: {
|
||||||
tag: null,
|
enabled: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -8,6 +8,22 @@
|
|||||||
|
|
||||||
import utils from '../utils';
|
import utils from '../utils';
|
||||||
|
|
||||||
|
// Build the default tag URL
|
||||||
|
const getTagUrl = () => {
|
||||||
|
const params = {
|
||||||
|
AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
|
||||||
|
AV_CHANNELID: '5a0458dc28a06145e4519d21',
|
||||||
|
AV_URL: '127.0.0.1:3000',
|
||||||
|
cb: 1,
|
||||||
|
AV_WIDTH: 640,
|
||||||
|
AV_HEIGHT: 480,
|
||||||
|
};
|
||||||
|
|
||||||
|
const base = 'https://go.aniview.com/api/adserver6/vast/';
|
||||||
|
|
||||||
|
return `${base}?${utils.buildUrlParams(params)}`;
|
||||||
|
};
|
||||||
|
|
||||||
class Ads {
|
class Ads {
|
||||||
/**
|
/**
|
||||||
* Ads constructor.
|
* Ads constructor.
|
||||||
@ -16,8 +32,10 @@ class Ads {
|
|||||||
*/
|
*/
|
||||||
constructor(player) {
|
constructor(player) {
|
||||||
this.player = player;
|
this.player = player;
|
||||||
|
this.enabled = player.config.ads.enabled;
|
||||||
this.playing = false;
|
this.playing = false;
|
||||||
this.initialized = false;
|
this.initialized = false;
|
||||||
|
this.blocked = false;
|
||||||
this.enabled = utils.is.url(player.config.ads.tag);
|
this.enabled = utils.is.url(player.config.ads.tag);
|
||||||
|
|
||||||
// Check if a tag URL is provided.
|
// Check if a tag URL is provided.
|
||||||
@ -25,11 +43,19 @@ class Ads {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if the Google IMA3 SDK is loaded
|
// Check if the Google IMA3 SDK is loaded or load it ourselves
|
||||||
if (!utils.is.object(window.google)) {
|
if (!utils.is.object(window.google)) {
|
||||||
utils.loadScript(player.config.urls.googleIMA.api, () => {
|
utils.loadScript(
|
||||||
|
player.config.urls.googleIMA.api,
|
||||||
|
() => {
|
||||||
this.ready();
|
this.ready();
|
||||||
});
|
},
|
||||||
|
() => {
|
||||||
|
// Script failed to load or is blocked
|
||||||
|
this.blocked = true;
|
||||||
|
this.player.debug.log('Ads error: Google IMA SDK failed to load');
|
||||||
|
},
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
this.ready();
|
this.ready();
|
||||||
}
|
}
|
||||||
@ -122,7 +148,7 @@ class Ads {
|
|||||||
|
|
||||||
// Request video ads
|
// Request video ads
|
||||||
const request = new google.ima.AdsRequest();
|
const request = new google.ima.AdsRequest();
|
||||||
request.adTagUrl = this.player.config.ads.tag;
|
request.adTagUrl = getTagUrl();
|
||||||
|
|
||||||
// Specify the linear and nonlinear slot sizes. This helps the SDK
|
// Specify the linear and nonlinear slot sizes. This helps the SDK
|
||||||
// to select the correct creative if multiple are returned
|
// to select the correct creative if multiple are returned
|
||||||
|
@ -51,7 +51,16 @@ const vimeo = {
|
|||||||
gesture: 'media',
|
gesture: 'media',
|
||||||
};
|
};
|
||||||
const params = utils.buildUrlParams(options);
|
const params = utils.buildUrlParams(options);
|
||||||
const id = utils.parseVimeoId(player.media.getAttribute('src'));
|
|
||||||
|
// Get the source URL or ID
|
||||||
|
let source = player.media.getAttribute('src');
|
||||||
|
|
||||||
|
// Get from <div> if needed
|
||||||
|
if (utils.is.empty(source)) {
|
||||||
|
source = player.media.getAttribute(this.config.attributes.embed.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = utils.parseVimeoId(source);
|
||||||
|
|
||||||
// Build an iframe
|
// Build an iframe
|
||||||
const iframe = utils.createElement('iframe');
|
const iframe = utils.createElement('iframe');
|
||||||
|
@ -59,10 +59,10 @@ const youtube = {
|
|||||||
if (utils.is.string(key) && !utils.is.empty(key)) {
|
if (utils.is.string(key) && !utils.is.empty(key)) {
|
||||||
const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`;
|
const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`;
|
||||||
|
|
||||||
fetch(url)
|
utils
|
||||||
.then(response => (response.ok ? response.json() : null))
|
.fetch(url)
|
||||||
.then(result => {
|
.then(result => {
|
||||||
if (result !== null && utils.is.object(result)) {
|
if (utils.is.object(result)) {
|
||||||
this.config.title = result.items[0].snippet.title;
|
this.config.title = result.items[0].snippet.title;
|
||||||
ui.setTitle.call(this);
|
ui.setTitle.call(this);
|
||||||
}
|
}
|
||||||
@ -87,8 +87,16 @@ const youtube = {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Get the source URL or ID
|
||||||
|
let source = player.media.getAttribute('src');
|
||||||
|
|
||||||
|
// Get from <div> if needed
|
||||||
|
if (utils.is.empty(source)) {
|
||||||
|
source = player.media.getAttribute(this.config.attributes.embed.id);
|
||||||
|
}
|
||||||
|
|
||||||
// Replace the <iframe> with a <div> due to YouTube API issues
|
// Replace the <iframe> with a <div> due to YouTube API issues
|
||||||
const videoId = utils.parseYouTubeId(player.media.getAttribute('src'));
|
const videoId = utils.parseYouTubeId(source);
|
||||||
const id = utils.generateId(player.provider);
|
const id = utils.generateId(player.provider);
|
||||||
const container = utils.createElement('div', { id });
|
const container = utils.createElement('div', { id });
|
||||||
player.media = utils.replaceElement(container, player.media);
|
player.media = utils.replaceElement(container, player.media);
|
||||||
@ -108,8 +116,8 @@ const youtube = {
|
|||||||
playsinline: 1, // Allow iOS inline playback
|
playsinline: 1, // Allow iOS inline playback
|
||||||
|
|
||||||
// Tracking for stats
|
// Tracking for stats
|
||||||
origin: window && window.location.hostname,
|
// origin: window ? `${window.location.protocol}//${window.location.host}` : null,
|
||||||
widget_referrer: window && window.location.href,
|
widget_referrer: window ? window.location.href : null,
|
||||||
|
|
||||||
// Captions are flaky on YouTube
|
// Captions are flaky on YouTube
|
||||||
cc_load_policy: player.captions.active ? 1 : 0,
|
cc_load_policy: player.captions.active ? 1 : 0,
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v3.0.0-beta.7
|
// plyr.js v3.0.0-beta.12
|
||||||
// https://github.com/sampotts/plyr
|
// https://github.com/sampotts/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@ -153,19 +153,19 @@ class Plyr {
|
|||||||
// Find the frame
|
// Find the frame
|
||||||
iframe = this.media.querySelector('iframe');
|
iframe = this.media.querySelector('iframe');
|
||||||
|
|
||||||
// <iframe> required
|
// <iframe> type
|
||||||
if (!utils.is.element(iframe)) {
|
if (utils.is.element(iframe)) {
|
||||||
this.debug.error('Setup failed: <iframe> is missing');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Audio will come later for external providers
|
|
||||||
this.type = types.video;
|
|
||||||
|
|
||||||
// Detect provider
|
// Detect provider
|
||||||
url = iframe.getAttribute('src');
|
url = iframe.getAttribute('src');
|
||||||
this.provider = utils.getProviderByUrl(url);
|
this.provider = utils.getProviderByUrl(url);
|
||||||
|
|
||||||
|
// Rework elements
|
||||||
|
this.elements.container = this.media;
|
||||||
|
this.media = iframe;
|
||||||
|
|
||||||
|
// Reset classname
|
||||||
|
this.elements.container.className = '';
|
||||||
|
|
||||||
// Get attributes from URL and set config
|
// Get attributes from URL and set config
|
||||||
params = utils.getUrlParams(url);
|
params = utils.getUrlParams(url);
|
||||||
if (!utils.is.empty(params)) {
|
if (!utils.is.empty(params)) {
|
||||||
@ -184,19 +184,22 @@ class Plyr {
|
|||||||
this.config.loop.active = true;
|
this.config.loop.active = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// <div> with attributes
|
||||||
|
this.provider = this.media.getAttribute(this.config.attributes.embed.provider);
|
||||||
|
|
||||||
// Unsupported provider
|
// Remove attribute
|
||||||
|
this.media.removeAttribute(this.config.attributes.embed.provider);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unsupported or missing provider
|
||||||
if (utils.is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
|
if (utils.is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
|
||||||
this.debug.error('Setup failed: Invalid provider');
|
this.debug.error('Setup failed: Invalid provider');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rework elements
|
// Audio will come later for external providers
|
||||||
this.elements.container = this.media;
|
this.type = types.video;
|
||||||
this.media = iframe;
|
|
||||||
|
|
||||||
// Reset classname
|
|
||||||
this.elements.container.className = '';
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -306,14 +309,17 @@ class Plyr {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Play the media, or play the advertisement
|
* Play the media, or play the advertisement (if they are not blocked)
|
||||||
*/
|
*/
|
||||||
play() {
|
play() {
|
||||||
if (this.ads.enabled && !this.ads.initialized) {
|
// TODO: Always return a promise?
|
||||||
|
if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) {
|
||||||
this.ads.play();
|
this.ads.play();
|
||||||
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.media.play();
|
// Return the promise (for HTML5)
|
||||||
|
return this.media.play();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -556,6 +562,10 @@ class Plyr {
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.isAudio) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
// Get audio tracks
|
// Get audio tracks
|
||||||
return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
|
return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ const utils = {
|
|||||||
// Check variable types
|
// Check variable types
|
||||||
is: {
|
is: {
|
||||||
plyr(input) {
|
plyr(input) {
|
||||||
return this.instanceof(input, Plyr);
|
return this.instanceof(input, window.Plyr);
|
||||||
},
|
},
|
||||||
object(input) {
|
object(input) {
|
||||||
return this.getConstructor(input) === Object;
|
return this.getConstructor(input) === Object;
|
||||||
@ -81,8 +81,40 @@ const utils = {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Fetch wrapper
|
||||||
|
// Using XHR to avoid issues with older browsers
|
||||||
|
fetch(url) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
try {
|
||||||
|
const request = new XMLHttpRequest();
|
||||||
|
|
||||||
|
// Check for CORS support
|
||||||
|
if (!('withCredentials' in request)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
request.addEventListener('load', () => {
|
||||||
|
try {
|
||||||
|
resolve(JSON.parse(request.responseText));
|
||||||
|
} catch(e) {
|
||||||
|
resolve(request.responseText);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
request.addEventListener('error', () => {
|
||||||
|
throw new Error(request.statusText);
|
||||||
|
});
|
||||||
|
|
||||||
|
request.open('GET', url, true);
|
||||||
|
request.send();
|
||||||
|
} catch (e) {
|
||||||
|
reject(e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
// Load an external script
|
// Load an external script
|
||||||
loadScript(url, callback) {
|
loadScript(url, callback, error) {
|
||||||
const current = document.querySelector(`script[src="${url}"]`);
|
const current = document.querySelector(`script[src="${url}"]`);
|
||||||
|
|
||||||
// Check script is not already referenced, if so wait for load
|
// Check script is not already referenced, if so wait for load
|
||||||
@ -99,6 +131,10 @@ const utils = {
|
|||||||
element.callbacks = element.callbacks || [];
|
element.callbacks = element.callbacks || [];
|
||||||
element.callbacks.push(callback);
|
element.callbacks.push(callback);
|
||||||
|
|
||||||
|
// Error queue
|
||||||
|
element.errors = element.errors || [];
|
||||||
|
element.errors.push(error);
|
||||||
|
|
||||||
// Bind callback
|
// Bind callback
|
||||||
if (utils.is.function(callback)) {
|
if (utils.is.function(callback)) {
|
||||||
element.addEventListener(
|
element.addEventListener(
|
||||||
@ -111,6 +147,16 @@ const utils = {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bind error handling
|
||||||
|
element.addEventListener(
|
||||||
|
'error',
|
||||||
|
event => {
|
||||||
|
element.errors.forEach(err => err.call(null, event));
|
||||||
|
element.errors = null;
|
||||||
|
},
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
|
||||||
// Set the URL after binding callback
|
// Set the URL after binding callback
|
||||||
element.src = url;
|
element.src = url;
|
||||||
|
|
||||||
@ -160,10 +206,10 @@ const utils = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Get the sprite
|
// Get the sprite
|
||||||
fetch(url)
|
utils
|
||||||
.then(response => (response.ok ? response.text() : null))
|
.fetch(url)
|
||||||
.then(text => {
|
.then(result => {
|
||||||
if (text === null) {
|
if (utils.is.empty(result)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -171,12 +217,12 @@ const utils = {
|
|||||||
window.localStorage.setItem(
|
window.localStorage.setItem(
|
||||||
prefix + id,
|
prefix + id,
|
||||||
JSON.stringify({
|
JSON.stringify({
|
||||||
content: text,
|
content: result,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
updateSprite.call(container, text);
|
updateSprite.call(container, result);
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
@ -573,7 +619,7 @@ const utils = {
|
|||||||
const event = new CustomEvent(type, {
|
const event = new CustomEvent(type, {
|
||||||
bubbles: utils.is.boolean(bubbles) ? bubbles : false,
|
bubbles: utils.is.boolean(bubbles) ? bubbles : false,
|
||||||
detail: Object.assign({}, detail, {
|
detail: Object.assign({}, detail, {
|
||||||
plyr: this instanceof Plyr ? this : null,
|
plyr: utils.is.plyr(this) ? this : null,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -606,9 +652,15 @@ const utils = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// Time helpers
|
// Time helpers
|
||||||
getHours(value) { return parseInt((value / 60 / 60) % 60, 10); },
|
getHours(value) {
|
||||||
getMinutes(value) { return parseInt((value / 60) % 60, 10); },
|
return parseInt((value / 60 / 60) % 60, 10);
|
||||||
getSeconds(value) { return parseInt(value % 60, 10); },
|
},
|
||||||
|
getMinutes(value) {
|
||||||
|
return parseInt((value / 60) % 60, 10);
|
||||||
|
},
|
||||||
|
getSeconds(value) {
|
||||||
|
return parseInt(value % 60, 10);
|
||||||
|
},
|
||||||
|
|
||||||
// Format time to UI friendly string
|
// Format time to UI friendly string
|
||||||
formatTime(time = 0, displayHours = false, inverted = false) {
|
formatTime(time = 0, displayHours = false, inverted = false) {
|
||||||
|
@ -91,6 +91,21 @@
|
|||||||
@include plyr-tab-focus();
|
@include plyr-tab-focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Video range inputs
|
||||||
|
.plyr--full-ui.plyr--video input[type='range'] {
|
||||||
|
&::-webkit-slider-runnable-track {
|
||||||
|
background-color: $plyr-video-range-track-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-track {
|
||||||
|
background-color: $plyr-video-range-track-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-track {
|
||||||
|
background-color: $plyr-video-range-track-bg;
|
||||||
|
}
|
||||||
|
|
||||||
// Pressed styles
|
// Pressed styles
|
||||||
&:active {
|
&:active {
|
||||||
@ -108,21 +123,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Video range inputs
|
|
||||||
.plyr--full-ui.plyr--video input[type='range'] {
|
|
||||||
&::-webkit-slider-runnable-track {
|
|
||||||
background-color: $plyr-video-range-track-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-track {
|
|
||||||
background-color: $plyr-video-range-track-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-ms-track {
|
|
||||||
background-color: $plyr-video-range-track-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Audio range inputs
|
// Audio range inputs
|
||||||
.plyr--full-ui.plyr--audio input[type='range'] {
|
.plyr--full-ui.plyr--audio input[type='range'] {
|
||||||
&::-webkit-slider-runnable-track {
|
&::-webkit-slider-runnable-track {
|
||||||
@ -136,4 +136,19 @@
|
|||||||
&::-ms-track {
|
&::-ms-track {
|
||||||
background-color: $plyr-audio-range-track-bg;
|
background-color: $plyr-audio-range-track-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Pressed styles
|
||||||
|
&:active {
|
||||||
|
&::-webkit-slider-thumb {
|
||||||
|
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-range-thumb {
|
||||||
|
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-thumb {
|
||||||
|
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -44,8 +44,8 @@
|
|||||||
width: $plyr-range-thumb-height;
|
width: $plyr-range-thumb-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin plyr-range-thumb-active() {
|
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
|
||||||
box-shadow: 0 0 0 $plyr-range-thumb-active-shadow-width transparentize($plyr-range-thumb-bg, 0.5);
|
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fullscreen styles
|
// Fullscreen styles
|
||||||
@ -87,6 +87,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hide cursor in fullscreen when controls hidden
|
||||||
|
&.plyr--hide-controls {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
||||||
// Large captions in full screen on larger screens
|
// Large captions in full screen on larger screens
|
||||||
@media (min-width: $plyr-bp-lg) {
|
@media (min-width: $plyr-bp-lg) {
|
||||||
.plyr__captions {
|
.plyr__captions {
|
||||||
|
@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
|
|||||||
$plyr-range-thumb-height: 14px !default;
|
$plyr-range-thumb-height: 14px !default;
|
||||||
$plyr-range-thumb-bg: #fff !default;
|
$plyr-range-thumb-bg: #fff !default;
|
||||||
$plyr-range-thumb-border: 2px solid transparent !default;
|
$plyr-range-thumb-border: 2px solid transparent !default;
|
||||||
$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
|
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
|
||||||
|
|
||||||
// Track
|
// Track
|
||||||
$plyr-range-track-height: 6px !default;
|
$plyr-range-track-height: 6px !default;
|
||||||
@ -21,3 +21,4 @@ $plyr-range-fill-bg: $plyr-color-main !default;
|
|||||||
// Type specific
|
// Type specific
|
||||||
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
|
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
|
||||||
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
|
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
|
||||||
|
$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
|
||||||
|
28
yarn.lock
28
yarn.lock
@ -2322,9 +2322,9 @@ gulp-size@^3.0.0:
|
|||||||
stream-counter "^1.0.0"
|
stream-counter "^1.0.0"
|
||||||
through2 "^2.0.0"
|
through2 "^2.0.0"
|
||||||
|
|
||||||
gulp-sourcemaps@^2.6.3:
|
gulp-sourcemaps@^2.6.4:
|
||||||
version "2.6.3"
|
version "2.6.4"
|
||||||
resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.3.tgz#11b033f759f909e0a5f15b7bdf47ac29cc54efa4"
|
resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.4.tgz#cbb2008450b1bcce6cd23bf98337be751bf6e30a"
|
||||||
dependencies:
|
dependencies:
|
||||||
"@gulp-sourcemaps/identity-map" "1.X"
|
"@gulp-sourcemaps/identity-map" "1.X"
|
||||||
"@gulp-sourcemaps/map-sources" "1.X"
|
"@gulp-sourcemaps/map-sources" "1.X"
|
||||||
@ -2334,7 +2334,7 @@ gulp-sourcemaps@^2.6.3:
|
|||||||
debug-fabulous "1.X"
|
debug-fabulous "1.X"
|
||||||
detect-newline "2.X"
|
detect-newline "2.X"
|
||||||
graceful-fs "4.X"
|
graceful-fs "4.X"
|
||||||
source-map "0.X"
|
source-map "~0.6.0"
|
||||||
strip-bom-string "1.X"
|
strip-bom-string "1.X"
|
||||||
through2 "2.X"
|
through2 "2.X"
|
||||||
|
|
||||||
@ -4553,9 +4553,9 @@ rollup-plugin-babel@^3.0.3:
|
|||||||
dependencies:
|
dependencies:
|
||||||
rollup-pluginutils "^1.5.0"
|
rollup-pluginutils "^1.5.0"
|
||||||
|
|
||||||
rollup-plugin-commonjs@^8.2.6:
|
rollup-plugin-commonjs@^8.3.0:
|
||||||
version "8.2.6"
|
version "8.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.2.6.tgz#27e5b9069ff94005bb01e01bb46a1e4873784677"
|
resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.3.0.tgz#91b4ba18f340951e39ed7b1901f377a80ab3f9c3"
|
||||||
dependencies:
|
dependencies:
|
||||||
acorn "^5.2.1"
|
acorn "^5.2.1"
|
||||||
estree-walker "^0.5.0"
|
estree-walker "^0.5.0"
|
||||||
@ -4791,10 +4791,6 @@ source-map@0.5.x, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6:
|
|||||||
version "0.5.7"
|
version "0.5.7"
|
||||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||||
|
|
||||||
source-map@0.X, source-map@^0.6.1, source-map@~0.6.1:
|
|
||||||
version "0.6.1"
|
|
||||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
|
||||||
|
|
||||||
source-map@^0.1.38:
|
source-map@^0.1.38:
|
||||||
version "0.1.43"
|
version "0.1.43"
|
||||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
|
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
|
||||||
@ -4807,6 +4803,10 @@ source-map@^0.4.2:
|
|||||||
dependencies:
|
dependencies:
|
||||||
amdefine ">=0.0.4"
|
amdefine ">=0.0.4"
|
||||||
|
|
||||||
|
source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
|
||||||
|
version "0.6.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||||
|
|
||||||
sparkles@^1.0.0:
|
sparkles@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
|
resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3"
|
||||||
@ -5287,9 +5287,9 @@ uglify-es@^3.3.7:
|
|||||||
commander "~2.13.0"
|
commander "~2.13.0"
|
||||||
source-map "~0.6.1"
|
source-map "~0.6.1"
|
||||||
|
|
||||||
uglify-es@^3.3.8:
|
uglify-es@^3.3.9:
|
||||||
version "3.3.8"
|
version "3.3.9"
|
||||||
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.8.tgz#f2c68e6cff0d0f9dc9577e4da207151c2e753b7e"
|
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
|
||||||
dependencies:
|
dependencies:
|
||||||
commander "~2.13.0"
|
commander "~2.13.0"
|
||||||
source-map "~0.6.1"
|
source-map "~0.6.1"
|
||||||
|
Reference in New Issue
Block a user