Wiki source code of VideoTemplate

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