1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
// ==========================================================================
// Docs example
// ==========================================================================
/*global plyr, shr*/
// Setup the player
plyr.setup('.js-media-player', {
debug: true,
title: 'Video demo',
tooltips: true,
captions: {
defaultActive: true
},
onSetup: function() {
console.log('✓ Setup done');
}
});
// Setup shr
shr.setup({
count: {
classname: 'btn__count'
}
});
// General functions
(function() {
var buttons = document.querySelectorAll('[data-source]');
// Bind to each button
for (var i = buttons.length - 1; i >= 0; i--) {
buttons[i].addEventListener('click', newSource);
}
// Set a new source
function newSource() {
var trigger = this,
type = trigger.getAttribute('data-source'),
player = document.querySelector('.js-media-player').plyr;
switch(type) {
case 'video':
player.source({
type: 'video',
title: 'View From A Blue Moon',
sources: [{
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
type: 'video/mp4'
},
{
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
type: 'video/webm'
}],
poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.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: 'Kishi Bashi – “It All Began With A Burst”',
sources: [{
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
type: 'audio/mp3'
},
{
src: 'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
type: 'audio/ogg'
}]
});
break;
case 'youtube':
player.source({
type: 'video',
title: 'View From A Blue Moon',
sources: [{
src: 'bTqVqk7FSmY',
type: 'youtube'
}]
});
break;
case 'vimeo':
player.source({
type: 'video',
title: 'View From A Blue Moon',
sources: [{
src: '143418951',
type: 'vimeo'
}]
});
break;
}
for (var x = buttons.length - 1; x >= 0; x--) {
buttons[x].parentElement.classList.remove('active');
}
event.target.parentElement.classList.add('active');
}
})();
// Google analytics
// For demo site (http://[www.]plyr.io) only
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');
}
|
