Skip to Content

Wijzigen voor document Speler voor video's

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

Samenvatting

Details

XWiki.JavaScriptExtension[0]
cache
... ... @@ -1,1 +1,0 @@
1 -long
code
... ... @@ -1,55 +1,0 @@
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,1 +1,0 @@
1 -Hoofdstukken bij clips
parse
... ... @@ -1,1 +1,0 @@
1 -Nee
use
... ... @@ -1,1 +1,0 @@
1 -onDemand
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,65 +1,0 @@
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-clip figcaption {
53 - margin-top: 0.4em;
54 - color: #666;
55 - font-size: 0.9em;
56 -}
57 -.wb-clip-let {
58 - color: #8a5a00;
59 -}
60 -.wb-clip-ontbreekt {
61 - padding: 1em;
62 - border: 1px dashed #ccc;
63 - color: #666;
64 -}
65 -
Content Type
... ... @@ -1,1 +1,0 @@
1 -CSS
Naam
... ... @@ -1,1 +1,0 @@
1 -Opmaak speler
Inhoud verwerken
... ... @@ -1,1 +1,0 @@
1 -Nee
Gebruik deze uitbreiding
... ... @@ -1,1 +1,0 @@
1 -onDemand
XWiki.XWikiRights[0]
allow
... ... @@ -1,1 +1,0 @@
1 -Sta toe
levels
... ... @@ -1,1 +1,0 @@
1 -view
users
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiGuest
XWiki.XWikiRights[1]
allow
... ... @@ -1,1 +1,0 @@
1 -Sta toe
groups
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiAllGroup
levels
... ... @@ -1,1 +1,0 @@
1 -view
XWiki.XWikiRights[2]
allow
... ... @@ -1,1 +1,0 @@
1 -Sta toe
groups
... ... @@ -1,1 +1,0 @@
1 -XWiki.XWikiAdminGroup
levels
... ... @@ -1,1 +1,0 @@
1 -view,edit,comment,script