Wiki source code of VideoTemplate

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