Skip to content

Commit

Permalink
Merge pull request #1423 from sampotts/develop
Browse files Browse the repository at this point in the history 
v3.5.4
  • Loading branch information
@sampotts
sampotts authored Apr 25, 2019
2 parents 2bd08cd + 5ddd9e0 commit e644eeb
Show file tree
Hide file tree
Showing 20 changed files with 567 additions and 440 deletions.
0 .eslintrc.json → .eslintrc
View file
File renamed without changes.
13 changes: 13 additions & 0 deletions changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
## v3.5.4

- Added: Set download URL via new setter
- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default SASS
- Fixed issue with empty controls and preview thumbs
- Fixed issue with setGutter call (from Sentry)
- Fixed issue with initial selected speed not working
- Added notes on `autoplay` config option and browser compatibility
- Fixed issue with ads volume not matching current content volume
- Fixed race condition where ads were loading during source change
- Improvement: Automatic aspect ratio for YouTube is now supported, meaning all aspect ratios are set based on media content - Note: we're now using a different API to get YouTube video metadata so you may need to adjust any CSPs you have setup
- Fix for menu in the Shadow DOM (thanks @emielbeinema)

## 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.
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ <h1>Plyr</h1>

<!-- Polyfills -->
<script
src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL,Math.trunc"
src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL,Math.trunc&flags=gated"
crossorigin="anonymous"
></script>

Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "3.5.3",
"version": "3.5.4",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",
"author": "Sam Potts <[email protected]>",
Expand Down Expand Up @@ -78,7 +78,7 @@
"stylelint": "^9.10.1",
"stylelint-config-prettier": "^5.0.0",
"stylelint-config-recommended": "^2.1.0",
"stylelint-config-sass-guidelines": "^5.3.0",
"stylelint-config-sass-guidelines": "^5.4.0",
"stylelint-order": "^2.2.1",
"stylelint-scss": "^3.5.4",
"stylelint-selector-bem-pattern": "^2.1.0",
Expand Down
8 changes: 7 additions & 1 deletion readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
| `iconUrl` | String | `null` | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info. |
| `iconPrefix` | String | `plyr` | Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option. |
| `blankVideo` | String | `https://cdn.plyr.io/static/blank.mp4` | Specify a URL or path to a blank video file used to properly cancel network requests. |
| `autoplay` | Boolean | `false` | Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers. If the `autoplay` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true. |
| `autoplay`&sup2; | Boolean | `false` | Autoplay the media on load. If the `autoplay` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true. |
| `autopause`&sup1; | Boolean | `true` | Only allow one player playing at once. |
| `seekTime` | Number | `10` | The time, in seconds, to seek when a user hits fast forward or rewind. |
| `volume` | Number | `1` | A number, between 0 and 1, representing the initial volume of the player. |
Expand Down Expand Up @@ -305,6 +305,11 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
| `previewThumbnails` | Object | `{ enabled: false, src: '' }` | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. |

1. Vimeo only
2. Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:

- https://webkit.org/blog/6784/new-video-policies-for-ios/
- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/

# API

Expand Down Expand Up @@ -406,6 +411,7 @@ player.fullscreen.active; // false;
| `fullscreen.enabled` | ✓ | - | Returns a boolean indicating if the current player has fullscreen enabled. |
| `pip`&sup1; | ✓ | ✓ | 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. |
| `download` | ✓ | ✓ | Gets or sets the URL for the download button. The setter accepts a string containing a valid absolute URL. |

1. HTML5 only

Expand Down
29 changes: 17 additions & 12 deletions src/js/captions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,19 +124,21 @@ const captions = {

// Handle tracks (add event listener and "pseudo"-default)
if (this.isHTML5 && this.isVideo) {
tracks.filter(track => !meta.get(track)).forEach(track => {
this.debug.log('Track added', track);
// Attempt to store if the original dom element was "default"
meta.set(track, {
default: track.mode === 'showing',
tracks
.filter(track => !meta.get(track))
.forEach(track => {
this.debug.log('Track added', track);
// Attempt to store if the original dom element was "default"
meta.set(track, {
default: track.mode === 'showing',
});

// Turn off native caption rendering to avoid double captions
track.mode = 'hidden';

// Add event listener for cue changes
on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
});

// Turn off native caption rendering to avoid double captions
track.mode = 'hidden';

// Add event listener for cue changes
on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
});
}

// Update language first time it matches, or if the previous matching track was removed
Expand Down Expand Up @@ -300,10 +302,12 @@ const captions = {
const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
let track;

languages.every(language => {
track = sorted.find(track => track.language === language);
return !track; // Break iteration if there is a match
});

// If no match is found but is required, get first
return track || (force ? sorted[0] : undefined);
},
Expand Down Expand Up @@ -360,6 +364,7 @@ const captions = {
// Get cues from track
if (!cues) {
const track = captions.getCurrentTrack.call(this);

cues = Array.from((track || {}).activeCues || [])
.map(cue => cue.getCueAsHTML())
.map(getHTML);
Expand Down
13 changes: 2 additions & 11 deletions src/js/config/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.5.3/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.5.2/plyr.svg',

// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
Expand Down Expand Up @@ -195,8 +195,7 @@ const defaults = {
},
youtube: {
sdk: 'https://www.youtube.com/iframe_api',
api:
'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet',
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}', // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
},
googleIMA: {
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
Expand Down Expand Up @@ -320,9 +319,6 @@ const defaults = {
progress: '.plyr__progress',
captions: '.plyr__captions',
caption: '.plyr__caption',
menu: {
quality: '.js-plyr__menu__list--quality',
},
},

// Class hooks added to the player in different states
Expand Down Expand Up @@ -396,11 +392,6 @@ const defaults = {
},
},

// API keys
keys: {
google: null,
},

// Advertisements plugin
// Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
ads: {
Expand Down
Loading

0 comments on commit e644eeb

Please sign in to comment.