Skip to Content

Wijzigen voor document Speler voor video's

Laatst gewijzigd door Jeeves de Butler op 09-10-2026 10:34
Van versie 1.1
gewijzigd door Jeeves de Butler
op 06-10-2026 04:09
Opmerking bij wijziging: Er is geen opmerking bij deze versie
Naar versie 9.1
gewijzigd door Jeeves de Butler
op 07-10-2026 10:27
Opmerking bij wijziging: Er is geen opmerking bij deze versie

Samenvatting

Details

Paginaeigenschappen
Inhoud
... ... @@ -40,13 +40,30 @@
40 40   #foreach ($p in $tc.split(':'))
41 41   #set ($sec = $sec * 60 + $mathtool.toInteger($p))
42 42   #end
43 - #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $line.replaceAll('^\S+\s+', '')}))
43 + #set ($label = $line.replaceAll('^\S+\s+', ''))
44 + ## Optional reference after the label: "mm:ss Label >> Linktekst | adres" (adres: https://... or /...)
45 + #set ($refText = '')
46 + #set ($refUrl = '')
47 + #set ($at = $label.indexOf(' >> '))
48 + #if ($at > 0)
49 + #set ($ref = $label.substring($at + 4).trim())
50 + #set ($label = $label.substring(0, $at).trim())
51 + #set ($bar = $ref.lastIndexOf(' | '))
52 + #if ($bar > 0)
53 + #set ($candidate = $ref.substring($bar + 3).trim())
54 + #if ($candidate.matches('^(https://|/)[^\s"<>]+$'))
55 + #set ($refText = $ref.substring(0, $bar).trim())
56 + #set ($refUrl = $candidate)
57 + #end
58 + #end
59 + #end
60 + #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $label, 'refText': $refText, 'refUrl': $refUrl}))
44 44   #end
45 45  #end
46 46  #if ($items.size() > 0)
47 47   <ol class="wb-hoofdstukken" aria-label="Hoofdstukken">
48 48   #foreach ($i in $items)
49 - <li><button type="button" data-t="$i.t"><span class="wb-t">$escapetool.xml($i.tc)</span><span class="wb-label">$escapetool.xml($i.label)</span></button></li>
66 + <li><button type="button" data-t="$i.t"><span class="wb-t">$escapetool.xml($i.tc)</span><span class="wb-label">$escapetool.xml($i.label)</span></button>#if ("$!i.refUrl" != '')<a class="wb-ref" href="$escapetool.xml($i.refUrl)">$escapetool.xml($i.refText)</a>#{end}</li>
50 50   #end
51 51   </ol>
52 52  #end
XWiki.JavaScriptExtension[0]
cache
... ... @@ -1,0 +1,1 @@
1 +long
code
... ... @@ -1,0 +1,55 @@
1 +// Syntess Atrium leren: chapter list under each clip. A click jumps to that moment and plays; while playing, the
2 +// current chapter is highlighted. A link to #clip-<nummer>@m:ss opens the page at that clip and moment.
3 +(function () {
4 + function seconds(tc) {
5 + return tc.split(':').reduce(function (total, part) { return total * 60 + parseInt(part, 10); }, 0);
6 + }
7 +
8 + function setup(fig) {
9 + if (fig.getAttribute('data-wb-klaar')) return;
10 + fig.setAttribute('data-wb-klaar', '1');
11 + var video = fig.querySelector('video');
12 + var buttons = Array.prototype.slice.call(fig.querySelectorAll('.wb-hoofdstukken button'));
13 + if (!video || !buttons.length) return;
14 +
15 + buttons.forEach(function (button) {
16 + button.addEventListener('click', function () {
17 + video.currentTime = Number(button.getAttribute('data-t'));
18 + video.play();
19 + });
20 + });
21 +
22 + video.addEventListener('timeupdate', function () {
23 + var current = null;
24 + buttons.forEach(function (button) {
25 + if (Number(button.getAttribute('data-t')) <= video.currentTime + 0.25) current = button;
26 + });
27 + buttons.forEach(function (button) {
28 + var active = button === current;
29 + button.classList.toggle('wb-actief', active);
30 + if (active) button.setAttribute('aria-current', 'true'); else button.removeAttribute('aria-current');
31 + });
32 + });
33 + }
34 +
35 + function openFromHash() {
36 + var match = decodeURIComponent(location.hash).match(/^#clip-([0-9.]+)@([0-9:]+)$/);
37 + if (!match) return;
38 + var fig = document.getElementById('clip-' + match[1]);
39 + var video = fig && fig.querySelector('video');
40 + if (!video) return;
41 + var start = seconds(match[2]);
42 + var jump = function () { video.currentTime = start; };
43 + if (video.readyState >= 1) jump(); else video.addEventListener('loadedmetadata', jump, { once: true });
44 + fig.scrollIntoView({ block: 'start' });
45 + }
46 +
47 + function init() {
48 + Array.prototype.forEach.call(document.querySelectorAll('figure.wb-clip'), setup);
49 + openFromHash();
50 + }
51 +
52 + if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); else init();
53 + window.addEventListener('hashchange', openFromHash);
54 +})();
55 +
name
... ... @@ -1,0 +1,1 @@
1 +Hoofdstukken bij clips
parse
... ... @@ -1,0 +1,1 @@
1 +Nee
use
... ... @@ -1,0 +1,1 @@
1 +onDemand
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,81 @@
1 +/* Syntess Atrium leren: player with chapter list (Wardenburg.Code.AtriumClips) */
2 +.wb-clip {
3 + margin: 0.5em 0 2em;
4 + max-width: 960px;
5 +}
6 +.wb-clip video {
7 + display: block;
8 + width: 100%;
9 + aspect-ratio: 16 / 9;
10 + background: #000;
11 + border: 1px solid #ddd;
12 +}
13 +.wb-hoofdstukken {
14 + list-style: none;
15 + margin: 0;
16 + padding: 0;
17 + border: 1px solid #ddd;
18 + border-top: 0;
19 +}
20 +.wb-hoofdstukken li {
21 + margin: 0;
22 + border-top: 1px solid #eee;
23 +}
24 +.wb-hoofdstukken li:first-child {
25 + border-top: 0;
26 +}
27 +.wb-hoofdstukken button {
28 + display: flex;
29 + gap: 0.9em;
30 + width: 100%;
31 + padding: 0.45em 0.75em;
32 + border: 0;
33 + background: #fff;
34 + color: inherit;
35 + font: inherit;
36 + text-align: left;
37 + cursor: pointer;
38 +}
39 +.wb-hoofdstukken button:hover,
40 +.wb-hoofdstukken button:focus-visible {
41 + background: #f6f6f6;
42 +}
43 +.wb-hoofdstukken button.wb-actief {
44 + background: #FFF0DA;
45 + box-shadow: inset 4px 0 0 #FFB447;
46 +}
47 +.wb-hoofdstukken .wb-t {
48 + min-width: 3.2em;
49 + color: #666;
50 + font-variant-numeric: tabular-nums;
51 +}
52 +.wb-hoofdstukken .wb-ref {
53 + display: block;
54 + /* 4.85em of the button text, measured in this smaller font: lines up with the chapter name */
55 + padding: 0 0.75em 0.45em 5.39em;
56 + font-size: 0.9em;
57 +}
58 +.wb-hoofdstukken .wb-ref::before {
59 + content: "Zie";
60 + display: inline-block;
61 + margin-right: 0.3em;
62 + color: #666;
63 +}
64 +.wb-hoofdstukken button.wb-actief + .wb-ref {
65 + background: #FFF0DA;
66 + box-shadow: inset 4px 0 0 #FFB447;
67 +}
68 +.wb-clip figcaption {
69 + margin-top: 0.4em;
70 + color: #666;
71 + font-size: 0.9em;
72 +}
73 +.wb-clip-let {
74 + color: #8a5a00;
75 +}
76 +.wb-clip-ontbreekt {
77 + padding: 1em;
78 + border: 1px dashed #ccc;
79 + color: #666;
80 +}
81 +
Content Type
... ... @@ -1,0 +1,1 @@
1 +CSS
Naam
... ... @@ -1,0 +1,1 @@
1 +Opmaak speler
Inhoud verwerken
... ... @@ -1,0 +1,1 @@
1 +Nee
Gebruik deze uitbreiding
... ... @@ -1,0 +1,1 @@
1 +onDemand
XWiki.XWikiRights[0]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
levels
... ... @@ -1,0 +1,1 @@
1 +view
users
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiGuest
XWiki.XWikiRights[1]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAllGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view
XWiki.XWikiRights[2]
allow
... ... @@ -1,0 +1,1 @@
1 +Sta toe
groups
... ... @@ -1,0 +1,1 @@
1 +XWiki.XWikiAdminGroup
levels
... ... @@ -1,0 +1,1 @@
1 +view,edit,comment,script