Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| df64fdac9e | |||
| 4dbbbd04cc | |||
| c9c3ee9014 | |||
| 67191c2a75 | |||
| 8ba4522b3e | |||
| 52eaf62b58 | |||
| 8d43f412ac | |||
| e9ea90f527 | |||
| 5dc0d84300 | |||
| ec8923ef08 | |||
| 5a414572f9 | |||
| 7f40307b0a | |||
| a12485d10f | |||
| 4695bbf483 | |||
| 20ee77a55e | |||
| 78a0ac8674 |
@ -17,7 +17,7 @@
|
||||
"dist/plyr.js",
|
||||
"dist/sprite.svg",
|
||||
"src/less/plyr.less",
|
||||
"src/sass/plyr.sass",
|
||||
"src/sass/plyr.scss",
|
||||
"src/js/plyr.js"
|
||||
],
|
||||
"ignore": [
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
# Changelog
|
||||
|
||||
## v1.2.2
|
||||
- Fix for :focus keyboard vs mouse (Fixes #61)
|
||||
- Fix for caption positioning in full screen (Fixes #92)
|
||||
|
||||
## v1.2.1
|
||||
- Tooltip bug fix
|
||||
|
||||
## v1.2.0
|
||||
- Added YouTube support.
|
||||
- Added YouTube support
|
||||
|
||||
## v1.1.13
|
||||
- Added icon prefix option for when using default controls
|
||||
|
||||
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
docs/dist/docs.css
vendored
2
docs/dist/docs.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
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">
|
||||
|
||||
<!-- Docs styles -->
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.2.0/docs.css">
|
||||
<link rel="stylesheet" href="//cdn.plyr.io/1.2.2/docs.css">
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- 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.2/plyr.css?1">
|
||||
|
||||
<!-- 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.2/docs.css?4">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -92,18 +92,18 @@
|
||||
a.send();
|
||||
a.onload = function(){
|
||||
var c = d.createElement("div");
|
||||
c.style.display="none";
|
||||
c.setAttribute("hidden", "");
|
||||
c.innerHTML = a.responseText;
|
||||
b.insertBefore(c, b.childNodes[0]);
|
||||
}
|
||||
}
|
||||
})(document, "https://cdn.plyr.io/1.2.0/sprite.svg");
|
||||
})(document, "https://cdn.plyr.io/1.2.2/sprite.svg");
|
||||
</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.2/plyr.js?1"></script>
|
||||
|
||||
<!-- Docs script -->
|
||||
<script src="https://cdn.plyr.io/1.2.0/docs.js?1"></script>
|
||||
<script src="https://cdn.plyr.io/1.2.2/docs.js?1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,6 +10,7 @@ plyr.setup({
|
||||
volume: 9,
|
||||
title: "Video demo",
|
||||
html: templates.controls.render({}),
|
||||
tooltips: true,
|
||||
captions: {
|
||||
defaultActive: true
|
||||
},
|
||||
|
||||
@ -8,13 +8,19 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Hidden
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Base
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 100%;
|
||||
background: linear-gradient(#fff, @body-background) fixed;
|
||||
}
|
||||
body {
|
||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: @body-background;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
|
||||
@ -123,7 +123,7 @@ nav {
|
||||
position: relative;
|
||||
margin-left: 6px;
|
||||
padding: ((@padding-base / 2) - 1px);
|
||||
background: @body-background;
|
||||
background: #fff;
|
||||
border: 1px solid @gray-light;
|
||||
|
||||
&::before {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.2",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
|
||||
19
readme.md
19
readme.md
@ -3,19 +3,19 @@ A simple, accessible HTML5 media player.
|
||||
|
||||
[Checkout the demo](http://plyr.io)
|
||||
|
||||
[](http://plyr.io)
|
||||
[](http://plyr.io)
|
||||
|
||||
## 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
|
||||
- **Accessible** - full support for captions and screen readers.
|
||||
- **Lightweight** - just 6.4KB minified and gzipped.
|
||||
- **Lightweight** - just 7.5KB minified and gzipped.
|
||||
- **[Customisable](#html)** - make the player look how you want with the markup you want.
|
||||
- **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.
|
||||
- **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.
|
||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
||||
- **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.
|
||||
|
||||
**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.2/plyr.js` to `https://cdn.plyr.io/1.2.2/plyr.js`
|
||||
|
||||
### Bower
|
||||
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:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.2.0/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.2.2/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.2/sprite.svg`.
|
||||
|
||||
### 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.
|
||||
@ -360,6 +360,9 @@ Here's a list of the methods supported:
|
||||
<strong>array</strong><br>
|
||||
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
|
||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||
<br><br>
|
||||
<strong>YouTube</strong><br>
|
||||
Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.2.0
|
||||
// plyr.js v1.2.2
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -59,7 +59,7 @@
|
||||
loading: "loading",
|
||||
tooltip: "player-tooltip",
|
||||
hidden: "sr-only",
|
||||
hover: "hover",
|
||||
hover: "player-hover",
|
||||
captions: {
|
||||
enabled: "captions-enabled",
|
||||
active: "captions-active"
|
||||
@ -1322,7 +1322,7 @@
|
||||
// Show the player controls
|
||||
function _showControls() {
|
||||
// Set shown class
|
||||
_toggleClass(player.controls, config.classes.hover, true);
|
||||
_toggleClass(player.container, config.classes.hover, true);
|
||||
|
||||
// Clear timer every movement
|
||||
window.clearTimeout(hoverTimer);
|
||||
@ -1330,7 +1330,7 @@
|
||||
// If the mouse is not over the controls, set a timeout to hide them
|
||||
if(!isMouseOver) {
|
||||
hoverTimer = window.setTimeout(function() {
|
||||
_toggleClass(player.controls, config.classes.hover, false);
|
||||
_toggleClass(player.container, config.classes.hover, false);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -1675,6 +1675,32 @@
|
||||
// IE doesn't support input event, so we fallback to change
|
||||
var inputEvent = (player.browser.name == "IE" ? "change" : "input");
|
||||
|
||||
// Detect tab focus
|
||||
function checkFocus() {
|
||||
var focused = document.activeElement;
|
||||
if (!focused || focused == document.body) {
|
||||
focused = null;
|
||||
}
|
||||
else if (document.querySelector){
|
||||
focused = document.querySelector(":focus");
|
||||
}
|
||||
for (var button in player.buttons) {
|
||||
var element = player.buttons[button];
|
||||
|
||||
_toggleClass(element, "tab-focus", (element === focused));
|
||||
}
|
||||
}
|
||||
_on(window, "keyup", function(event) {
|
||||
var code = (event.keyCode ? event.keyCode : event.which);
|
||||
if(code == 9) { checkFocus(); }
|
||||
});
|
||||
for (var button in player.buttons) {
|
||||
var element = player.buttons[button];
|
||||
_on(element, "blur", function() {
|
||||
_toggleClass(element, "tab-focus", false);
|
||||
});
|
||||
}
|
||||
|
||||
// Play
|
||||
_on(player.buttons.play, "click", function() {
|
||||
_play();
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
// Tooltips
|
||||
@tooltip-bg: @controls-bg;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-color: @control-color;
|
||||
@tooltip-padding: @control-spacing;
|
||||
@tooltip-arrow-size: 5px;
|
||||
@tooltip-radius: 3px;
|
||||
@ -331,8 +331,9 @@
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
|
||||
transform: translate(-50%, (@tooltip-padding * 3));
|
||||
transition: transform .2s .2s ease, opacity .2s .2s ease;
|
||||
transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@ -350,12 +351,12 @@
|
||||
}
|
||||
}
|
||||
label:hover .player-tooltip,
|
||||
input:focus + label .player-tooltip,
|
||||
input.tab-focus:focus + label .player-tooltip,
|
||||
button:hover .player-tooltip,
|
||||
button:focus .player-tooltip {
|
||||
button.tab-focus:focus .player-tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
label:hover .player-tooltip,
|
||||
button:hover .player-tooltip {
|
||||
@ -595,15 +596,6 @@
|
||||
.player-video-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.player-captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: @bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.player-controls {
|
||||
position: absolute;
|
||||
@ -613,13 +605,29 @@
|
||||
}
|
||||
|
||||
// Hide controls when playing in full screen
|
||||
&.fullscreen-hide-controls.playing .player-controls {
|
||||
transform: translateY(100%) translateY(@control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
|
||||
&.hover {
|
||||
&.fullscreen-hide-controls.playing {
|
||||
.player-controls {
|
||||
transform: translateY(100%) translateY(@control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
&.player-hover .player-controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.player-captions {
|
||||
bottom: (@control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
.player-captions,
|
||||
&.fullscreen-hide-controls.playing.player-hover .player-captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: @bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ $control-bg-hover: @blue !default;
|
||||
|
||||
// Tooltips
|
||||
$tooltip-bg: $controls-bg !default;
|
||||
$tooltip-color: #fff !default;
|
||||
$tooltip-color: $control-color !default;
|
||||
$tooltip-padding: $control-spacing !default;
|
||||
$tooltip-arrow-size: 5px !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;
|
||||
font-weight: 600;
|
||||
|
||||
transform: translate(-50%, ($tooltip-padding * 3));
|
||||
transition: transform .2s .2s ease, opacity .2s .2s ease;
|
||||
transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@ -353,7 +354,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
||||
button:focus .player-tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
label:hover .player-tooltip,
|
||||
button:hover .player-tooltip {
|
||||
@ -593,15 +594,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
||||
.player-video-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.player-captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: $bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.player-controls {
|
||||
position: absolute;
|
||||
@ -611,13 +603,29 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
||||
}
|
||||
|
||||
// Hide controls when playing in full screen
|
||||
&.fullscreen-hide-controls.playing .player-controls {
|
||||
transform: translateY(100%) translateY($control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
|
||||
&.hover {
|
||||
&.fullscreen-hide-controls.playing {
|
||||
.player-controls {
|
||||
transform: translateY(100%) translateY($control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
&.player-hover .player-controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.player-captions {
|
||||
bottom: (@control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
.player-captions,
|
||||
&.fullscreen-hide-controls.playing.player-hover .player-captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: $bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user