diff --git a/bundles.json b/bundles.json index 850a0b55..c123e5b0 100644 --- a/bundles.json +++ b/bundles.json @@ -4,7 +4,7 @@ "plyr.css": ["src/less/plyr.less"] }, "sass": { - "plyr.css": ["src/less/plyr.sass"] + "plyr.css": ["src/sass/plyr.sass"] }, "js": { "plyr.js": ["src/js/plyr.js"] diff --git a/changelog.md b/changelog.md index 45de7747..c3c6c931 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,86 @@ # Changelog +## v1.5.21 +- Bug fix for embeds: `play` not being defined (fixes #185 and #186) + +## v1.5.20 +- Bug fix for autoplay option + +## v1.5.19 +- Fix for accessing `embed` property after `ready` event fired + +## v1.5.18 +- Added 'ready' event for initial setup complete or source change occurs +- Fixed SASS stylesheet references to transparentize +- Added default font stack to controls +- Docs fixes inc controls HTML (fixes #180) + +## v1.5.17 +- Expose YouTube and Vimeo API (docs update required) (Fixes #176) +- Auto set title based on YouTube getVideoData() title property +- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end + +## v1.5.16 +- Cancel requests on source change (Fixes #174) + +## v1.5.15 +- Fix for CustomEvent polyfill and related bug (See #172) + +## v1.5.14 +- Volume storage fix (Fixes #171) + +## v1.5.13 +- Fix for manual caption rendering + +## v1.5.12 +- Added a duration option to pass the duration of the file +- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example) +- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events +- Firefox bug fix for event not defined + +## v1.5.11 +- iOS embed bug fixes (fixes #166) +- Hide IE/Edge tooltip (since we have a styled one) (fixes #160) +- SASS bug fix for default values (fixes #158) + +## v1.5.9 + v1.5.10 +- NPM bug fixes + +## v1.5.8 +- Fix for touch device seek tooltip +- Seek improvements + +## v1.5.7 +- Fix for control tooltips always showing + +## v1.5.6 +- Seek tooltip (option for tooltips changed, please check docs) +- SASS compile error fixes (fixes #148) +- Fullscreen fixes for controls not always hiding/showing (fixes #149) +- Screen reader icon fixes (title was being read twice due to the tooltip/hidden label) + +## v1.5.5 +- Fixed controls.md example +- Bug fix for docs error page +- Bug fix for controls tooltips + +## v1.5.4 +- Minor bug fix for clicking video to play/pause after source change + +## v1.5.3 +- Minor bug fix for occasional display of 0:00 as the media duration + +## v1.5.2 +- `handlers` option renamed to `listeners` +- Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs) +- Removed onSetup config option (use the 'setup' event instead, plyr element is event.plyr) +- Style bug fixes +- Vimeo seek bug fix (requires whole seconds when seeking) +- Fix for fullscreen player (using class hook, not browser fullscreen) + +## v1.5.1 +- Fix for event listeners being duplicated on source change + # v1.5.0 - Vimeo support (fixes #8) - New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118) diff --git a/controls.md b/controls.md index c58c966b..9bde7a17 100644 --- a/controls.md +++ b/controls.md @@ -46,65 +46,71 @@ You can include only the controls you need when specifying custom html. This is an example `html` option with all controls. ```javascript -["
", - "
", - "", - "", - "", +var controls = ["
", + "
", + "", + "", + "", "0% played", "", - "", + "", "0% buffered", "", + "00:00", "
", - "", - "", - "", - "", - "", - "", - "", - "Current time", - "00:00", + "", + "Current time", + "00:00", "", - "", - "Duration", - "00:00", + "", + "Duration", + "00:00", "", "", - "", - "", - "", - "", - "", - "", "", "
"].join("\n"); + +// Setup the player +plyr.setup('.js-player', { + html: controls +}); ``` diff --git a/docs/error.html b/docs/error.html index 7c7bc14a..f867c915 100644 --- a/docs/error.html +++ b/docs/error.html @@ -12,7 +12,7 @@

Doh.

Looks like something went wrong.

- Back to plyr.io + Back to plyr.io
diff --git a/docs/index.html b/docs/index.html index 66ea9adb..2e6dbde0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -58,7 +58,7 @@ - + Download diff --git a/docs/poster.jpg b/docs/poster.jpg deleted file mode 100644 index 383dbf01..00000000 Binary files a/docs/poster.jpg and /dev/null differ diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js index 11429122..11cd6ac6 100644 --- a/docs/src/js/docs.js +++ b/docs/src/js/docs.js @@ -6,26 +6,69 @@ // Setup the player plyr.setup('.js-media-player', { - debug: true, - title: 'Video demo', - tooltips: true, - captions: { - defaultActive: true + debug: true, + title: 'Video demo', + tooltips: { + controls: true }, - onSetup: function() { - console.log('✓ Setup done'); + captions: { + defaultActive: true } }); // General functions (function() { - var buttons = document.querySelectorAll('[data-source]'); + var buttons = document.querySelectorAll('[data-source]'), + types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo' + }, + currentType = window.location.hash.replace('#', ''), + historySupport = (window.history && window.history.pushState); // Bind to each button for (var i = buttons.length - 1; i >= 0; i--) { - buttons[i].addEventListener('click', newSource); + buttons[i].addEventListener('click', function() { + var type = this.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + history.pushState({ 'type': type }, '', '#' + type); + } + }); } + // List for backwards/forwards + window.addEventListener('popstate', function(event) { + if(event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if(historySupport) { + var video = !currentType.length; + + // If there's no current type set, assume video + if(video) { + currentType = types.video; + } + + // Replace current history state + if(currentType in types) { + history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType)); + } + + // If it's not video, load the source + if(currentType !== types.video) { + newSource(currentType, true); + } + } + + // Toggle class on an element function toggleClass(element, className, state) { if (element) { if (element.classList) { @@ -39,13 +82,17 @@ plyr.setup('.js-media-player', { } // Set a new source - function newSource() { - var trigger = this, - type = trigger.getAttribute('data-source'), - player = document.querySelector('.js-media-player').plyr; + function newSource(type, init) { + // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video + if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) { + return; + } + + // Get plyr instance + var player = document.querySelector('.js-media-player').plyr; switch(type) { - case 'video': + case types.video: player.source({ type: 'video', title: 'View From A Blue Moon', @@ -62,13 +109,13 @@ plyr.setup('.js-media-player', { kind: 'captions', label: 'English', srclang:'en', - src: 'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt', + src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt', default: true }] }); break; - case 'audio': + case types.audio: player.source({ type: 'audio', title: 'Kishi Bashi – “It All Began With A Burst”', @@ -83,7 +130,7 @@ plyr.setup('.js-media-player', { }); break; - case 'youtube': + case types.youtube: player.source({ type: 'video', title: 'View From A Blue Moon', @@ -94,7 +141,7 @@ plyr.setup('.js-media-player', { }); break; - case 'vimeo': + case types.vimeo: player.source({ type: 'video', title: 'View From A Blue Moon', @@ -106,11 +153,16 @@ plyr.setup('.js-media-player', { break; } + // Set the current type for next time + currentType = type; + + // Remove active classes for (var x = buttons.length - 1; x >= 0; x--) { toggleClass(buttons[x].parentElement, 'active', false); } - toggleClass((event.target || event.srcElement).parentElement, 'active', true); + // Set active on parent + toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true); } })(); diff --git a/gulpfile.js b/gulpfile.js index ca7c0de5..5083a75b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -214,8 +214,10 @@ options = { // If aws is setup if("cdn" in aws) { - var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"), - localpath = new RegExp("(\.\.\/)?dist", "gi"); + var regex = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)", + cdnpath = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"), + semver = new RegExp("v" + regex, "gi"), + localpath = new RegExp("(\.\.\/)?dist", "gi"); } // Publish version to CDN bucket @@ -244,6 +246,11 @@ gulp.task("docs", function () { .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version)) .pipe(gulp.dest(root)); + // Replace versioned files in plyr.js + gulp.src(path.join(root, "src/js/plyr.js")) + .pipe(replace(semver, "v" + version)) + .pipe(gulp.dest(path.join(root, "src/js/"))); + // Replace local file paths with remote paths in docs // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js" gulp.src([paths.docs.root + "*.html"]) @@ -253,6 +260,7 @@ gulp.task("docs", function () { // Upload error.html to cdn (as well as docs site) gulp.src([paths.docs.root + "error.html"]) + .pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version)) .pipe(gzip()) .pipe(s3(aws.cdn, options.docs)); }); diff --git a/package.json b/package.json index 751ce67e..3a2d0d95 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,9 @@ { "name": "plyr", - "version": "1.5.0", - "description": "A simple HTML5 media player using custom controls", + "version": "1.5.21", + "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "homepage": "http://plyr.io", - "main": "gulpfile.js", + "main": "src/js/plyr.js", "dependencies": {}, "devDependencies": { "gulp": "^3.9.0", @@ -24,9 +24,6 @@ "gulp-util": "^3.0.7", "run-sequence": "^1.1.5" }, - "scripts": { - "preinstall": "npm install -g gulp" - }, "keywords": [ "HTML5 Video", "HTML5 Audio", @@ -36,8 +33,15 @@ "type": "git", "url": "git://github.com/selz/plyr.git" }, - "authors": [ - "Sam Potts " - ], - "license": "MIT" + "license": "MIT", + "bugs": { + "url": "https://github.com/selz/plyr/issues" + }, + "directories": { + "doc": "docs" + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Sam Potts (selz.com)" } diff --git a/readme.md b/readme.md index d79885cb..4c6695c8 100644 --- a/readme.md +++ b/readme.md @@ -1,32 +1,34 @@ # Plyr -A simple, accessible HTML5 media player. +A simple, accessible and customizable HTML5, YouTube and Vimeo media player. -Checkout the [demo](http://plyr.io). +[Checkout the demo](https://plyr.io) -[![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io) +[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](https://plyr.io) ## Why? -We wanted a lightweight, accessible and customizable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. +We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. ## Features -- **Accessible** - full support for VTT captions and screen readers. -- **Lightweight** - just 8KB minified and gzipped. -- **[Customisable](#html)** - make the player look how you want with the markup you want. -- **Semantic** - uses the *right* elements. `` for volume and `` for progress and well, `
``` -For YouTube, Plyr uses the standard YouTube API markup (an empty `
`): +For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `
`): ```html
-
+
+
+``` +```html +
+
``` @@ -148,6 +167,11 @@ You'll notice the `crossorigin` attribute on the example `