Wiki source code of VideoTemplate

Last modified by Josef Vencl on 2020/10/08 16:31
Show last authors
1 Nová videostránka.
2
3 Odkaz na video: {{html}}<a data-play="player3" data-where="video-id-release">13:21</a>{{/html}}
4
5 {{html}}
6 <div id="video-id-test" class="video-place" data-default-player="player3" data-play-from="3"></div>
7 {{/html}}
8
9 Obrazovka pro video
10 {{html}}
11 <iframe id="session-3-id" src="https://player.vimeo.com/video/460966064" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
12 {{/html}}
13
14 Javascript a nastavení
15 {{html clean="false"}}
16 <script>
17 var eduPlayers = {};
18 var eduControls = {};
19 if(requirejs && requirejs.s && requirejs.s.contexts && requirejs.s.contexts._ && requirejs.s.contexts._.config){
20 requirejs.s.contexts._.config.paths.vimeo = ['//player.vimeo.com/api/player'];
21 } else {
22 requirejs.config({
23 paths: {vimeo: ['//player.vimeo.com/api/player']}
24 });
25 }
26 // alert("works");
27 // (function(){
28 // 'use strict';
29
30 require(['vimeo', 'jquery'], function(player, jQuery) {
31
32 eduPlayers = {
33 player1: new player('session-1-id'),
34 player2: new player('session-2-id'),
35 player3: new player('session-3-id')
36 }
37 eduControls = {
38 go: go,
39 appendVideoIn: appendVideoIn,
40 appendVideoAndGo: appendVideoAndGo
41 }
42 videoPlaces = {};
43
44 jQuery(".video-place").each(function(){
45 jQuery(this)
46 .click(function(event){
47 appendVideoIn(event.target.getAttribute('data-default-player'), event.target);
48 if (event.target.hasAttribute('data-play-from')){
49 eduControls.go(event.target.getAttribute('data-default-player'), parseInt(event.target.getAttribute('data-play-from')));
50 }
51 })
52 .change(function(){
53 if (jQuery(this).is(":empty")){
54 jQuery(this).text("Kliknutím zobrazíte přehrávač");
55 }
56 });
57 videoPlaces[this.id] = this;
58 })
59 jQuery('a:contains("[")').addClass("link");
60 jQuery('a[data-play]').each(function(){
61 var player = this.getAttribute('data-play');
62 if (eduPlayers[player] == null){
63 throw new Error (`Player unknown at ${this.id} ( ${player}, ${from}, ${where} )`)
64 }
65 var from = toSecs(this.textContent);
66 var where = this.getAttribute('data-where');
67 var func = this.getAttribute('data-action'); // NOT ACTIVE YET
68 var jqel = jQuery(this);
69 var callbackChain = goCallback(player, from, playCallback(player));
70 jqel.click(function(){
71 if (videoPlaces[where] != null){
72 appendVideoIn(player, videoPlaces[where])
73 }
74 callbackChain();
75 })
76 })
77
78 function appendVideoAndGo(playerName, targetSelector, sec){
79 appendVideoIn(playerName, jQuery(targetSelector)[0]);
80 go(playerName, sec, play(playerName));
81 }
82
83 function appendVideoIn(playerName, target){
84 if (eduPlayers[playerName] == null){
85 throw new Error(`${playerName} is unknown player name.`);
86 }
87 if (jQuery(target).find(eduPlayers[playerName].element).length == 0){
88 jQuery(target).empty(); // TODO check target contains player and back it home
89 jQuery(target).append(eduPlayers[playerName].element);
90 }
91 }
92
93 function toSecs(mark){
94 var drops = mark.split(":");
95 if (drops.length == 1) return parseInt(drops[0]);
96 if (drops.length == 2) return parseInt(drops[0])*60 + parseInt(drops[1]);
97 if (drops.length == 3) return parseInt(drops[0])*3600 + parseInt(drops[1])*60 + parseInt(drops[2]);
98 throw new Error (`Bad time mark ${mark}`)
99 }
100
101 function go(playerName, sec, goCallback){
102 if (eduPlayers[playerName] == null){
103 throw new Error(playerName + " is unknown player name.");
104 }
105
106 var aPlayer = eduPlayers[playerName];
107 aPlayer.setCurrentTime(sec)
108 .then(function(seconds) {
109 if(goCallback){
110 goCallback();
111 }
112 })
113 .catch(function(error) {
114 switch (error.name) {
115 case 'RangeError':
116 throw new Error(error);
117 break;
118 default:
119 break;
120 } }) }
121
122 function goCallback(playerName, sec, callback){
123 if (eduPlayers[playerName] == null) throw new Error(playerName + " is unknown player name.");
124
125 return function(){
126 eduPlayers[playerName].setCurrentTime(sec)
127 .then(function(seconds) {
128 if(callback) callback()})
129 .catch (function(e){
130 throw new Error ("Go callback error: ${playerName}, ${sec}", e)
131 })
132 }
133 }
134
135 function play(playerName){
136 if (eduPlayers[playerName] == null){
137 throw new Error(`${playerName} is unknown player name.`);
138 }
139 eduPlayers[playerName].play();
140 }
141
142 function playCallback(playerName, callback){
143 if (eduPlayers[playerName] == null){
144 throw new Error(playerName + " is unknown player name.");
145 }
146 return function(){
147 eduPlayers[playerName].play()
148 .then(function(){
149 if (callback) callback()})
150 .catch(function(e){
151 throw new Error ("Play callback error", e);
152 })
153 }
154 }
155
156 //});
157 //var regex = new RegExp("[0-9]"); // expression here
158
159 //$("#id a").filter(function () {
160 // return regex.test($(this).text());
161 //});
162
163 })
164 </script>
165 <style>
166 .video-place {
167 min-height: 40px;
168 background-color: green;
169 margin: 20px 0;
170 color: white;
171 cursor: pointer;
172 }
173 a.link, a[data-play], a[data-play] {
174 text-decoration: underline;
175 cursor: pointer;
176 position: relative;
177 top: -0.5em;
178 font-size: 80%;
179 }
180 a[data-play]:before, a[data-play]:before {
181 content: '[';
182 }
183 a[data-play]:after, a[data-play]:after {
184 content: ']';
185 }
186 a[data-play]:hover {
187 color: #3173b5;
188 }
189 </style>
190 {{/html}}