Compare commits
29 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sam Potts
|
f927d26ce7 | ||
|
Sam Potts
|
e8d2f23b81 | ||
 Raccoon
|
0e181133c1 | ||
|
Sam Potts
|
2c8a337f26 | ||
|
Sam Potts
|
c24e52d97d | ||
|
Sam Potts
|
574f40949c | ||
|
Sam Potts
|
cf3848fbd5 | ||
|
Sam Potts
|
a19ad69038 | ||
|
Sam Potts
|
d6f20e2756 | ||
|
Sam Potts
|
e2fc20ca76 | ||
|
Sam Potts
|
37c3f7109d | ||
|
Sam Potts
|
99d5211a33 | ||
 Dan Gold
|
b97f143195 | ||
|
Sam Potts
|
e8da4326b6 | ||
|
Sam Potts
|
67f908aa8d | ||
|
Sam Potts
|
65eb5c1b8b | ||
|
Sam Potts
|
7d484c6e09 | ||
 Stephan Fischer
|
8252e13eb9 | ||
|
Sam Potts
|
1a9b860e68 | ||
|
Sam Potts
|
cede7d0f35 | ||
|
Sam Potts
|
fe26d383f1 | ||
|
Sam Potts
|
df4bc268dc | ||
|
Sam Potts
|
67b7262764 | ||
|
Sam Potts
|
88528ef979 | ||
|
Sam Potts
|
b6175b1ca9 | ||
|
Sam Potts
|
aa20ebaa9c | ||
 Mohamed Elbahja
|
06db3f702d | ||
 Mohamed Elbahja
|
a2a82a96a6 | ||
 Robin van Nunen
