Compare commits
33 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sam Potts
|
2bd08cdc28 | ||
|
Sam Potts
|
5fefabe3bd | ||
|
Sam Potts
|
e281078441 | ||
|
Sam Potts
|
9bb75f6f52 | ||
|
Sam Potts
|
3b7a24456d | ||
|
Sam Potts
|
c885d59270 | ||
|
Sam Potts
|
9f30d54963 | ||
|
Sam Potts
|
b247093495 | ||
|
Sam Potts
|
9ca7b861a9 | ||
|
Sam Potts
|
2eccf0dd05 | ||
|
Sam Potts
|
566b957e65 | ||
|
Sam Potts
|
a8456f4ca7 | ||
|
Sam Potts
|
0f3098040d | ||
 Vladimir Morozov
|
21539be3f2 | ||
|
Vladimir Morozov
|
c22f5c4b39 | ||
|
Vladimir Morozov
|
f4b47a9275 | ||
 Jimmy Jia
|
266b70d9d0 | ||
|
Sam Potts
|
6e68ad6d15 | ||
|
Sam Potts
|
c202551e6d | ||
|
Sam Potts
|
5b7a025d26 | ||
|
Sam Potts
|
26bcf83960 | ||
 Arslan Javed
|
e4acff4f8d | ||
|
Sam Potts
|
568ddf2390 | ||
 Your Name
