aboutsummaryrefslogtreecommitdiffstats
path: root/docs/src
diff options
context:
space:
mode:
Diffstat (limited to 'docs/src')
-rw-r--r--docs/src/js/docs.js112
-rw-r--r--docs/src/less/components/examples.less74
-rwxr-xr-xdocs/src/sprite/icon-github.svg12
-rwxr-xr-xdocs/src/sprite/icon-twitter.svg11
-rwxr-xr-xdocs/src/sprite/icon-vimeo.svg9
-rwxr-xr-xdocs/src/sprite/icon-youtube.svg9
6 files changed, 154 insertions, 73 deletions
diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 518e4e0c..1e3c3206 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -6,74 +6,110 @@
// Setup the player
plyr.setup({
- debug: true,
- volume: 9,
- title: "Video demo",
- tooltips: true,
+ debug: true,
+ title: 'Video demo',
+ tooltips: true,
captions: {
defaultActive: true
},
onSetup: function() {
- if(!("media" in this)) {
- return;
- }
-
- var player = this,
- type = player.media.tagName.toLowerCase(),
- toggle = document.querySelector("[data-toggle='fullscreen']");
-
- console.log("✓ Setup done for <" + type + ">");
-
- if(type === "video" && toggle) {
- toggle.addEventListener("click", player.toggleFullscreen, false);
- }
+ console.log('✓ Setup done');
}
});
// Setup shr
shr.setup({
count: {
- classname: "btn-count"
+ classname: 'btn-count'
}
});
// General functions
(function() {
- // Tabs
- var tabs = document.querySelectorAll(".nav-panel a"),
- panels = document.querySelectorAll(".panels > .panel"),
- activeClass = "active";
+ var buttons = document.querySelectorAll('[data-source]');
- for (var i = tabs.length - 1; i >= 0; i--) {
- tabs[i].addEventListener("click", togglePanel);
+ // Bind to each button
+ for (var i = buttons.length - 1; i >= 0; i--) {
+ buttons[i].addEventListener('click', newSource);
}
- function togglePanel(event) {
- event.preventDefault();
+ // Set a new source
+ function newSource() {
+ var trigger = this,
+ type = trigger.getAttribute('data-source'),
+ player = document.querySelector('.plyr').plyr;
+
+ switch(type) {
+ case 'video':
+ player.source({
+ type: 'video',
+ title: 'Bug Buck Bunny',
+ sources: [{
+ src: 'https://cdn.selz.com/plyr/1.0/movie.mp4',
+ type: 'video/mp4'
+ },
+ {
+ src: 'https://cdn.selz.com/plyr/1.0/movie.webm',
+ type: 'video/webm'
+ }],
+ poster: 'https://cdn.selz.com/plyr/1.0/poster.jpg',
+ tracks: [{
+ kind: 'captions',
+ label: 'English',
+ srclang:'en',
+ src: 'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
+ default: true
+ }]
+ });
+ break;
+
+ case 'audio':
+ player.source({
+ type: 'audio',
+ title: '96 by Logistics',
+ sources: [{
+ src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
+ type: 'audio/mp3'
+ },
+ {
+ src: 'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg',
+ type: 'audio/ogg'
+ }]
+ });
+ break;
- var tab = event.target,
- panel = document.querySelector(tab.getAttribute("href"));
+ case 'youtube':
+ player.source({
+ type: 'youtube',
+ title: 'Enovato interview of Dan Cederholm for Made By',
+ sources: 'Au87oAJ2jeE'
+ });
+ break;
- for (var i = panels.length - 1; i >= 0; i--) {
- panels[i].classList.remove(activeClass);
+ case 'vimeo':
+ player.source({
+ type: 'vimeo',
+ title: 'Yosemite HD II',
+ sources: '87701971'
+ });
+ break;
}
- for (var x = tabs.length - 1; x >= 0; x--) {
- tabs[x].classList.remove(activeClass);
+ for (var x = buttons.length - 1; x >= 0; x--) {
+ buttons[x].classList.remove('active');
}
- panel.classList.add(activeClass);
- event.target.classList.add(activeClass);
+ event.target.classList.add('active');
}
})();
// Google analytics
// For demo site (http://[www.]plyr.io) only
-if(document.domain.indexOf("plyr.io") > -1) {
+if(document.domain.indexOf('plyr.io') > -1) {
(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,"script","//www.google-analytics.com/analytics.js","ga");
- ga("create", "UA-40881672-11", "auto");
- ga("send", "pageview");
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+ ga('create', 'UA-40881672-11', 'auto');
+ ga('send', 'pageview');
}
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index 97087b02..6312b642 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -2,54 +2,31 @@
// Examples
// ==========================================================================
+video,
+.plyr-video-embed {
+ border-radius: @border-radius-base;
+}
+.plyr-video-embed {
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+}
+
// Example players
-.example-audio .player,
-.example-video .player {
+.plyr {
margin: 0 auto @padding-base;
+ max-width: @example-width-video;
&-controls {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
-}
-.example-audio .player {
- max-width: @example-width-audio;
-
- &-controls {
- border-radius: @border-radius-base;
- }
- &-progress {
- border-radius: @border-radius-base @border-radius-base 0 0;
- overflow: hidden;
- }
-}
-// Base styles
-.example-video .player {
- max-width: @example-width-video;
-
video,
- iframe {
- border-radius: @border-radius-base;
- }
- iframe {
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- }
-}
-
-// Style full supported player
-.example-video .player-video,
-.example-video .player-youtube {
- video,
- iframe {
+ .plyr-video-embed {
border-radius: @border-radius-base @border-radius-base 0 0;
}
- iframe {
- -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
- }
&-fullscreen,
&.fullscreen-active {
max-width: none;
- .player-controls,
+ .plyr-controls,
video,
iframe {
border-radius: 0;
@@ -58,4 +35,31 @@
-webkit-mask-image: none;
}
}
+}
+.plyr-audio {
+ max-width: @example-width-audio;
+
+ .plyr-controls {
+ border-radius: @border-radius-base;
+ }
+ .plyr-progress {
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ overflow: hidden;
+ }
+}
+
+// Style full supported player
+.cite {
+ display: none;
+
+ .icon {
+ margin-right: (@padding-base / 4);
+ }
+}
+
+.plyr-video ~ ul .cite-video,
+.plyr-audio ~ ul .cite-audio,
+.plyr-youtube ~ ul .cite-youtube,
+.plyr-vimeo ~ ul .cite-vimeo {
+ display: block;
} \ No newline at end of file
diff --git a/docs/src/sprite/icon-github.svg b/docs/src/sprite/icon-github.svg
new file mode 100755
index 00000000..685dd746
--- /dev/null
+++ b/docs/src/sprite/icon-github.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+ C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
+ c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
+ c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
+ c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
+ c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"/>
+</svg>
diff --git a/docs/src/sprite/icon-twitter.svg b/docs/src/sprite/icon-twitter.svg
new file mode 100755
index 00000000..b3f644b1
--- /dev/null
+++ b/docs/src/sprite/icon-twitter.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+ <title>Twitter</title>
+<path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
+ C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
+ c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
+ c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"/>
+</svg>
diff --git a/docs/src/sprite/icon-vimeo.svg b/docs/src/sprite/icon-vimeo.svg
new file mode 100755
index 00000000..83dd3dc0
--- /dev/null
+++ b/docs/src/sprite/icon-vimeo.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
+ C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
+ c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"/>
+</svg>
diff --git a/docs/src/sprite/icon-youtube.svg b/docs/src/sprite/icon-youtube.svg
new file mode 100755
index 00000000..8b5d6897
--- /dev/null
+++ b/docs/src/sprite/icon-youtube.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
+ s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
+ M6,11V5l5,3L6,11z"/>
+</svg>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 07:47:01 +0000