Compare commits
12 Commits
Author | SHA1 | Date | |
---|---|---|---|
ddb5ad071e | |||
38060d986c | |||
8c74396459 | |||
a09d63e8f8 | |||
d74af9a73d | |||
60310693d3 | |||
5d08821c9b | |||
3316e40e7b | |||
dfe5985326 | |||
b27ad17c59 | |||
14b8b24e14 | |||
711fc5835f |
@ -1,3 +1,11 @@
|
|||||||
|
### v3.6.5
|
||||||
|
|
||||||
|
- Migrate color formatting to colorette (thanks @jorgebucaran)
|
||||||
|
- Fix: issue with IE detection
|
||||||
|
- Fix: missing styles for embeds
|
||||||
|
- Fix: regression regarding poster image
|
||||||
|
- Add all required props to vimeo iframe allow attribute - fixes #2151 (thanks @didrip)
|
||||||
|
|
||||||
### v3.6.4
|
### v3.6.4
|
||||||
|
|
||||||
- Remove unnecessary calc from media query (thanks @naomiaz)
|
- Remove unnecessary calc from media query (thanks @naomiaz)
|
||||||
|
@ -134,13 +134,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.
|
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
|
```html
|
||||||
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
|
<script src="https://cdn.plyr.io/3.6.5/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
...or...
|
...or...
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.plyr.io/3.6.4/plyr.polyfilled.js"></script>
|
<script src="https://cdn.plyr.io/3.6.5/plyr.polyfilled.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
@ -154,13 +154,13 @@ Include the `plyr.css` stylsheet into your `<head>`.
|
|||||||
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.5/plyr.css" />
|
||||||
```
|
```
|
||||||
|
|
||||||
## SVG Sprite
|
## SVG Sprite
|
||||||
|
|
||||||
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
|
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
|
||||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.4/plyr.svg`.
|
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.5/plyr.svg`.
|
||||||
|
|
||||||
# Ads
|
# Ads
|
||||||
|
|
||||||
@ -839,6 +839,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
|
|||||||
- [Rutheneum-Bote](https://gymnasium-rutheneum.de/content/newspaper/kreativwettbewerb.php)
|
- [Rutheneum-Bote](https://gymnasium-rutheneum.de/content/newspaper/kreativwettbewerb.php)
|
||||||
- [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)
|
- [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)
|
||||||
- [STROLLÿN: Work with a View](https://strollyn.com)
|
- [STROLLÿN: Work with a View](https://strollyn.com)
|
||||||
|
- [CFDA Runway360](https://runway360.cfda.com/)
|
||||||
|
|
||||||
If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
|
If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
|
||||||
|
|
||||||
|
42
package.json
42
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "3.6.4",
|
"version": "3.6.5",
|
||||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||||
"homepage": "https://plyr.io",
|
"homepage": "https://plyr.io",
|
||||||
"author": "Sam Potts <sam@potts.es>",
|
"author": "Sam Potts <sam@potts.es>",
|
||||||
@ -39,17 +39,18 @@
|
|||||||
"start": "gulp"
|
"start": "gulp"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sampotts/eslint-config": "1.1.5",
|
"@sampotts/eslint-config": "1.1.7",
|
||||||
"ansi-colors": "^4.1.1",
|
"autoprefixer": "^10.2.5",
|
||||||
"autoprefixer": "^10.0.2",
|
"aws-sdk": "^2.888.0",
|
||||||
"aws-sdk": "^2.814.0",
|
"@babel/core": "^7.13.15",
|
||||||
"@babel/core": "^7.12.10",
|
"@babel/preset-env": "^7.13.15",
|
||||||
"@babel/preset-env": "^7.12.11",
|
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.12.1",
|
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"browser-sync": "^2.26.13",
|
"browser-sync": "^2.26.14",
|
||||||
|
"colorette": "1.2.2",
|
||||||
|
"cssnano": "^5.0.1",
|
||||||
"del": "^6.0.0",
|
"del": "^6.0.0",
|
||||||
"eslint": "^7.3.1",
|
"eslint": "^7.23.0",
|
||||||
"fancy-log": "^1.3.3",
|
"fancy-log": "^1.3.3",
|
||||||
"fastly-purge": "^1.0.1",
|
"fastly-purge": "^1.0.1",
|
||||||
"git-branch": "^2.0.1",
|
"git-branch": "^2.0.1",
|
||||||
@ -70,29 +71,28 @@
|
|||||||
"gulp-size": "^3.0.0",
|
"gulp-size": "^3.0.0",
|
||||||
"gulp-sourcemaps": "^3.0.0",
|
"gulp-sourcemaps": "^3.0.0",
|
||||||
"gulp-svgstore": "^7.0.1",
|
"gulp-svgstore": "^7.0.1",
|
||||||
"gulp-terser": "^2.0.0",
|
"gulp-terser": "^2.0.1",
|
||||||
"postcss": "^8.1.7",
|
"postcss": "^8.2.10",
|
||||||
"postcss-clean": "^1.1.0",
|
"postcss-custom-properties": "^11.0.0",
|
||||||
"postcss-custom-properties": "^10.0.0",
|
|
||||||
"prettier-eslint": "^12.0.0",
|
"prettier-eslint": "^12.0.0",
|
||||||
"prettier-stylelint": "^0.4.2",
|
"prettier-stylelint": "^0.4.2",
|
||||||
"remark-cli": "^9.0.0",
|
"remark-cli": "^9.0.0",
|
||||||
"remark-validate-links": "^10.0.2",
|
"remark-validate-links": "^10.0.4",
|
||||||
"rollup": "^2.35.1",
|
"rollup": "^2.45.2",
|
||||||
"rollup-plugin-babel": "^4.4.0",
|
"rollup-plugin-babel": "^4.4.0",
|
||||||
"rollup-plugin-commonjs": "^10.1.0",
|
"rollup-plugin-commonjs": "^10.1.0",
|
||||||
"rollup-plugin-node-resolve": "^5.2.0",
|
"rollup-plugin-node-resolve": "^5.2.0",
|
||||||
"stylelint": "^13.8.0",
|
"stylelint": "^13.12.0",
|
||||||
"stylelint-config-prettier": "^8.0.2",
|
"stylelint-config-prettier": "^8.0.2",
|
||||||
"stylelint-config-recommended": "^3.0.0",
|
"stylelint-config-recommended": "^4.0.0",
|
||||||
"stylelint-config-sass-guidelines": "^7.1.0",
|
"stylelint-config-sass-guidelines": "^8.0.0",
|
||||||
"stylelint-order": "^4.1.0",
|
"stylelint-order": "^4.1.0",
|
||||||
"stylelint-scss": "^3.18.0",
|
"stylelint-scss": "^3.19.0",
|
||||||
"stylelint-selector-bem-pattern": "^2.1.0",
|
"stylelint-selector-bem-pattern": "^2.1.0",
|
||||||
"through2": "^4.0.2"
|
"through2": "^4.0.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.8.1",
|
"core-js": "^3.10.1",
|
||||||
"custom-event-polyfill": "^1.0.7",
|
"custom-event-polyfill": "^1.0.7",
|
||||||
"loadjs": "^4.2.0",
|
"loadjs": "^4.2.0",
|
||||||
"rangetouch": "^2.0.1",
|
"rangetouch": "^2.0.1",
|
||||||
|
@ -61,7 +61,7 @@ const defaults = {
|
|||||||
// Sprite (for icons)
|
// Sprite (for icons)
|
||||||
loadSprite: true,
|
loadSprite: true,
|
||||||
iconPrefix: 'plyr',
|
iconPrefix: 'plyr',
|
||||||
iconUrl: 'https://cdn.plyr.io/3.6.4/plyr.svg',
|
iconUrl: 'https://cdn.plyr.io/3.6.5/plyr.svg',
|
||||||
|
|
||||||
// Blank video (used to prevent errors on source change)
|
// Blank video (used to prevent errors on source change)
|
||||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||||
|
@ -41,7 +41,6 @@ const media = {
|
|||||||
// Poster image container
|
// Poster image container
|
||||||
this.elements.poster = createElement('div', {
|
this.elements.poster = createElement('div', {
|
||||||
class: this.config.classNames.poster,
|
class: this.config.classNames.poster,
|
||||||
hidden: '',
|
|
||||||
});
|
});
|
||||||
|
|
||||||
this.elements.wrapper.appendChild(this.elements.poster);
|
this.elements.wrapper.appendChild(this.elements.poster);
|
||||||
|
@ -104,7 +104,10 @@ const vimeo = {
|
|||||||
const src = format(player.config.urls.vimeo.iframe, id, params);
|
const src = format(player.config.urls.vimeo.iframe, id, params);
|
||||||
iframe.setAttribute('src', src);
|
iframe.setAttribute('src', src);
|
||||||
iframe.setAttribute('allowfullscreen', '');
|
iframe.setAttribute('allowfullscreen', '');
|
||||||
iframe.setAttribute('allow', ['autoplay', 'fullscreen', 'picture-in-picture'].join('; '));
|
iframe.setAttribute(
|
||||||
|
'allow',
|
||||||
|
['autoplay', 'fullscreen', 'picture-in-picture', 'encrypted-media', 'accelerometer', 'gyroscope'].join('; '),
|
||||||
|
);
|
||||||
|
|
||||||
// Set the referrer policy if required
|
// Set the referrer policy if required
|
||||||
if (!is.empty(referrerPolicy)) {
|
if (!is.empty(referrerPolicy)) {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v3.6.4
|
// plyr.js v3.6.5
|
||||||
// https://github.com/sampotts/plyr
|
// https://github.com/sampotts/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr Polyfilled Build
|
// Plyr Polyfilled Build
|
||||||
// plyr.js v3.6.4
|
// plyr.js v3.6.5
|
||||||
// https://github.com/sampotts/plyr
|
// https://github.com/sampotts/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|
||||||
const browser = {
|
const browser = {
|
||||||
isIE: /* @cc_on!@ */ false || !!document.documentMode,
|
isIE: Boolean(window.document.documentMode),
|
||||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||||
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
|
||||||
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
|
||||||
|
@ -28,14 +28,17 @@ $embed-padding: ((100 / 16) * 9);
|
|||||||
.plyr__video-wrapper--fixed-ratio {
|
.plyr__video-wrapper--fixed-ratio {
|
||||||
height: 0;
|
height: 0;
|
||||||
padding-bottom: to-percentage($embed-padding);
|
padding-bottom: to-percentage($embed-padding);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plyr__video-embed iframe,
|
.plyr__video-embed iframe,
|
||||||
.plyr__video-wrapper--fixed-ratio video {
|
.plyr__video-wrapper--fixed-ratio video {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the full custom UI is supported
|
// If the full custom UI is supported
|
||||||
|
@ -16,7 +16,7 @@ const resolve = require('rollup-plugin-node-resolve');
|
|||||||
const sass = require('gulp-sass');
|
const sass = require('gulp-sass');
|
||||||
const postcss = require('gulp-postcss');
|
const postcss = require('gulp-postcss');
|
||||||
const autoprefixer = require('autoprefixer');
|
const autoprefixer = require('autoprefixer');
|
||||||
const clean = require('postcss-clean');
|
const cssnano = require('cssnano');
|
||||||
const customprops = require('postcss-custom-properties');
|
const customprops = require('postcss-custom-properties');
|
||||||
// Images
|
// Images
|
||||||
const svgstore = require('gulp-svgstore');
|
const svgstore = require('gulp-svgstore');
|
||||||
@ -158,7 +158,15 @@ Object.entries(build.css).forEach(([filename, entry]) => {
|
|||||||
.src(src)
|
.src(src)
|
||||||
.pipe(plumber())
|
.pipe(plumber())
|
||||||
.pipe(sass())
|
.pipe(sass())
|
||||||
.pipe(postcss([customprops(), autoprefixer(), clean()]))
|
.pipe(
|
||||||
|
postcss([
|
||||||
|
customprops(),
|
||||||
|
autoprefixer(),
|
||||||
|
cssnano({
|
||||||
|
preset: 'default',
|
||||||
|
}),
|
||||||
|
]),
|
||||||
|
)
|
||||||
.pipe(size(sizeOptions))
|
.pipe(size(sizeOptions))
|
||||||
.pipe(gulp.dest(dist)),
|
.pipe(gulp.dest(dist)),
|
||||||
);
|
);
|
||||||
|
@ -10,7 +10,7 @@ const gulp = require('gulp');
|
|||||||
const gitbranch = require('git-branch');
|
const gitbranch = require('git-branch');
|
||||||
const rename = require('gulp-rename');
|
const rename = require('gulp-rename');
|
||||||
const replace = require('gulp-replace');
|
const replace = require('gulp-replace');
|
||||||
const ansi = require('ansi-colors');
|
const { green, cyan, bold } = require('colorette');
|
||||||
const log = require('fancy-log');
|
const log = require('fancy-log');
|
||||||
const open = require('gulp-open');
|
const open = require('gulp-open');
|
||||||
const size = require('gulp-size');
|
const size = require('gulp-size');
|
||||||
@ -128,7 +128,7 @@ gulp.task('version', (done) => {
|
|||||||
|
|
||||||
const { domain } = deploy.cdn;
|
const { domain } = deploy.cdn;
|
||||||
|
|
||||||
log(`Updating version in files to ${ansi.green.bold(version)}...`);
|
log(`Updating version in files to ${green(bold(version))}...`);
|
||||||
|
|
||||||
// Replace versioned URLs in source
|
// Replace versioned URLs in source
|
||||||
const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
|
const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
|
||||||
@ -156,7 +156,7 @@ gulp.task('cdn', (done) => {
|
|||||||
throw new Error('No publisher instance. Check AWS configuration.');
|
throw new Error('No publisher instance. Check AWS configuration.');
|
||||||
}
|
}
|
||||||
|
|
||||||
log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
|
log(`Uploading ${green(bold(pkg.version))} to ${cyan(domain)}...`);
|
||||||
|
|
||||||
// Upload to CDN
|
// Upload to CDN
|
||||||
return (
|
return (
|
||||||
@ -199,7 +199,7 @@ gulp.task('purge', () => {
|
|||||||
const purge = new FastlyPurge(fastly.token);
|
const purge = new FastlyPurge(fastly.token);
|
||||||
|
|
||||||
list.forEach((url) => {
|
list.forEach((url) => {
|
||||||
log(`Purging ${ansi.cyan(url)}...`);
|
log(`Purging ${cyan(url)}...`);
|
||||||
|
|
||||||
purge.url(url, (error, result) => {
|
purge.url(url, (error, result) => {
|
||||||
if (error) {
|
if (error) {
|
||||||
@ -226,7 +226,7 @@ gulp.task('demo', (done) => {
|
|||||||
throw new Error('No publisher instance. Check AWS configuration.');
|
throw new Error('No publisher instance. Check AWS configuration.');
|
||||||
}
|
}
|
||||||
|
|
||||||
log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
|
log(`Uploading ${green(bold(pkg.version))} to ${cyan(domain)}...`);
|
||||||
|
|
||||||
// Replace versioned files in README.md
|
// Replace versioned files in README.md
|
||||||
gulp
|
gulp
|
||||||
|
Reference in New Issue
Block a user