|
a86bbae851 |
+191
-180
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+9
-18
@@ -4325,30 +4325,21 @@ typeof navigator === "object" && (function () {
|
||||
} // Google analytics
|
||||
// For demo site (https://plyr.io) only
|
||||
|
||||
/* eslint-disable */
|
||||
|
||||
|
||||
if (env.prod) {
|
||||
(function (i, s, o, g, r, a, m) {
|
||||
i.GoogleAnalyticsObject = r;
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
i[r] = i[r] || function () {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
};
|
||||
var gtag = function gtag() {
|
||||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
||||
args[_key] = arguments[_key];
|
||||
}
|
||||
|
||||
i[r].l = 1 * new Date();
|
||||
a = s.createElement(o);
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m);
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
window.dataLayer.push(args);
|
||||
};
|
||||
|
||||
window.ga('create', 'UA-40881672-11', 'auto');
|
||||
window.ga('send', 'pageview');
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-132699580-1');
|
||||
}
|
||||
/* eslint-enable */
|
||||
|
||||
})();
|
||||
|
||||
}());
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+264
-165
@@ -1,191 +1,290 @@
|
||||
<!doctype html>
|
||||
<!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" />
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- 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" />
|
||||
|
||||
<!-- 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" />
|
||||
|
||||
<!-- 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?v=2" />
|
||||
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="dist/demo.css?v=2">
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>Premium video monitization from
|
||||
<a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" 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>
|
||||
|
||||
<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">
|
||||
<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>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
|
||||
<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>
|
||||
Premium video monitization from
|
||||
<a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" 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>
|
||||
|
||||
<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>
|
||||
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>
|
||||
<div id="container">
|
||||
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
|
||||
<!-- Video files -->
|
||||
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
|
||||
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
|
||||
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
|
||||
<main>
|
||||
<div id="container">
|
||||
<video
|
||||
controls
|
||||
crossorigin
|
||||
playsinline
|
||||
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
|
||||
id="player"
|
||||
>
|
||||
<!-- Video files -->
|
||||
<source
|
||||
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
|
||||
type="video/mp4"
|
||||
size="576"
|
||||
/>
|
||||
<source
|
||||
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
|
||||
type="video/mp4"
|
||||
size="720"
|
||||
/>
|
||||
<source
|
||||
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
|
||||
type="video/mp4"
|
||||
size="1080"
|
||||
/>
|
||||
|
||||
<!-- Caption files -->
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
|
||||
default>
|
||||
<track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
|
||||
<!-- Caption files -->
|
||||
<track
|
||||
kind="captions"
|
||||
label="English"
|
||||
srclang="en"
|
||||
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
|
||||
default
|
||||
/>
|
||||
<track
|
||||
kind="captions"
|
||||
label="Français"
|
||||
srclang="fr"
|
||||
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
|
||||
/>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
|
||||
</video>
|
||||
</div>
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download
|
||||
>Download</a
|
||||
>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<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="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" 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
|
||||
<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="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
|
||||
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/76979871" target="_blank">The New Vimeo Player</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
|
||||
M6,11V5l5,3L6,11z"
|
||||
></path></svg
|
||||
>YouTube
|
||||
</span>
|
||||
</small>
|
||||
</li>
|
||||
<li class="plyr__cite plyr__cite--vimeo" hidden>
|
||||
<small>
|
||||
<a href="https://vimeo.com/76979871" target="_blank">The New Vimeo Player</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>
|
||||
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
|
||||
<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>
|
||||
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,Object.entries,Object.values,URL"
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- Polyfills -->
|
||||
<script
|
||||
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
|
||||
<!-- Plyr core script -->
|
||||
<script src="../dist/plyr.js" crossorigin="anonymous"></script>
|
||||
<!-- Plyr core script -->
|
||||
<script src="../dist/plyr.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Sharing libary (https://shr.one) -->
|
||||
<script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
|
||||
<!-- Sharing libary (https://shr.one) -->
|
||||
<script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></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 crossorigin="anonymous"></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 crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="dist/demo.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- Docs script -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132699580-1"></script>
|
||||
<script src="dist/demo.js" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+6
-18
@@ -279,24 +279,12 @@ import Raven from 'raven-js';
|
||||
|
||||
// Google analytics
|
||||
// For demo site (https://plyr.io) only
|
||||
/* eslint-disable */
|
||||
if (env.prod) {
|
||||
((i, s, o, g, r, a, m) => {
|
||||
i.GoogleAnalyticsObject = r;
|
||||
i[r] =
|
||||
i[r] ||
|
||||
function() {
|
||||
(i[r].q = i[r].q || []).push(arguments);
|
||||
};
|
||||
i[r].l = 1 * new Date();
|
||||
a = s.createElement(o);
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m);
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
window.ga('create', 'UA-40881672-11', 'auto');
|
||||
window.ga('send', 'pageview');
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
const gtag = (...args) => {
|
||||
window.dataLayer.push(args);
|
||||
};
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-132699580-1');
|
||||
}
|
||||
/* eslint-enable */
|
||||
})();
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-light;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
|
||||
url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -33,7 +34,8 @@
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
|
||||
url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@@ -41,5 +43,6 @@
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-black;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
|
||||
url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
|
||||
}
|
||||
|
||||
@@ -11,6 +11,9 @@ $plyr-font-size-small: 12px;
|
||||
$plyr-font-size-time: 11px;
|
||||
$plyr-font-size-badges: 9px;
|
||||
|
||||
// Other
|
||||
$plyr-font-smoothing: true;
|
||||
|
||||
// Captions
|
||||
$plyr-font-size-captions-base: $plyr-font-size-base;
|
||||
$plyr-font-size-captions-small: $plyr-font-size-small;
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+108
-53
@@ -570,15 +570,12 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
} // Element matches selector
|
||||
|
||||
function matches(element, selector) {
|
||||
var prototype = {
|
||||
Element: Element
|
||||
};
|
||||
|
||||
function match() {
|
||||
return Array.from(document.querySelectorAll(selector)).includes(this);
|
||||
}
|
||||
|
||||
var matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
|
||||
var matches = match;
|
||||
return matches.call(element, selector);
|
||||
} // Find all elements
|
||||
|
||||
@@ -634,7 +631,9 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
} // Set regular focus
|
||||
|
||||
|
||||
element.focus(); // If we want to mimic keyboard focus via tab
|
||||
element.focus({
|
||||
preventScroll: true
|
||||
}); // If we want to mimic keyboard focus via tab
|
||||
|
||||
if (tabFocus) {
|
||||
toggleClass(element, this.config.classNames.tabFocus);
|
||||
@@ -705,9 +704,25 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
};
|
||||
},
|
||||
// Picture-in-picture support
|
||||
// Safari only currently
|
||||
// Safari & Chrome only currently
|
||||
pip: function () {
|
||||
return !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode);
|
||||
if (browser.isIPhone) {
|
||||
return false;
|
||||
} // Safari
|
||||
// https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
|
||||
|
||||
|
||||
if (is.function(createElement('video').webkitSetPresentationMode)) {
|
||||
return true;
|
||||
} // Chrome
|
||||
// https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
|
||||
|
||||
|
||||
if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}(),
|
||||
// Airplay support
|
||||
// Safari only currently
|
||||
@@ -723,26 +738,20 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
_inputType$split2 = _slicedToArray(_inputType$split, 1),
|
||||
mediaType = _inputType$split2[0];
|
||||
|
||||
var type = inputType; // Verify we're using HTML5 and there's no media type mismatch
|
||||
|
||||
if (!this.isHTML5 || mediaType !== this.type) {
|
||||
return false;
|
||||
}
|
||||
} // Add codec if required
|
||||
|
||||
var type;
|
||||
|
||||
if (inputType && inputType.includes('codecs=')) {
|
||||
// Use input directly
|
||||
type = inputType;
|
||||
} else if (inputType === 'audio/mpeg') {
|
||||
// Skip codec
|
||||
type = 'audio/mpeg;';
|
||||
} else if (inputType in defaultCodecs) {
|
||||
// Use codec
|
||||
type = "".concat(inputType, "; codecs=\"").concat(defaultCodecs[inputType], "\"");
|
||||
if (Object.keys(defaultCodecs).includes(type)) {
|
||||
type += "; codecs=\"".concat(defaultCodecs[inputType], "\"");
|
||||
}
|
||||
|
||||
try {
|
||||
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
|
||||
} catch (err) {
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
@@ -840,10 +849,6 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
triggerEvent.call(player, player.media, 'qualitychange', false, {
|
||||
quality: input
|
||||
}); // Save to storage
|
||||
|
||||
player.storage.set({
|
||||
quality: input
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -2617,7 +2622,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
var update = true; // If function, run it and use output
|
||||
|
||||
if (is.function(this.config.controls)) {
|
||||
this.config.controls = this.config.controls.call(this.props);
|
||||
this.config.controls = this.config.controls.call(this, props);
|
||||
} // Convert falsy controls to empty array (primarily for empty strings)
|
||||
|
||||
|
||||
@@ -3180,7 +3185,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
// Quality default
|
||||
@@ -3444,6 +3449,14 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr states
|
||||
// ==========================================================================
|
||||
var pip = {
|
||||
active: 'picture-in-picture',
|
||||
inactive: 'inline'
|
||||
};
|
||||
|
||||
// ==========================================================================
|
||||
// Plyr supported types and providers
|
||||
// ==========================================================================
|
||||
@@ -4295,7 +4308,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}); // Check for audio tracks on load
|
||||
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
|
||||
|
||||
on.call(player, player.media, 'canplay', function () {
|
||||
on.call(player, player.media, 'canplay loadeddata', function () {
|
||||
toggleHidden(elements.volume, !player.hasAudio);
|
||||
toggleHidden(elements.buttons.mute, !player.hasAudio);
|
||||
}); // Handle the media finishing
|
||||
@@ -4690,9 +4703,7 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
var loadjs_umd = createCommonjsModule(function (module, exports) {
|
||||
(function(root, factory) {
|
||||
if (typeof undefined === 'function' && undefined.amd) {
|
||||
undefined([], factory);
|
||||
} else {
|
||||
{
|
||||
module.exports = factory();
|
||||
}
|
||||
}(commonjsGlobal, function() {
|
||||
@@ -4834,8 +4845,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
if (!e.sheet.cssText.length) result = 'e';
|
||||
} catch (x) {
|
||||
// sheets objects created from load errors don't allow access to
|
||||
// `cssText`
|
||||
result = 'e';
|
||||
// `cssText` (unless error is Code:18 SecurityError)
|
||||
if (x.code != 18) result = 'e';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5049,12 +5060,13 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
// Set aspect ratio
|
||||
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
|
||||
setAspectRatio: function setAspectRatio(input) {
|
||||
var _split = (is.string(input) ? input : this.config.ratio).split(':'),
|
||||
_split2 = _slicedToArray(_split, 2),
|
||||
x = _split2[0],
|
||||
y = _split2[1];
|
||||
var _split$map = (is.string(input) ? input : this.config.ratio).split(':').map(Number),
|
||||
_split$map2 = _slicedToArray(_split$map, 2),
|
||||
x = _split$map2[0],
|
||||
y = _split$map2[1];
|
||||
|
||||
var padding = 100 / x * y;
|
||||
vimeo.padding = padding;
|
||||
this.elements.wrapper.style.paddingBottom = "".concat(padding, "%");
|
||||
|
||||
if (this.supported.ui) {
|
||||
@@ -5258,8 +5270,8 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}); // Set aspect ratio based on video size
|
||||
|
||||
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(function (dimensions) {
|
||||
var ratio = getAspectRatio(dimensions[0], dimensions[1]);
|
||||
vimeo.setAspectRatio.call(_this2, ratio);
|
||||
vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
|
||||
vimeo.setAspectRatio.call(_this2, vimeo.ratio);
|
||||
}); // Set autopause
|
||||
|
||||
player.embed.setAutopause(player.config.autopause).then(function (state) {
|
||||
@@ -5350,6 +5362,24 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
player.embed.on('error', function (detail) {
|
||||
player.media.error = detail;
|
||||
triggerEvent.call(player, player.media, 'error');
|
||||
}); // Set height/width on fullscreen
|
||||
|
||||
player.on('enterfullscreen exitfullscreen', function (event) {
|
||||
var target = player.fullscreen.target; // Ignore for iOS native
|
||||
|
||||
if (target !== player.elements.container) {
|
||||
return;
|
||||
}
|
||||
|
||||
var toggle = event.type === 'enterfullscreen';
|
||||
|
||||
var _vimeo$ratio$split$ma = vimeo.ratio.split(':').map(Number),
|
||||
_vimeo$ratio$split$ma2 = _slicedToArray(_vimeo$ratio$split$ma, 2),
|
||||
x = _vimeo$ratio$split$ma2[0],
|
||||
y = _vimeo$ratio$split$ma2[1];
|
||||
|
||||
var dimension = x > y ? 'width' : 'height';
|
||||
target.style[dimension] = toggle ? "".concat(vimeo.padding, "%") : null;
|
||||
}); // Rebuild UI
|
||||
|
||||
setTimeout(function () {
|
||||
@@ -6527,18 +6557,20 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
|
||||
if (_this2.isHTML5) {
|
||||
// Setup captions
|
||||
if ('tracks' in input) {
|
||||
if (Object.keys(input).includes('tracks')) {
|
||||
source.insertElements.call(_this2, 'track', input.tracks);
|
||||
} // Load HTML5 sources
|
||||
|
||||
|
||||
_this2.media.load();
|
||||
}
|
||||
} // If HTML5 or embed but not fully supported, setupInterface and call ready now
|
||||
|
||||
|
||||
if (_this2.isHTML5 || _this2.isEmbed && !_this2.supported.ui) {
|
||||
// Setup interface
|
||||
ui.build.call(_this2);
|
||||
}
|
||||
|
||||
if (_this2.isHTML5) {
|
||||
// Load HTML5 sources
|
||||
_this2.media.load();
|
||||
} // Update the fullscreen support
|
||||
|
||||
|
||||
@@ -7429,17 +7461,26 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}
|
||||
|
||||
var quality = [!is.empty(input) && Number(input), this.storage.get('quality'), config.selected, config.default].find(is.number);
|
||||
var updateStorage = true;
|
||||
|
||||
if (!options.includes(quality)) {
|
||||
var value = closest(options, quality);
|
||||
this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
|
||||
quality = value;
|
||||
quality = value; // Don't update storage if quality is not supported
|
||||
|
||||
updateStorage = false;
|
||||
} // Update config
|
||||
|
||||
|
||||
config.selected = quality; // Set quality
|
||||
|
||||
this.media.quality = quality;
|
||||
this.media.quality = quality; // Save to storage
|
||||
|
||||
if (updateStorage) {
|
||||
this.storage.set({
|
||||
quality: quality
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Get current quality level
|
||||
@@ -7618,19 +7659,27 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
}, {
|
||||
key: "pip",
|
||||
set: function set(input) {
|
||||
var states = {
|
||||
pip: 'picture-in-picture',
|
||||
inline: 'inline'
|
||||
}; // Bail if no support
|
||||
|
||||
// Bail if no support
|
||||
if (!support.pip) {
|
||||
return;
|
||||
} // Toggle based on current state if not passed
|
||||
|
||||
|
||||
var toggle = is.boolean(input) ? input : this.pip === states.inline; // Toggle based on current state
|
||||
var toggle = is.boolean(input) ? input : !this.pip; // Toggle based on current state
|
||||
// Safari
|
||||
|
||||
this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
|
||||
if (is.function(this.media.webkitSetPresentationMode)) {
|
||||
this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
|
||||
} // Chrome
|
||||
|
||||
|
||||
if (is.function(this.media.requestPictureInPicture)) {
|
||||
if (!this.pip && toggle) {
|
||||
this.media.requestPictureInPicture();
|
||||
} else if (this.pip && !toggle) {
|
||||
document.exitPictureInPicture();
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Get the current picture-in-picture state
|
||||
@@ -7639,9 +7688,15 @@ typeof navigator === "object" && (function (global, factory) {
|
||||
get: function get() {
|
||||
if (!support.pip) {
|
||||
return null;
|
||||
}
|
||||
} // Safari
|
||||
|
||||
return this.media.webkitPresentationMode;
|
||||
|
||||
if (!is.empty(this.media.webkitPresentationMode)) {
|
||||
return this.media.webkitPresentationMode === pip.active;
|
||||
} // Chrome
|
||||
|
||||
|
||||
return this.media === document.pictureInPictureElement;
|
||||
}
|
||||
}], [{
|
||||
key: "supported",
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+640
-169
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.4 KiB |
+25
-21
@@ -12,7 +12,6 @@ const concat = require('gulp-concat');
|
||||
const filter = require('gulp-filter');
|
||||
const sass = require('gulp-sass');
|
||||
const cleancss = require('gulp-clean-css');
|
||||
const run = require('run-sequence');
|
||||
const header = require('gulp-header');
|
||||
const prefix = require('gulp-autoprefixer');
|
||||
const gitbranch = require('git-branch');
|
||||
@@ -106,13 +105,15 @@ const babelrc = (polyfill = false) => ({
|
||||
});
|
||||
|
||||
// Clean out /dist
|
||||
gulp.task('clean', () => {
|
||||
gulp.task('clean', done => {
|
||||
const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
|
||||
|
||||
// Don't delete the mp4
|
||||
dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
|
||||
|
||||
del(dirs);
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
const build = {
|
||||
@@ -201,31 +202,25 @@ build.sass(bundles.demo.sass, 'demo');
|
||||
build.js(bundles.demo.js, 'demo', { format: 'iife' });
|
||||
|
||||
// Build all JS
|
||||
gulp.task('js', () => {
|
||||
run(tasks.js);
|
||||
});
|
||||
gulp.task('js', () => gulp.parallel(tasks.js));
|
||||
|
||||
// Watch for file changes
|
||||
gulp.task('watch', () => {
|
||||
// Plyr core
|
||||
gulp.watch(paths.plyr.src.js, tasks.js);
|
||||
gulp.watch(paths.plyr.src.sass, tasks.sass);
|
||||
gulp.watch(paths.plyr.src.sprite, tasks.sprite);
|
||||
gulp.watch(paths.plyr.src.js, gulp.parallel(tasks.js));
|
||||
gulp.watch(paths.plyr.src.sass, gulp.parallel(tasks.sass));
|
||||
gulp.watch(paths.plyr.src.sprite, gulp.parallel(tasks.sprite));
|
||||
|
||||
// Demo
|
||||
gulp.watch(paths.demo.src.js, tasks.js);
|
||||
gulp.watch(paths.demo.src.sass, tasks.sass);
|
||||
gulp.watch(paths.demo.src.js, gulp.parallel(tasks.js));
|
||||
gulp.watch(paths.demo.src.sass, gulp.parallel(tasks.sass));
|
||||
});
|
||||
|
||||
// Build distribution
|
||||
gulp.task('build', () => {
|
||||
run(tasks.clean, tasks.js, tasks.sass, tasks.sprite);
|
||||
});
|
||||
gulp.task('build', gulp.series(tasks.clean, gulp.parallel(tasks.js, tasks.sass, tasks.sprite)));
|
||||
|
||||
// Default gulp task
|
||||
gulp.task('default', () => {
|
||||
run('build', 'watch');
|
||||
});
|
||||
gulp.task('default', gulp.series('build', 'watch'));
|
||||
|
||||
// Publish a version to CDN and demo
|
||||
// --------------------------------------------
|
||||
@@ -308,13 +303,13 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
|
||||
console.log(`Updating versions to '${version}'...`);
|
||||
|
||||
// Replace versioned URLs in source
|
||||
const files = ['plyr.js', 'plyr.polyfilled.js', 'defaults.js'];
|
||||
const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
|
||||
|
||||
return gulp
|
||||
.src(files.map(file => path.join(root, `src/js/${file}`)))
|
||||
.src(files.map(file => path.join(root, `src/js/${file}`)), { base: '.' })
|
||||
.pipe(replace(semver, `v${version}`))
|
||||
.pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
|
||||
.pipe(gulp.dest(path.join(root, 'src/js/')));
|
||||
.pipe(gulp.dest('./'));
|
||||
});
|
||||
|
||||
// Publish version to CDN bucket
|
||||
@@ -452,7 +447,16 @@ if (Object.keys(credentials).includes('aws') && Object.keys(credentials).include
|
||||
});
|
||||
|
||||
// Do everything
|
||||
gulp.task('deploy', () =>
|
||||
run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'purge', 'demo', 'open'),
|
||||
gulp.task(
|
||||
'deploy',
|
||||
gulp.series(
|
||||
'version',
|
||||
tasks.clean,
|
||||
gulp.parallel(tasks.js, tasks.sass, tasks.sprite),
|
||||
'cdn',
|
||||
'demo',
|
||||
'purge',
|
||||
'open',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
+11
-12
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "3.4.5",
|
||||
"version": "3.4.8",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "https://plyr.io",
|
||||
"author": "Sam Potts <sam@potts.es>",
|
||||
@@ -35,19 +35,19 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.3",
|
||||
"@babel/core": "^7.1.5",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"@babel/preset-env": "^7.1.0",
|
||||
"@babel/preset-env": "^7.1.5",
|
||||
"del": "^3.0.0",
|
||||
"eslint": "^5.7.0",
|
||||
"eslint": "^5.8.0",
|
||||
"eslint-config-airbnb-base": "^13.1.0",
|
||||
"eslint-config-prettier": "^3.1.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"fastly-purge": "^1.0.1",
|
||||
"git-branch": "^2.0.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-autoprefixer": "^6.0.0",
|
||||
"gulp-better-rollup": "^3.3.0",
|
||||
"gulp-better-rollup": "^3.4.0",
|
||||
"gulp-clean-css": "^3.10.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-filter": "^5.1.0",
|
||||
@@ -64,23 +64,22 @@
|
||||
"gulp-svgstore": "^7.0.0",
|
||||
"gulp-uglify-es": "^1.0.4",
|
||||
"gulp-util": "^3.0.8",
|
||||
"postcss-custom-properties": "^8.0.8",
|
||||
"postcss-custom-properties": "^8.0.9",
|
||||
"prettier-eslint": "^8.8.2",
|
||||
"prettier-stylelint": "^0.4.2",
|
||||
"remark-cli": "^5.0.0",
|
||||
"remark-cli": "^6.0.0",
|
||||
"remark-validate-links": "^7.1.0",
|
||||
"rollup-plugin-babel": "^4.0.3",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-node-resolve": "^3.4.0",
|
||||
"run-sequence": "^2.2.1",
|
||||
"stylelint": "^9.6.0",
|
||||
"stylelint": "^9.7.1",
|
||||
"stylelint-config-prettier": "^4.0.0",
|
||||
"stylelint-config-recommended": "^2.1.0",
|
||||
"stylelint-config-sass-guidelines": "^5.2.0",
|
||||
"stylelint-order": "^1.0.0",
|
||||
"stylelint-scss": "^3.3.2",
|
||||
"stylelint-scss": "^3.4.0",
|
||||
"stylelint-selector-bem-pattern": "^2.0.0",
|
||||
"through2": "^2.0.3"
|
||||
"through2": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.5.7",
|
||||
|
||||
@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
|
||||
You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.4.5/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.4.8/plyr.js"></script>
|
||||
```
|
||||
|
||||
...or...
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.4.5/plyr.polyfilled.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.4.8/plyr.polyfilled.js"></script>
|
||||
```
|
||||
|
||||
### CSS
|
||||
@@ -152,13 +152,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:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.5/plyr.css">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.4.8/plyr.css">
|
||||
```
|
||||
|
||||
### 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
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.5/plyr.svg`.
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.8/plyr.svg`.
|
||||
|
||||
## Ads
|
||||
|
||||
@@ -417,7 +417,7 @@ player.fullscreen.active; // false;
|
||||
| `language` | ✓ | ✓ | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
|
||||
| `fullscreen.active` | ✓ | - | Returns a boolean indicating if the current player is in fullscreen mode. |
|
||||
| `fullscreen.enabled` | ✓ | - | Returns a boolean indicating if the current player has fullscreen enabled. |
|
||||
| `pip` | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+. |
|
||||
| `pip`² | ✓ | ✓ | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+. |
|
||||
|
||||
1. YouTube only. HTML5 will follow.
|
||||
2. HTML5 only
|
||||
@@ -714,6 +714,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
|
||||
- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
|
||||
- [Oscar Radio](http://oscar-radio.xyz/)
|
||||
- [Sparkk TV](https://www.sparkktv.com/)
|
||||
- [@halfhalftravel](https://www.halfhalftravel.com/)
|
||||
|
||||
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
|
||||
|
||||
|
||||
@@ -60,7 +60,7 @@ const defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.3.12/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
// ==========================================================================
|
||||
// Plyr states
|
||||
// ==========================================================================
|
||||
|
||||
export const pip = {
|
||||
active: 'picture-in-picture',
|
||||
inactive: 'inline',
|
||||
};
|
||||
|
||||
export default { pip };
|
||||
Vendored
+1
-1
@@ -1587,7 +1587,7 @@ const controls = {
|
||||
|
||||
// If function, run it and use output
|
||||
if (is.function(this.config.controls)) {
|
||||
this.config.controls = this.config.controls.call(this.props);
|
||||
this.config.controls = this.config.controls.call(this, props);
|
||||
}
|
||||
|
||||
// Convert falsy controls to empty array (primarily for empty strings)
|
||||
|
||||
@@ -82,9 +82,6 @@ const html5 = {
|
||||
triggerEvent.call(player, player.media, 'qualitychange', false, {
|
||||
quality: input,
|
||||
});
|
||||
|
||||
// Save to storage
|
||||
player.storage.set({ quality: input });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
+1
-1
@@ -317,7 +317,7 @@ class Listeners {
|
||||
|
||||
// Check for audio tracks on load
|
||||
// We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point
|
||||
on.call(player, player.media, 'canplay', () => {
|
||||
on.call(player, player.media, 'canplay loadeddata', () => {
|
||||
toggleHidden(elements.volume, !player.hasAudio);
|
||||
toggleHidden(elements.buttons.mute, !player.hasAudio);
|
||||
});
|
||||
|
||||
+20
-3
@@ -70,8 +70,9 @@ const vimeo = {
|
||||
// Set aspect ratio
|
||||
// For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
|
||||
setAspectRatio(input) {
|
||||
const [x, y] = (is.string(input) ? input : this.config.ratio).split(':');
|
||||
const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number);
|
||||
const padding = (100 / x) * y;
|
||||
vimeo.padding = padding;
|
||||
this.elements.wrapper.style.paddingBottom = `${padding}%`;
|
||||
|
||||
if (this.supported.ui) {
|
||||
@@ -299,8 +300,8 @@ const vimeo = {
|
||||
|
||||
// Set aspect ratio based on video size
|
||||
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
|
||||
const ratio = getAspectRatio(dimensions[0], dimensions[1]);
|
||||
vimeo.setAspectRatio.call(this, ratio);
|
||||
vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]);
|
||||
vimeo.setAspectRatio.call(this, vimeo.ratio);
|
||||
});
|
||||
|
||||
// Set autopause
|
||||
@@ -404,6 +405,22 @@ const vimeo = {
|
||||
triggerEvent.call(player, player.media, 'error');
|
||||
});
|
||||
|
||||
// Set height/width on fullscreen
|
||||
player.on('enterfullscreen exitfullscreen', event => {
|
||||
const { target } = player.fullscreen;
|
||||
|
||||
// Ignore for iOS native
|
||||
if (target !== player.elements.container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggle = event.type === 'enterfullscreen';
|
||||
const [x, y] = vimeo.ratio.split(':').map(Number);
|
||||
const dimension = x > y ? 'width' : 'height';
|
||||
|
||||
target.style[dimension] = toggle ? `${vimeo.padding}%` : null;
|
||||
});
|
||||
|
||||
// Rebuild UI
|
||||
setTimeout(() => ui.build.call(player), 0);
|
||||
},
|
||||
|
||||
+33
-9
@@ -1,12 +1,13 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.4.5
|
||||
// plyr.js v3.4.8
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
import captions from './captions';
|
||||
import defaults from './config/defaults';
|
||||
import { pip } from './config/states';
|
||||
import { getProviderByUrl, providers, types } from './config/types';
|
||||
import Console from './console';
|
||||
import controls from './controls';
|
||||
@@ -695,10 +696,15 @@ class Plyr {
|
||||
config.default,
|
||||
].find(is.number);
|
||||
|
||||
let updateStorage = true;
|
||||
|
||||
if (!options.includes(quality)) {
|
||||
const value = closest(options, quality);
|
||||
this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
|
||||
quality = value;
|
||||
|
||||
// Don't update storage if quality is not supported
|
||||
updateStorage = false;
|
||||
}
|
||||
|
||||
// Update config
|
||||
@@ -706,6 +712,11 @@ class Plyr {
|
||||
|
||||
// Set quality
|
||||
this.media.quality = quality;
|
||||
|
||||
// Save to storage
|
||||
if (updateStorage) {
|
||||
this.storage.set({ quality });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -886,21 +897,28 @@ class Plyr {
|
||||
* TODO: detect outside changes
|
||||
*/
|
||||
set pip(input) {
|
||||
const states = {
|
||||
pip: 'picture-in-picture',
|
||||
inline: 'inline',
|
||||
};
|
||||
|
||||
// Bail if no support
|
||||
if (!support.pip) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle based on current state if not passed
|
||||
const toggle = is.boolean(input) ? input : this.pip === states.inline;
|
||||
const toggle = is.boolean(input) ? input : !this.pip;
|
||||
|
||||
// Toggle based on current state
|
||||
this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
|
||||
// Safari
|
||||
if (is.function(this.media.webkitSetPresentationMode)) {
|
||||
this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
|
||||
}
|
||||
|
||||
// Chrome
|
||||
if (is.function(this.media.requestPictureInPicture)) {
|
||||
if (!this.pip && toggle) {
|
||||
this.media.requestPictureInPicture();
|
||||
} else if (this.pip && !toggle) {
|
||||
document.exitPictureInPicture();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -911,7 +929,13 @@ class Plyr {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.media.webkitPresentationMode;
|
||||
// Safari
|
||||
if (!is.empty(this.media.webkitPresentationMode)) {
|
||||
return this.media.webkitPresentationMode === pip.active;
|
||||
}
|
||||
|
||||
// Chrome
|
||||
return this.media === document.pictureInPictureElement;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.4.5
|
||||
// plyr.js v3.4.8
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
+6
-4
@@ -114,12 +114,9 @@ const source = {
|
||||
// HTML5 stuff
|
||||
if (this.isHTML5) {
|
||||
// Setup captions
|
||||
if ('tracks' in input) {
|
||||
if (Object.keys(input).includes('tracks')) {
|
||||
source.insertElements.call(this, 'track', input.tracks);
|
||||
}
|
||||
|
||||
// Load HTML5 sources
|
||||
this.media.load();
|
||||
}
|
||||
|
||||
// If HTML5 or embed but not fully supported, setupInterface and call ready now
|
||||
@@ -128,6 +125,11 @@ const source = {
|
||||
ui.build.call(this);
|
||||
}
|
||||
|
||||
if (this.isHTML5) {
|
||||
// Load HTML5 sources
|
||||
this.media.load();
|
||||
}
|
||||
|
||||
// Update the fullscreen support
|
||||
this.fullscreen.update();
|
||||
},
|
||||
|
||||
+27
-13
@@ -36,8 +36,26 @@ const support = {
|
||||
},
|
||||
|
||||
// Picture-in-picture support
|
||||
// Safari only currently
|
||||
pip: (() => !browser.isIPhone && is.function(createElement('video').webkitSetPresentationMode))(),
|
||||
// Safari & Chrome only currently
|
||||
pip: (() => {
|
||||
if (browser.isIPhone) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Safari
|
||||
// https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
|
||||
if (is.function(createElement('video').webkitSetPresentationMode)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Chrome
|
||||
// https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
|
||||
if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
})(),
|
||||
|
||||
// Airplay support
|
||||
// Safari only currently
|
||||
@@ -52,25 +70,21 @@ const support = {
|
||||
// Related: http://www.leanbackplayer.com/test/h5mt.html
|
||||
mime(inputType) {
|
||||
const [mediaType] = inputType.split('/');
|
||||
let type = inputType;
|
||||
|
||||
// Verify we're using HTML5 and there's no media type mismatch
|
||||
if (!this.isHTML5 || mediaType !== this.type) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let type;
|
||||
if (inputType && inputType.includes('codecs=')) {
|
||||
// Use input directly
|
||||
type = inputType;
|
||||
} else if (inputType === 'audio/mpeg') {
|
||||
// Skip codec
|
||||
type = 'audio/mpeg;';
|
||||
} else if (inputType in defaultCodecs) {
|
||||
// Use codec
|
||||
type = `${inputType}; codecs="${defaultCodecs[inputType]}"`;
|
||||
// Add codec if required
|
||||
if (Object.keys(defaultCodecs).includes(type)) {
|
||||
type += `; codecs="${defaultCodecs[inputType]}"`;
|
||||
}
|
||||
|
||||
try {
|
||||
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
|
||||
} catch (err) {
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
@@ -293,7 +293,7 @@ export function setFocus(element = null, tabFocus = false) {
|
||||
}
|
||||
|
||||
// Set regular focus
|
||||
element.focus();
|
||||
element.focus({ preventScroll: true });
|
||||
|
||||
// If we want to mimic keyboard focus via tab
|
||||
if (tabFocus) {
|
||||
|
||||
@@ -12,7 +12,7 @@ $plyr-range-thumb-border: 2px solid transparent !default;
|
||||
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
|
||||
|
||||
// Track
|
||||
$plyr-range-track-height: 6px !default;
|
||||
$plyr-range-track-height: 4px !default;
|
||||
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
|
||||
|
||||
// Fill
|
||||
|
||||
@@ -17,4 +17,4 @@ $plyr-font-weight-bold: 600 !default;
|
||||
|
||||
$plyr-line-height: 1.7 !default;
|
||||
|
||||
$plyr-font-smoothing: true !default;
|
||||
$plyr-font-smoothing: false !default;
|
||||
|
||||
Reference in New Issue
Block a user