Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5dc0d84300 | |||
| ec8923ef08 | |||
| 5a414572f9 | |||
| 7f40307b0a | |||
| a12485d10f | |||
| 4695bbf483 | |||
| 20ee77a55e | |||
| 78a0ac8674 |
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.css
vendored
2
docs/dist/docs.css
vendored
File diff suppressed because one or more lines are too long
@ -6,7 +6,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="//cdn.plyr.io/1.2.0/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.2.1/docs.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
@ -8,10 +8,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<!-- Styles -->
|
<!-- Styles -->
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/plyr.css?1">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/plyr.css?1">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/docs.css?2">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/docs.css?3">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -92,18 +92,18 @@
|
|||||||
a.send();
|
a.send();
|
||||||
a.onload = function(){
|
a.onload = function(){
|
||||||
var c = d.createElement("div");
|
var c = d.createElement("div");
|
||||||
c.style.display="none";
|
c.setAttribute("hidden", "");
|
||||||
c.innerHTML = a.responseText;
|
c.innerHTML = a.responseText;
|
||||||
b.insertBefore(c, b.childNodes[0]);
|
b.insertBefore(c, b.childNodes[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})(document, "https://cdn.plyr.io/1.2.0/sprite.svg");
|
})(document, "https://cdn.plyr.io/1.2.1/sprite.svg");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="https://cdn.plyr.io/1.2.0/plyr.js?1"></script>
|
<script src="https://cdn.plyr.io/1.2.1/plyr.js?1"></script>
|
||||||
|
|
||||||
<!-- Docs script -->
|
<!-- Docs script -->
|
||||||
<script src="https://cdn.plyr.io/1.2.0/docs.js?1"></script>
|
<script src="https://cdn.plyr.io/1.2.1/docs.js?1"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -8,13 +8,19 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hidden
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
// Base
|
// Base
|
||||||
html {
|
html {
|
||||||
|
height: 100%;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
background: linear-gradient(#fff, @body-background);
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
background: @body-background;
|
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: @gray;
|
color: @gray;
|
||||||
|
|||||||
@ -123,7 +123,7 @@ nav {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
padding: ((@padding-base / 2) - 1px);
|
padding: ((@padding-base / 2) - 1px);
|
||||||
background: @body-background;
|
background: #fff;
|
||||||
border: 1px solid @gray-light;
|
border: 1px solid @gray-light;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "1.2.0",
|
"version": "1.2.1",
|
||||||
"description": "A simple HTML5 media player using custom controls",
|
"description": "A simple HTML5 media player using custom controls",
|
||||||
"homepage": "http://plyr.io",
|
"homepage": "http://plyr.io",
|
||||||
"main": "gulpfile.js",
|
"main": "gulpfile.js",
|
||||||
|
|||||||
14
readme.md
14
readme.md
@ -3,10 +3,10 @@ A simple, accessible HTML5 media player.
|
|||||||
|
|
||||||
[Checkout the demo](http://plyr.io)
|
[Checkout the demo](http://plyr.io)
|
||||||
|
|
||||||
[](http://plyr.io)
|
[](http://plyr.io)
|
||||||
|
|
||||||
## Why?
|
## Why?
|
||||||
We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
|
We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
- **Accessible** - full support for captions and screen readers.
|
- **Accessible** - full support for captions and screen readers.
|
||||||
@ -15,7 +15,7 @@ We wanted a lightweight, accessible and customisable media player that just supp
|
|||||||
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
|
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
|
||||||
- **Responsive** - as you'd expect these days.
|
- **Responsive** - as you'd expect these days.
|
||||||
- **Audio & Video** - support for both formats.
|
- **Audio & Video** - support for both formats.
|
||||||
- **[Embed](#embed)** - support for YouTube (Vimeo soon).
|
- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
|
||||||
- **[API](#api)** - toggle playback, volume, seeking, and more.
|
- **[API](#api)** - toggle playback, volume, seeking, and more.
|
||||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
||||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||||
@ -39,7 +39,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
|||||||
|
|
||||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||||
|
|
||||||
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.2.0/plyr.js` to `https://cdn.plyr.io/1.2.0/plyr.js`
|
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.2.1/plyr.js` to `https://cdn.plyr.io/1.2.1/plyr.js`
|
||||||
|
|
||||||
### Bower
|
### Bower
|
||||||
If bower is your thang, you can grab Plyr using:
|
If bower is your thang, you can grab Plyr using:
|
||||||
@ -59,11 +59,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
|
|||||||
If you want to use our CDN, you can use the following:
|
If you want to use our CDN, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/plyr.css">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/plyr.css">
|
||||||
<script src="https://cdn.plyr.io/1.2.0/plyr.js"></script>
|
<script src="https://cdn.plyr.io/1.2.1/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.0/sprite.svg`.
|
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.1/sprite.svg`.
|
||||||
|
|
||||||
### CSS
|
### CSS
|
||||||
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
|
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v1.2.0
|
// plyr.js v1.2.1
|
||||||
// https://github.com/selz/plyr
|
// https://github.com/selz/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|||||||
@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
@tooltip-bg: @controls-bg;
|
@tooltip-bg: @controls-bg;
|
||||||
@tooltip-color: #fff;
|
@tooltip-color: @control-color;
|
||||||
@tooltip-padding: @control-spacing;
|
@tooltip-padding: @control-spacing;
|
||||||
@tooltip-arrow-size: 5px;
|
@tooltip-arrow-size: 5px;
|
||||||
@tooltip-radius: 3px;
|
@tooltip-radius: 3px;
|
||||||
@ -331,8 +331,9 @@
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
transform: translate(-50%, (@tooltip-padding * 3));
|
transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
|
||||||
transition: transform .2s .2s ease, opacity .2s .2s ease;
|
transform-origin: 50% 100%;
|
||||||
|
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -355,7 +356,7 @@
|
|||||||
button:focus .player-tooltip {
|
button:focus .player-tooltip {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0) scale(1);
|
||||||
}
|
}
|
||||||
label:hover .player-tooltip,
|
label:hover .player-tooltip,
|
||||||
button:hover .player-tooltip {
|
button:hover .player-tooltip {
|
||||||
|
|||||||
@ -28,7 +28,7 @@ $control-bg-hover: @blue !default;
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
$tooltip-bg: $controls-bg !default;
|
$tooltip-bg: $controls-bg !default;
|
||||||
$tooltip-color: #fff !default;
|
$tooltip-color: $control-color !default;
|
||||||
$tooltip-padding: $control-spacing !default;
|
$tooltip-padding: $control-spacing !default;
|
||||||
$tooltip-arrow-size: 5px !default;
|
$tooltip-arrow-size: 5px !default;
|
||||||
$tooltip-radius: 3px !default;
|
$tooltip-radius: 3px !default;
|
||||||
@ -329,8 +329,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
transform: translate(-50%, ($tooltip-padding * 3));
|
transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
|
||||||
transition: transform .2s .2s ease, opacity .2s .2s ease;
|
transform-origin: 50% 100%;
|
||||||
|
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -353,7 +354,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
button:focus .player-tooltip {
|
button:focus .player-tooltip {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0) scale(1);
|
||||||
}
|
}
|
||||||
label:hover .player-tooltip,
|
label:hover .player-tooltip,
|
||||||
button:hover .player-tooltip {
|
button:hover .player-tooltip {
|
||||||
|
|||||||
Reference in New Issue
Block a user