Sam Potts
parent
4dbbbd04cc
commit
df64fdac9e
@ -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.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.1/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.1/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.1/docs.css?4">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/docs.css?4">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -97,13 +97,13 @@
|
||||
b.insertBefore(c, b.childNodes[0]);
|
||||
}
|
||||
}
|
||||
})(document, "https://cdn.plyr.io/1.2.1/sprite.svg");
|
||||
})(document, "https://cdn.plyr.io/1.2.2/sprite.svg");
|
||||
</script>
|
||||
|
||||
<!-- Plyr core script -->
|
||||
<script src="https://cdn.plyr.io/1.2.1/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.1/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
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.2",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
|
||||
@ -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.1/plyr.js` to `https://cdn.plyr.io/1.2.1/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.1/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.2.1/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.1/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.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.2.1
|
||||
// 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();
|
||||
|
||||
@ -351,9 +351,9 @@
|
||||
}
|
||||
}
|
||||
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) scale(1);
|
||||
@ -596,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;
|
||||
@ -614,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -594,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;
|
||||
@ -612,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user