|
ce91945544 | ||
|
Your Name
|
11fed8d1b5 | ||
|
Sam Potts
|
4c3bf25b8a | ||
|
Sam Potts
|
215fc3677a | ||
|
Sam Potts
|
4d3b6b882e | ||
|
Sam Potts
|
83eda174af | ||
|
Sam Potts
|
1c29cb890e | ||
|
Sam Potts
|
438ebe5013 | ||
|
Sam Potts
|
4335a2a0d1 | ||
|
Sam Potts
|
825fd292ae |
+2
-1
@@ -2,8 +2,9 @@ demo
|
||||
.github
|
||||
.vscode
|
||||
*.code-workspace
|
||||
build.json
|
||||
credentials.json
|
||||
bundles.json
|
||||
deploy.json
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
*.mp4
|
||||
|
||||
@@ -1,3 +1,19 @@
|
||||
## v3.5.3
|
||||
|
||||
- Improved the usage of the `ratio` config option; it now works as expected and for all video types. The default has not changed, it is to dynamically, where possible (except YouTube where 16:9 is used) determine the ratio from the media source so this is not a breaking change.
|
||||
- Added new `ratio` getter and setter
|
||||
- Fix: Properly clear all timeouts on destroy
|
||||
- Fix: Allow absolute paths in preview thumbnails
|
||||
- Improvement: Allow optional hours and ms in VTT parser in preview thumbnails
|
||||
|
||||
## v3.5.2
|
||||
|
||||
- Fixed issue where the preview thumbnail was present while scrubbing
|
||||
|
||||
## v3.5.1
|
||||
|
||||
- Fixed build issues with babel and browserslist
|
||||
|
||||
## v3.5.0
|
||||
|
||||
- Preview seek/scrubbing thumbnails (thanks @jamesoflol)
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+4595
-4694
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
+758
-622
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
Vendored
+755
-619
File diff suppressed because it is too large
Load Diff
Vendored
+6339
-3519
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
Vendored
+6336
-3516
File diff suppressed because it is too large
Load Diff
+40
-43
@@ -30,6 +30,7 @@ const header = require('gulp-header');
|
||||
const gitbranch = require('git-branch');
|
||||
const rename = require('gulp-rename');
|
||||
const replace = require('gulp-replace');
|
||||
const ansi = require('ansi-colors');
|
||||
const log = require('fancy-log');
|
||||
const open = require('gulp-open');
|
||||
const plumber = require('gulp-plumber');
|
||||
@@ -104,32 +105,14 @@ const tasks = {
|
||||
css: [],
|
||||
js: [],
|
||||
sprite: [],
|
||||
clean: ['clean'],
|
||||
clean: 'clean',
|
||||
};
|
||||
|
||||
// Size plugin
|
||||
const sizeOptions = { showFiles: true, gzip: true };
|
||||
|
||||
// Babel config
|
||||
const babelrc = (polyfill = false) => ({
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {
|
||||
browsers,
|
||||
},
|
||||
useBuiltIns: polyfill ? 'usage' : false,
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
babelrc: false,
|
||||
exclude: 'node_modules/**',
|
||||
});
|
||||
|
||||
// Clean out /dist
|
||||
gulp.task('clean', done => {
|
||||
gulp.task(tasks.clean, done => {
|
||||
const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
|
||||
|
||||
// Don't delete the mp4
|
||||
@@ -148,19 +131,35 @@ Object.entries(build.js).forEach(([filename, entry]) => {
|
||||
const polyfill = filename.includes('polyfilled');
|
||||
const extension = format === 'es' ? 'mjs' : 'js';
|
||||
|
||||
gulp.task(name, () => {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(entry.src)
|
||||
.pipe(plumber())
|
||||
.pipe(sourcemaps.init())
|
||||
.pipe(
|
||||
rollup(
|
||||
{
|
||||
plugins: [resolve(), commonjs(), babel(babelrc(polyfill))],
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs(),
|
||||
babel({
|
||||
presets: [
|
||||
[
|
||||
'@babel/env',
|
||||
{
|
||||
// debug: true,
|
||||
useBuiltIns: polyfill ? 'usage' : false,
|
||||
corejs: polyfill ? 3 : undefined,
|
||||
},
|
||||
],
|
||||
],
|
||||
babelrc: false,
|
||||
exclude: [/\/core-js\//],
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
name: entry.namespace,
|
||||
// exports: 'named',
|
||||
format,
|
||||
},
|
||||
),
|
||||
@@ -172,13 +171,13 @@ Object.entries(build.js).forEach(([filename, entry]) => {
|
||||
}),
|
||||
)
|
||||
.pipe(gulp.dest(entry.dist))
|
||||
.pipe(filter(`**/*${extension}`))
|
||||
.pipe(filter(`**/*.${extension}`))
|
||||
.pipe(terser())
|
||||
.pipe(rename({ suffix: minSuffix }))
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(sourcemaps.write(''))
|
||||
.pipe(gulp.dest(entry.dist));
|
||||
});
|
||||
.pipe(gulp.dest(entry.dist)),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -187,8 +186,8 @@ Object.entries(build.css).forEach(([filename, entry]) => {
|
||||
const name = `css:${filename}`;
|
||||
tasks.css.push(name);
|
||||
|
||||
gulp.task(name, () => {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(entry.src)
|
||||
.pipe(plumber())
|
||||
.pipe(sass())
|
||||
@@ -199,8 +198,8 @@ Object.entries(build.css).forEach(([filename, entry]) => {
|
||||
)
|
||||
.pipe(clean())
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(entry.dist));
|
||||
});
|
||||
.pipe(gulp.dest(entry.dist)),
|
||||
);
|
||||
});
|
||||
|
||||
// SVG Sprites
|
||||
@@ -208,18 +207,16 @@ Object.entries(build.sprite).forEach(([filename, entry]) => {
|
||||
const name = `sprite:${filename}`;
|
||||
tasks.sprite.push(name);
|
||||
|
||||
log(path.basename(filename));
|
||||
|
||||
gulp.task(name, () => {
|
||||
return gulp
|
||||
gulp.task(name, () =>
|
||||
gulp
|
||||
.src(entry.src)
|
||||
.pipe(plumber())
|
||||
.pipe(imagemin())
|
||||
.pipe(svgstore())
|
||||
.pipe(rename({ basename: path.parse(filename).name }))
|
||||
.pipe(size(sizeOptions))
|
||||
.pipe(gulp.dest(entry.dist));
|
||||
});
|
||||
.pipe(gulp.dest(entry.dist)),
|
||||
);
|
||||
});
|
||||
|
||||
// Build all JS
|
||||
@@ -317,7 +314,7 @@ gulp.task('version', done => {
|
||||
|
||||
const { domain } = deploy.cdn;
|
||||
|
||||
console.log(`Updating versions to '${version}'...`);
|
||||
log(`Uploading ${ansi.green.bold(version)} to ${ansi.cyan(domain)}...`);
|
||||
|
||||
// Replace versioned URLs in source
|
||||
const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
|
||||
@@ -342,7 +339,7 @@ gulp.task('cdn', done => {
|
||||
throw new Error('No publisher instance. Check AWS configuration.');
|
||||
}
|
||||
|
||||
console.log(`Uploading '${version}' to ${domain}...`);
|
||||
log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
|
||||
|
||||
// Upload to CDN
|
||||
return (
|
||||
@@ -385,13 +382,13 @@ gulp.task('purge', () => {
|
||||
const purge = new FastlyPurge(fastly.token);
|
||||
|
||||
list.forEach(url => {
|
||||
console.log(`Purging ${url}...`);
|
||||
log(`Purging ${ansi.cyan(url)}...`);
|
||||
|
||||
purge.url(url, (error, result) => {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
log.error(error);
|
||||
} else if (result) {
|
||||
console.log(result);
|
||||
log(result);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -412,7 +409,7 @@ gulp.task('demo', done => {
|
||||
throw new Error('No publisher instance. Check AWS configuration.');
|
||||
}
|
||||
|
||||
console.log(`Uploading '${version}' demo to ${deploy.demo.domain}...`);
|
||||
log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
|
||||
|
||||
// Replace versioned files in readme.md
|
||||
gulp.src([`${__dirname}/readme.md`])
|
||||
|
||||
+25
-27
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "3.5.0",
|
||||
"version": "3.5.3",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "https://plyr.io",
|
||||
"author": "Sam Potts <sam@potts.es>",
|
||||
@@ -27,10 +27,7 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/sampotts/plyr/issues"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"not dead"
|
||||
],
|
||||
"browserslist": "> 1%",
|
||||
"scripts": {
|
||||
"build": "gulp build",
|
||||
"lint": "eslint src/js && npm run-script remark",
|
||||
@@ -38,15 +35,15 @@
|
||||
"deploy": "yarn lint && gulp deploy"
|
||||
},
|
||||
"devDependencies": {
|
||||
"aws-sdk": "^2.404.0",
|
||||
"@babel/core": "^7.3.3",
|
||||
"@babel/preset-env": "^7.3.1",
|
||||
"ansi-colors": "^3.2.4",
|
||||
"aws-sdk": "^2.437.0",
|
||||
"@babel/core": "^7.4.3",
|
||||
"@babel/preset-env": "^7.4.3",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-preset-minify": "^0.5.0",
|
||||
"del": "^3.0.0",
|
||||
"eslint": "^5.14.0",
|
||||
"del": "^4.1.0",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-airbnb-base": "^13.1.0",
|
||||
"eslint-config-prettier": "^4.0.0",
|
||||
"eslint-config-prettier": "^4.1.0",
|
||||
"eslint-plugin-import": "^2.16.0",
|
||||
"fancy-log": "^1.3.3",
|
||||
"fastly-purge": "^1.0.1",
|
||||
@@ -54,7 +51,7 @@
|
||||
"gulp": "^4.0.0",
|
||||
"gulp-autoprefixer": "^6.0.0",
|
||||
"gulp-awspublish": "^4.0.0",
|
||||
"gulp-better-rollup": "^3.4.0",
|
||||
"gulp-better-rollup": "^4.0.1",
|
||||
"gulp-clean-css": "^4.0.0",
|
||||
"gulp-filter": "^5.1.0",
|
||||
"gulp-header": "^2.0.7",
|
||||
@@ -66,32 +63,33 @@
|
||||
"gulp-replace": "^1.0.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-size": "^3.0.0",
|
||||
"gulp-sourcemaps": "^2.6.4",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"gulp-svgstore": "^7.0.1",
|
||||
"gulp-terser": "^1.1.7",
|
||||
"postcss-custom-properties": "^8.0.9",
|
||||
"postcss-custom-properties": "^8.0.10",
|
||||
"prettier-eslint": "^8.8.2",
|
||||
"prettier-stylelint": "^0.4.2",
|
||||
"remark-cli": "^6.0.1",
|
||||
"remark-validate-links": "^8.0.0",
|
||||
"remark-validate-links": "^8.0.2",
|
||||
"rollup": "^1.10.0",
|
||||
"rollup-plugin-babel": "^4.3.2",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-commonjs": "^9.3.4",
|
||||
"rollup-plugin-node-resolve": "^4.2.3",
|
||||
"stylelint": "^9.10.1",
|
||||
"stylelint-config-prettier": "^4.0.0",
|
||||
"stylelint-config-prettier": "^5.0.0",
|
||||
"stylelint-config-recommended": "^2.1.0",
|
||||
"stylelint-config-sass-guidelines": "^5.3.0",
|
||||
"stylelint-order": "^2.0.0",
|
||||
"stylelint-scss": "^3.5.3",
|
||||
"stylelint-selector-bem-pattern": "^2.0.0",
|
||||
"through2": "^3.0.0"
|
||||
"stylelint-order": "^2.2.1",
|
||||
"stylelint-scss": "^3.5.4",
|
||||
"stylelint-selector-bem-pattern": "^2.1.0",
|
||||
"through2": "^3.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.6.5",
|
||||
"custom-event-polyfill": "^1.0.6",
|
||||
"loadjs": "^3.5.5",
|
||||
"core-js": "^3.0.1",
|
||||
"custom-event-polyfill": "^1.0.7",
|
||||
"loadjs": "^3.6.1",
|
||||
"rangetouch": "^2.0.0",
|
||||
"raven-js": "^3.27.0",
|
||||
"url-polyfill": "^1.1.3"
|
||||
"url-polyfill": "^1.1.5"
|
||||
}
|
||||
}
|
||||
|
||||
+5
-7
@@ -5,23 +5,20 @@
|
||||
}
|
||||
],
|
||||
"settings": {
|
||||
// Exclude from the editor
|
||||
"files.exclude": {
|
||||
"**/node_modules": true
|
||||
},
|
||||
// Exclude from search
|
||||
"search.exclude": {
|
||||
"dist/": true,
|
||||
"demo/dist/": true
|
||||
"**/node_modules": true,
|
||||
"**/dist": true
|
||||
},
|
||||
// Linting
|
||||
"stylelint.enable": true,
|
||||
"css.validate": false,
|
||||
"scss.validate": false,
|
||||
"javascript.validate.enable": false,
|
||||
|
||||
// Prettier
|
||||
"prettier.eslintIntegration": true,
|
||||
"prettier.stylelintIntegration": true,
|
||||
|
||||
// Formatting
|
||||
"editor.tabSize": 4,
|
||||
"editor.insertSpaces": true,
|
||||
@@ -29,6 +26,7 @@
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.organizeImports": true
|
||||
},
|
||||
|
||||
// Trim on save
|
||||
"files.trimTrailingWhitespace": true
|
||||
}
|
||||
|
||||
@@ -123,13 +123,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.5.0/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.5.3/plyr.js"></script>
|
||||
```
|
||||
|
||||
...or...
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/3.5.0/plyr.polyfilled.js"></script>
|
||||
<script src="https://cdn.plyr.io/3.5.3/plyr.polyfilled.js"></script>
|
||||
```
|
||||
|
||||
## CSS
|
||||
@@ -143,13 +143,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.5.0/plyr.css" />
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/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.5.0/plyr.svg`.
|
||||
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.3/plyr.svg`.
|
||||
|
||||
# Ads
|
||||
|
||||
@@ -293,10 +293,10 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
|
||||
| `listeners` | Object | `null` | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire. |
|
||||
| `captions` | Object | `{ active: false, language: 'auto', update: false }` | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options). |
|
||||
| `fullscreen` | Object | `{ enabled: true, fallback: true, iosNative: false }` | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls) |
|
||||
| `ratio` | String | `16:9` | The aspect ratio you want to use for embedded players. |
|
||||
| `ratio` | String | `null` | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default. |
|
||||
| `storage` | Object | `{ enabled: true, key: 'plyr' }` | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use. |
|
||||
| `speed` | Object | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }` | `selected`: The default speed for playback. `options`: Options to display in the menu. Most browsers will refuse to play slower than 0.5. |
|
||||
| `quality` | Object | `{ default: 'default', options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'] }` | Currently only supported by YouTube. `default` is the default quality level, determined by YouTube. `options` are the options to display. |
|
||||
| `quality` | Object | `{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }` | `default` is the default quality level (if it exists in your sources). `options` are the options to display. This is used to filter the available sources. |
|
||||
| `loop` | Object | `{ active: false }` | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality. |
|
||||
| `ads` | Object | `{ enabled: false, publisherId: '' }` | `enabled`: Whether to enable advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID. |
|
||||
| `urls` | Object | See source. | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button. |
|
||||
@@ -404,10 +404,10 @@ 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+) and Chrome 70+. |
|
||||
| `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+. |
|
||||
| `ratio` | ✓ | ✓ | Gets or sets the video aspect ratio. The setter accepts a string in the same format as the `ratio` option. |
|
||||
|
||||
1. YouTube only. HTML5 will follow.
|
||||
2. HTML5 only
|
||||
1. HTML5 only
|
||||
|
||||
### The `.source` setter
|
||||
|
||||
|
||||
@@ -42,8 +42,9 @@ const defaults = {
|
||||
// Clicking the currentTime inverts it's value to show time left rather than elapsed
|
||||
toggleInvert: true,
|
||||
|
||||
// Aspect ratio (for embeds)
|
||||
ratio: '16:9',
|
||||
// Force an aspect ratio
|
||||
// The format must be `'w:h'` (e.g. `'16:9'`)
|
||||
ratio: null,
|
||||
|
||||
// Click video container to play/pause
|
||||
clickToPlay: true,
|
||||
@@ -60,7 +61,7 @@ const defaults = {
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.5.0/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/3.5.3/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
@@ -330,6 +331,7 @@ const defaults = {
|
||||
provider: 'plyr--{0}',
|
||||
video: 'plyr__video-wrapper',
|
||||
embed: 'plyr__video-embed',
|
||||
videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',
|
||||
embedContainer: 'plyr__video-embed__container',
|
||||
poster: 'plyr__poster',
|
||||
posterEnabled: 'plyr__poster-enabled',
|
||||
|
||||
@@ -6,6 +6,7 @@ import support from './support';
|
||||
import { removeElement } from './utils/elements';
|
||||
import { triggerEvent } from './utils/events';
|
||||
import is from './utils/is';
|
||||
import { setAspectRatio } from './utils/style';
|
||||
|
||||
const html5 = {
|
||||
getSources() {
|
||||
@@ -43,6 +44,9 @@ const html5 = {
|
||||
|
||||
const player = this;
|
||||
|
||||
// Set aspect ratio if set
|
||||
setAspectRatio.call(player);
|
||||
|
||||
// Quality
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get() {
|
||||
|
||||
+4
-4
@@ -9,7 +9,7 @@ import browser from './utils/browser';
|
||||
import { getElement, getElements, matches, toggleClass, toggleHidden } from './utils/elements';
|
||||
import { off, on, once, toggleListener, triggerEvent } from './utils/events';
|
||||
import is from './utils/is';
|
||||
import { setAspectRatio } from './utils/style';
|
||||
import { getAspectRatio, setAspectRatio } from './utils/style';
|
||||
|
||||
class Listeners {
|
||||
constructor(player) {
|
||||
@@ -317,10 +317,10 @@ class Listeners {
|
||||
}
|
||||
|
||||
const target = player.elements.wrapper.firstChild;
|
||||
const [, height] = ratio.split(':').map(Number);
|
||||
const [videoWidth, videoHeight] = player.embed.ratio.split(':').map(Number);
|
||||
const [, y] = ratio;
|
||||
const [videoX, videoY] = getAspectRatio.call(this);
|
||||
|
||||
target.style.maxWidth = toggle ? `${(height / videoHeight) * videoWidth}px` : null;
|
||||
target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
|
||||
target.style.margin = toggle ? '0 auto' : null;
|
||||
};
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ import { buildUrlParams } from '../utils/urls';
|
||||
class Ads {
|
||||
/**
|
||||
* Ads constructor.
|
||||
* @param {object} player
|
||||
* @param {Object} player
|
||||
* @return {Ads}
|
||||
*/
|
||||
constructor(player) {
|
||||
@@ -198,7 +198,7 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Update the ad countdown
|
||||
* @param {boolean} start
|
||||
* @param {Boolean} start
|
||||
*/
|
||||
pollCountdown(start = false) {
|
||||
if (!start) {
|
||||
@@ -559,7 +559,7 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Handles callbacks after an ad event was invoked
|
||||
* @param {string} event - Event type
|
||||
* @param {String} event - Event type
|
||||
*/
|
||||
trigger(event, ...args) {
|
||||
const handlers = this.events[event];
|
||||
@@ -575,8 +575,8 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Add event listeners
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
* @return {Ads}
|
||||
*/
|
||||
on(event, callback) {
|
||||
@@ -594,8 +594,8 @@ class Ads {
|
||||
* The advertisement has 12 seconds to get its things together. We stop this timer when the
|
||||
* advertisement is playing, or when a user action is required to start, then we clear the
|
||||
* timer on ad ready
|
||||
* @param {number} time
|
||||
* @param {string} from
|
||||
* @param {Number} time
|
||||
* @param {String} from
|
||||
*/
|
||||
startSafetyTimer(time, from) {
|
||||
this.player.debug.log(`Safety timer invoked from: ${from}`);
|
||||
@@ -608,7 +608,7 @@ class Ads {
|
||||
|
||||
/**
|
||||
* Clear our safety timer(s)
|
||||
* @param {string} from
|
||||
* @param {String} from
|
||||
*/
|
||||
clearSafetyTimer(from) {
|
||||
if (!is.nullOrUndefined(this.safetyTimer)) {
|
||||
|
||||
@@ -17,17 +17,17 @@ const parseVtt = vttDataString => {
|
||||
if (!is.number(result.startTime)) {
|
||||
// The line with start and end times on it is the first line of interest
|
||||
const matchTimes = line.match(
|
||||
/([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2}):([0-9]{2}):([0-9]{2}).([0-9]{2,3})/,
|
||||
/([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/,
|
||||
); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
|
||||
|
||||
if (matchTimes) {
|
||||
result.startTime =
|
||||
Number(matchTimes[1]) * 60 * 60 +
|
||||
Number(matchTimes[1] || 0) * 60 * 60 +
|
||||
Number(matchTimes[2]) * 60 +
|
||||
Number(matchTimes[3]) +
|
||||
Number(`0.${matchTimes[4]}`);
|
||||
result.endTime =
|
||||
Number(matchTimes[6]) * 60 * 60 +
|
||||
Number(matchTimes[6] || 0) * 60 * 60 +
|
||||
Number(matchTimes[7]) * 60 +
|
||||
Number(matchTimes[8]) +
|
||||
Number(`0.${matchTimes[9]}`);
|
||||
@@ -148,7 +148,10 @@ class PreviewThumbnails {
|
||||
|
||||
// If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file
|
||||
// If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank
|
||||
if (!thumbnail.frames[0].text.startsWith('/')) {
|
||||
// If the thumbnail URLs start with with none of '/', 'http://' or 'https://', then we need to set their relative path to be the location of the VTT file
|
||||
if (!thumbnail.frames[0].text.startsWith('/') &&
|
||||
!thumbnail.frames[0].text.startsWith('http://') &&
|
||||
!thumbnail.frames[0].text.startsWith('https://')) {
|
||||
thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1);
|
||||
}
|
||||
|
||||
@@ -220,6 +223,7 @@ class PreviewThumbnails {
|
||||
// Only act on left mouse button (0), or touch device (event.button is false)
|
||||
if (event.button === false || event.button === 0) {
|
||||
this.mouseDown = true;
|
||||
|
||||
// Wait until media has a duration
|
||||
if (this.player.media.duration) {
|
||||
this.toggleScrubbingContainer(true);
|
||||
@@ -307,7 +311,6 @@ class PreviewThumbnails {
|
||||
if (this.mouseDown) {
|
||||
this.setScrubbingContainerSize();
|
||||
} else {
|
||||
this.toggleThumbContainer(true);
|
||||
this.setThumbContainerSizeAndPos();
|
||||
}
|
||||
|
||||
@@ -319,7 +322,10 @@ class PreviewThumbnails {
|
||||
const hasThumb = thumbNum >= 0;
|
||||
let qualityIndex = 0;
|
||||
|
||||
this.toggleThumbContainer(hasThumb);
|
||||
// Show the thumb container if we're not scrubbing
|
||||
if (!this.mouseDown) {
|
||||
this.toggleThumbContainer(hasThumb);
|
||||
}
|
||||
|
||||
// No matching thumb found
|
||||
if (!hasThumb) {
|
||||
|
||||
@@ -282,7 +282,7 @@ const vimeo = {
|
||||
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
|
||||
const [width, height] = dimensions;
|
||||
player.embed.ratio = `${width}:${height}`;
|
||||
setAspectRatio.call(this, player.embed.ratio);
|
||||
setAspectRatio.call(this);
|
||||
});
|
||||
|
||||
// Set autopause
|
||||
|
||||
@@ -34,6 +34,19 @@ function assurePlaybackState(play) {
|
||||
}
|
||||
}
|
||||
|
||||
function getHost(config) {
|
||||
if (config.noCookie) {
|
||||
return 'https://www.youtube-nocookie.com';
|
||||
}
|
||||
|
||||
if (window.location.protocol === 'http:') {
|
||||
return 'http://www.youtube.com';
|
||||
}
|
||||
|
||||
// Use YouTube's default
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const youtube = {
|
||||
setup() {
|
||||
// Add embed class for responsive
|
||||
@@ -130,7 +143,7 @@ const youtube = {
|
||||
player.media = replaceElement(container, player.media);
|
||||
|
||||
// Id to poster wrapper
|
||||
const posterSrc = format => `https://img.youtube.com/vi/${videoId}/${format}default.jpg`;
|
||||
const posterSrc = format => `https://i.ytimg.com/vi/${videoId}/${format}default.jpg`;
|
||||
|
||||
// Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
|
||||
loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
|
||||
@@ -151,7 +164,7 @@ const youtube = {
|
||||
// https://developers.google.com/youtube/iframe_api_reference
|
||||
player.embed = new window.YT.Player(id, {
|
||||
videoId,
|
||||
host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
|
||||
host: getHost(config),
|
||||
playerVars: extend(
|
||||
{},
|
||||
{
|
||||
@@ -386,7 +399,7 @@ const youtube = {
|
||||
|
||||
case 1:
|
||||
// Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
|
||||
if (player.media.paused && !player.embed.hasPlayed) {
|
||||
if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
|
||||
player.media.pause();
|
||||
} else {
|
||||
assurePlaybackState.call(player, true);
|
||||
|
||||
+70
-39
@@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v3.5.0
|
||||
// plyr.js v3.5.3
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@@ -26,6 +26,7 @@ import { off, on, once, triggerEvent, unbindListeners } from './utils/events';
|
||||
import is from './utils/is';
|
||||
import loadSprite from './utils/loadSprite';
|
||||
import { cloneDeep, extend } from './utils/objects';
|
||||
import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateRatio } from './utils/style';
|
||||
import { parseUrl } from './utils/urls';
|
||||
|
||||
// Private properties
|
||||
@@ -301,8 +302,8 @@ class Plyr {
|
||||
}
|
||||
|
||||
// Autoplay if required
|
||||
if (this.config.autoplay) {
|
||||
this.play();
|
||||
if (this.isHTML5 && this.config.autoplay) {
|
||||
setTimeout(() => this.play(), 10);
|
||||
}
|
||||
|
||||
// Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
|
||||
@@ -403,7 +404,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Toggle playback based on current status
|
||||
* @param {boolean} input
|
||||
* @param {Boolean} input
|
||||
*/
|
||||
togglePlay(input) {
|
||||
// Toggle based on current state if nothing passed
|
||||
@@ -437,7 +438,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Rewind
|
||||
* @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
|
||||
* @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
|
||||
*/
|
||||
rewind(seekTime) {
|
||||
this.currentTime = this.currentTime - (is.number(seekTime) ? seekTime : this.config.seekTime);
|
||||
@@ -445,7 +446,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Fast forward
|
||||
* @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
|
||||
* @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
|
||||
*/
|
||||
forward(seekTime) {
|
||||
this.currentTime = this.currentTime + (is.number(seekTime) ? seekTime : this.config.seekTime);
|
||||
@@ -453,7 +454,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Seek to a time
|
||||
* @param {number} input - where to seek to in seconds. Defaults to 0 (the start)
|
||||
* @param {Number} input - where to seek to in seconds. Defaults to 0 (the start)
|
||||
*/
|
||||
set currentTime(input) {
|
||||
// Bail if media duration isn't available yet
|
||||
@@ -523,7 +524,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the player volume
|
||||
* @param {number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
|
||||
* @param {Number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
|
||||
*/
|
||||
set volume(value) {
|
||||
let volume = value;
|
||||
@@ -574,7 +575,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Increase volume
|
||||
* @param {boolean} step - How much to decrease by (between 0 and 1)
|
||||
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
||||
*/
|
||||
increaseVolume(step) {
|
||||
const volume = this.media.muted ? 0 : this.volume;
|
||||
@@ -583,7 +584,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Decrease volume
|
||||
* @param {boolean} step - How much to decrease by (between 0 and 1)
|
||||
* @param {Boolean} step - How much to decrease by (between 0 and 1)
|
||||
*/
|
||||
decreaseVolume(step) {
|
||||
this.increaseVolume(-step);
|
||||
@@ -591,7 +592,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set muted state
|
||||
* @param {boolean} mute
|
||||
* @param {Boolean} mute
|
||||
*/
|
||||
set muted(mute) {
|
||||
let toggle = mute;
|
||||
@@ -643,7 +644,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set playback speed
|
||||
* @param {number} speed - the speed of playback (0.5-2.0)
|
||||
* @param {Number} speed - the speed of playback (0.5-2.0)
|
||||
*/
|
||||
set speed(input) {
|
||||
let speed = null;
|
||||
@@ -690,7 +691,7 @@ class Plyr {
|
||||
/**
|
||||
* Set playback quality
|
||||
* Currently HTML5 & YouTube only
|
||||
* @param {number} input - Quality level
|
||||
* @param {Number} input - Quality level
|
||||
*/
|
||||
set quality(input) {
|
||||
const config = this.config.quality;
|
||||
@@ -740,7 +741,7 @@ class Plyr {
|
||||
/**
|
||||
* Toggle loop
|
||||
* TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config
|
||||
* @param {boolean} input - Whether to loop or not
|
||||
* @param {Boolean} input - Whether to loop or not
|
||||
*/
|
||||
set loop(input) {
|
||||
const toggle = is.boolean(input) ? input : this.config.loop.active;
|
||||
@@ -800,7 +801,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set new media source
|
||||
* @param {object} input - The new source object (see docs)
|
||||
* @param {Object} input - The new source object (see docs)
|
||||
*/
|
||||
set source(input) {
|
||||
source.change.call(this, input);
|
||||
@@ -824,7 +825,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the poster image for a video
|
||||
* @param {input} - the URL for the new poster image
|
||||
* @param {String} input - the URL for the new poster image
|
||||
*/
|
||||
set poster(input) {
|
||||
if (!this.isVideo) {
|
||||
@@ -846,9 +847,37 @@ class Plyr {
|
||||
return this.media.getAttribute('poster');
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the current aspect ratio in use
|
||||
*/
|
||||
get ratio() {
|
||||
const ratio = reduceAspectRatio(getAspectRatio.call(this));
|
||||
|
||||
return is.array(ratio) ? ratio.join(':') : ratio;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set video aspect ratio
|
||||
*/
|
||||
set ratio(input) {
|
||||
if (!this.isVideo) {
|
||||
this.debug.warn('Aspect ratio can only be set for video');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!is.string(input) || !validateRatio(input)) {
|
||||
this.debug.error(`Invalid aspect ratio specified (${input})`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.config.ratio = input;
|
||||
|
||||
setAspectRatio.call(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the autoplay state
|
||||
* @param {boolean} input - Whether to autoplay or not
|
||||
* @param {Boolean} input - Whether to autoplay or not
|
||||
*/
|
||||
set autoplay(input) {
|
||||
const toggle = is.boolean(input) ? input : this.config.autoplay;
|
||||
@@ -864,7 +893,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Toggle captions
|
||||
* @param {boolean} input - Whether to enable captions
|
||||
* @param {Boolean} input - Whether to enable captions
|
||||
*/
|
||||
toggleCaptions(input) {
|
||||
captions.toggle.call(this, input, false);
|
||||
@@ -872,7 +901,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Set the caption track by index
|
||||
* @param {number} - Caption index
|
||||
* @param {Number} - Caption index
|
||||
*/
|
||||
set currentTrack(input) {
|
||||
captions.set.call(this, input, false);
|
||||
@@ -889,7 +918,7 @@ class Plyr {
|
||||
/**
|
||||
* Set the wanted language for captions
|
||||
* Since tracks can be added later it won't update the actual caption track until there is a matching track
|
||||
* @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
* @param {String} - Two character ISO language code (e.g. EN, FR, PT, etc)
|
||||
*/
|
||||
set language(input) {
|
||||
captions.setLanguage.call(this, input, false);
|
||||
@@ -962,7 +991,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Toggle the player controls
|
||||
* @param {boolean} [toggle] - Whether to show the controls
|
||||
* @param {Boolean} [toggle] - Whether to show the controls
|
||||
*/
|
||||
toggleControls(toggle) {
|
||||
// Don't toggle if missing UI support or if it's audio
|
||||
@@ -995,8 +1024,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Add event listeners
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
*/
|
||||
on(event, callback) {
|
||||
on.call(this, this.elements.container, event, callback);
|
||||
@@ -1004,8 +1033,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Add event listeners once
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
*/
|
||||
once(event, callback) {
|
||||
once.call(this, this.elements.container, event, callback);
|
||||
@@ -1013,8 +1042,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Remove event listeners
|
||||
* @param {string} event - Event type
|
||||
* @param {function} callback - Callback for when event occurs
|
||||
* @param {String} event - Event type
|
||||
* @param {Function} callback - Callback for when event occurs
|
||||
*/
|
||||
off(event, callback) {
|
||||
off(this.elements.container, event, callback);
|
||||
@@ -1024,8 +1053,8 @@ class Plyr {
|
||||
* Destroy an instance
|
||||
* Event listeners are removed when elements are removed
|
||||
* http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
|
||||
* @param {function} callback - Callback for when destroy is complete
|
||||
* @param {boolean} soft - Whether it's a soft destroy (for source changes etc)
|
||||
* @param {Function} callback - Callback for when destroy is complete
|
||||
* @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
|
||||
*/
|
||||
destroy(callback, soft = false) {
|
||||
if (!this.ready) {
|
||||
@@ -1088,11 +1117,13 @@ class Plyr {
|
||||
// Stop playback
|
||||
this.stop();
|
||||
|
||||
// Clear timeouts
|
||||
clearTimeout(this.timers.loading);
|
||||
clearTimeout(this.timers.controls);
|
||||
clearTimeout(this.timers.resized);
|
||||
|
||||
// Provider specific stuff
|
||||
if (this.isHTML5) {
|
||||
// Clear timeout
|
||||
clearTimeout(this.timers.loading);
|
||||
|
||||
// Restore native video controls
|
||||
ui.toggleNativeControls.call(this, true);
|
||||
|
||||
@@ -1124,7 +1155,7 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Check for support for a mime type (HTML5 only)
|
||||
* @param {string} type - Mime type
|
||||
* @param {String} type - Mime type
|
||||
*/
|
||||
supports(type) {
|
||||
return support.mime.call(this, type);
|
||||
@@ -1132,9 +1163,9 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Check for support
|
||||
* @param {string} type - Player type (audio/video)
|
||||
* @param {string} provider - Provider (html5/youtube/vimeo)
|
||||
* @param {bool} inline - Where player has `playsinline` sttribute
|
||||
* @param {String} type - Player type (audio/video)
|
||||
* @param {String} provider - Provider (html5/youtube/vimeo)
|
||||
* @param {Boolean} inline - Where player has `playsinline` sttribute
|
||||
*/
|
||||
static supported(type, provider, inline) {
|
||||
return support.check(type, provider, inline);
|
||||
@@ -1142,8 +1173,8 @@ class Plyr {
|
||||
|
||||
/**
|
||||
* Load an SVG sprite into the page
|
||||
* @param {string} url - URL for the SVG sprite
|
||||
* @param {string} [id] - Unique ID
|
||||
* @param {String} url - URL for the SVG sprite
|
||||
* @param {String} [id] - Unique ID
|
||||
*/
|
||||
static loadSprite(url, id) {
|
||||
return loadSprite(url, id);
|
||||
@@ -1152,7 +1183,7 @@ class Plyr {
|
||||
/**
|
||||
* Setup multiple instances
|
||||
* @param {*} selector
|
||||
* @param {object} options
|
||||
* @param {Object} options
|
||||
*/
|
||||
static setup(selector, options = {}) {
|
||||
let targets = null;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.5.0
|
||||
// plyr.js v3.5.3
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
+53
-14
@@ -4,26 +4,63 @@
|
||||
|
||||
import is from './is';
|
||||
|
||||
/* function reduceAspectRatio(width, height) {
|
||||
const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h));
|
||||
const ratio = getRatio(width, height);
|
||||
return `${width / ratio}:${height / ratio}`;
|
||||
} */
|
||||
export function validateRatio(input) {
|
||||
if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const ratio = is.array(input) ? input : input.split(':');
|
||||
|
||||
return ratio.map(Number).every(is.number);
|
||||
}
|
||||
|
||||
export function reduceAspectRatio(ratio) {
|
||||
if (!is.array(ratio) || !ratio.every(is.number)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [width, height] = ratio;
|
||||
const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
|
||||
const divider = getDivider(width, height);
|
||||
|
||||
return [width / divider, height / divider];
|
||||
}
|
||||
|
||||
export function getAspectRatio(input) {
|
||||
const parse = ratio => {
|
||||
if (!validateRatio(ratio)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ratio.split(':').map(Number);
|
||||
};
|
||||
|
||||
// Provided ratio
|
||||
let ratio = parse(input);
|
||||
|
||||
// Get from config
|
||||
if (ratio === null) {
|
||||
ratio = parse(this.config.ratio);
|
||||
}
|
||||
|
||||
// Get from embed
|
||||
if (ratio === null && !is.empty(this.embed) && is.string(this.embed.ratio)) {
|
||||
ratio = parse(this.embed.ratio);
|
||||
}
|
||||
|
||||
return ratio;
|
||||
}
|
||||
|
||||
// Set aspect ratio for responsive container
|
||||
export function setAspectRatio(input) {
|
||||
let ratio = input;
|
||||
|
||||
if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) {
|
||||
({ ratio } = this.embed);
|
||||
if (!this.isVideo) {
|
||||
return {};
|
||||
}
|
||||
|
||||
if (!is.string(ratio)) {
|
||||
({ ratio } = this.config);
|
||||
}
|
||||
const ratio = getAspectRatio.call(this, input);
|
||||
|
||||
const [x, y] = ratio.split(':').map(Number);
|
||||
const padding = (100 / x) * y;
|
||||
const [w, h] = is.array(ratio) ? ratio : [0, 0];
|
||||
const padding = (100 / w) * h;
|
||||
|
||||
this.elements.wrapper.style.paddingBottom = `${padding}%`;
|
||||
|
||||
@@ -32,6 +69,8 @@ export function setAspectRatio(input) {
|
||||
const height = 240;
|
||||
const offset = (height - padding) / (height / 50);
|
||||
this.media.style.transform = `translateY(-${offset}%)`;
|
||||
} else if (this.isHTML5) {
|
||||
this.elements.wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
|
||||
}
|
||||
|
||||
return { padding, ratio };
|
||||
|
||||
@@ -6,8 +6,8 @@ import is from './is';
|
||||
|
||||
/**
|
||||
* Parse a string to a URL object
|
||||
* @param {string} input - the URL to be parsed
|
||||
* @param {boolean} safe - failsafe parsing
|
||||
* @param {String} input - the URL to be parsed
|
||||
* @param {Boolean} safe - failsafe parsing
|
||||
*/
|
||||
export function parseUrl(input, safe = true) {
|
||||
let url = input;
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
// --------------------------------------------------------------
|
||||
// Embedded players
|
||||
// YouTube, Vimeo, etc
|
||||
// --------------------------------------------------------------
|
||||
|
||||
// Default to 16:9 ratio but this is set by JavaScript based on config
|
||||
$embed-padding: ((100 / 16) * 9);
|
||||
|
||||
.plyr__video-embed {
|
||||
height: 0;
|
||||
padding-bottom: to-percentage($embed-padding);
|
||||
position: relative;
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// If the full custom UI is supported
|
||||
.plyr--full-ui .plyr__video-embed {
|
||||
$height: 240;
|
||||
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
|
||||
|
||||
// Only used for Vimeo
|
||||
> .plyr__video-embed__container {
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
}
|
||||
}
|
||||
@@ -20,3 +20,36 @@
|
||||
// Require z-index to force border-radius
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
// Default to 16:9 ratio but this is set by JavaScript based on config
|
||||
$embed-padding: ((100 / 16) * 9);
|
||||
|
||||
.plyr__video-embed,
|
||||
.plyr__video-wrapper--fixed-ratio {
|
||||
height: 0;
|
||||
padding-bottom: to-percentage($embed-padding);
|
||||
}
|
||||
|
||||
.plyr__video-embed iframe,
|
||||
.plyr__video-wrapper--fixed-ratio video {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// If the full custom UI is supported
|
||||
.plyr--full-ui .plyr__video-embed {
|
||||
$height: 240;
|
||||
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
|
||||
|
||||
// Only used for Vimeo
|
||||
> .plyr__video-embed__container {
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,7 +29,6 @@
|
||||
@import 'components/captions';
|
||||
@import 'components/control';
|
||||
@import 'components/controls';
|
||||
@import 'components/embed';
|
||||
@import 'components/menus';
|
||||
@import 'components/sliders';
|
||||
@import 'components/poster';
|
||||
|
||||
Reference in New Issue
Block a user