Merge branch 'develop' of github.com:sampotts/plyr into develop
This commit is contained in:
Sam Potts
commit
59e3afba03
18
readme.md
18
readme.md
@ -445,6 +445,9 @@ player.source = {
|
||||
},
|
||||
],
|
||||
poster: '/path/to/poster.jpg',
|
||||
previewThumbnails: {
|
||||
src: '/path/to/thumbnails.vtt'
|
||||
},
|
||||
tracks: [
|
||||
{
|
||||
kind: 'captions',
|
||||
@ -514,13 +517,14 @@ player.source = {
|
||||
|
||||
_Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.
|
||||
|
||||
| Property | Type | Description |
|
||||
| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. |
|
||||
| `title` | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically. |
|
||||
| `sources` | Array | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required. |
|
||||
| `poster`¹ | String | The URL for the poster image (HTML5 video only). |
|
||||
| `tracks`¹ | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
|
||||
| Property | Type | Description |
|
||||
| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `type` | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources. |
|
||||
| `title` | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically. |
|
||||
| `sources` | Array | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required. |
|
||||
| `poster`¹ | String | The URL for the poster image (HTML5 video only). |
|
||||
| `tracks`¹ | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
|
||||
| `previewThumbnails`¹ | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`. |
|
||||
|
||||
1. HTML5 only
|
||||
|
||||
|
||||
@ -104,7 +104,7 @@ class PreviewThumbnails {
|
||||
}
|
||||
|
||||
load() {
|
||||
// Togglethe regular seek tooltip
|
||||
// Toggle the regular seek tooltip
|
||||
if (this.player.elements.display.seekTooltip) {
|
||||
this.player.elements.display.seekTooltip.hidden = this.enabled;
|
||||
}
|
||||
@ -328,6 +328,15 @@ class PreviewThumbnails {
|
||||
this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.elements.thumb.container) {
|
||||
this.elements.thumb.container.remove();
|
||||
}
|
||||
if (this.elements.scrubbing.container) {
|
||||
this.elements.scrubbing.container.remove();
|
||||
}
|
||||
}
|
||||
|
||||
showImageAtCurrentTime() {
|
||||
if (this.mouseDown) {
|
||||
this.setScrubbingContainerSize();
|
||||
@ -561,6 +570,11 @@ class PreviewThumbnails {
|
||||
return height;
|
||||
}
|
||||
|
||||
// If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
|
||||
if (this.sizeSpecifiedInCSS) {
|
||||
return this.elements.thumb.imageContainer.clientHeight;
|
||||
}
|
||||
|
||||
return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
|
||||
}
|
||||
|
||||
@ -601,7 +615,7 @@ class PreviewThumbnails {
|
||||
}
|
||||
|
||||
determineContainerAutoSizing() {
|
||||
if (this.elements.thumb.imageContainer.clientHeight > 20) {
|
||||
if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
|
||||
// This will prevent auto sizing in this.setThumbContainerSizeAndPos()
|
||||
this.sizeSpecifiedInCSS = true;
|
||||
}
|
||||
@ -613,6 +627,12 @@ class PreviewThumbnails {
|
||||
const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
|
||||
this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
|
||||
this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
|
||||
} else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) {
|
||||
const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
|
||||
this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
|
||||
} else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) {
|
||||
const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
|
||||
this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
|
||||
}
|
||||
|
||||
this.setThumbContainerPos();
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
import { providers } from './config/types';
|
||||
import html5 from './html5';
|
||||
import media from './media';
|
||||
import PreviewThumbnails from './plugins/preview-thumbnails';
|
||||
import support from './support';
|
||||
import ui from './ui';
|
||||
import { createElement, insertElement, removeElement } from './utils/elements';
|
||||
@ -130,9 +131,20 @@ const source = {
|
||||
this.media.load();
|
||||
}
|
||||
|
||||
// Reload thumbnails
|
||||
if (this.previewThumbnails) {
|
||||
this.previewThumbnails.load();
|
||||
// Update previewThumbnails config & reload plugin
|
||||
if (!is.empty(input.previewThumbnails)) {
|
||||
Object.assign(this.config.previewThumbnails, input.previewThumbnails);
|
||||
|
||||
// cleanup previewThumbnails plugin if it was loaded
|
||||
if (this.previewThumbnails && this.previewThumbnails.loaded) {
|
||||
this.previewThumbnails.destroy();
|
||||
this.previewThumbnails = null;
|
||||
}
|
||||
|
||||
// create new instance if it is still enabled
|
||||
if (this.config.previewThumbnails.enabled) {
|
||||
this.previewThumbnails = new PreviewThumbnails(this);
|
||||
}
|
||||
}
|
||||
|
||||
// Update the fullscreen support
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user