Wiki broncode van Speler voor video's
Version 14.1 by Jeeves de Butler on 09-10-2026 10:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{velocity}} | ||
| 2 | ## The standard video player of the Kennisbank (despite its name, for every video, not only Syntess Atrium): one | ||
| 3 | ## figure per Wardenburg.Code.AtriumClipClass object of the including page (sorted on positie), with an HTML5 player, | ||
| 4 | ## a clickable chapter list, optional subtitles (<video>.nl.vtt) and a collapsible transcript. The video itself is an | ||
| 5 | ## attachment of the including page, so it is only visible to people who may read that page. | ||
| 6 | ## Used through {{include reference="Wardenburg.Code.AtriumClips"/}}; the Syntess source line only shows for Syntess clips. | ||
| 7 | #set ($discard = $xwiki.ssx.use('Wardenburg.Code.AtriumClips')) | ||
| 8 | #set ($discard = $xwiki.jsx.use('Wardenburg.Code.AtriumClips')) | ||
| 9 | #set ($clips = []) | ||
| 10 | #foreach ($o in $doc.getObjects('Wardenburg.Code.AtriumClipClass')) | ||
| 11 | #set ($discard = $clips.add({ | ||
| 12 | 'positie': $mathtool.toInteger("$!o.getValue('positie')"), | ||
| 13 | 'nummer': "$!o.getValue('nummer')", | ||
| 14 | 'titel': "$!o.getValue('titel')", | ||
| 15 | 'bijlage': "$!o.getValue('bijlage')", | ||
| 16 | 'poster': "$!o.getValue('poster')", | ||
| 17 | 'duur': "$!o.getValue('duur')", | ||
| 18 | 'showcase': "$!o.getValue('vimeo_showcase')", | ||
| 19 | 'geupload': "$!o.getValue('geupload')", | ||
| 20 | 'hoofdstukken': "$!o.getValue('hoofdstukken')", | ||
| 21 | 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')", | ||
| 22 | 'tekst': "$!o.getValue('tekst')" | ||
| 23 | })) | ||
| 24 | #end | ||
| 25 | #foreach ($c in $collectiontool.sort($clips, 'positie')) | ||
| 26 | |||
| 27 | === $services.rendering.escape("$c.nummer $c.titel", $doc.syntax) === | ||
| 28 | |||
| 29 | {{html clean="false"}} | ||
| 30 | <figure class="wb-clip" id="clip-$escapetool.xml($c.nummer)"> | ||
| 31 | #if ("$!c.bijlage" != '' && $doc.getAttachment($c.bijlage)) | ||
| 32 | ## Subtitles: an attachment <video name>.nl.vtt next to the video, off by default (CC button in the player) | ||
| 33 | #set ($vtt = $c.bijlage.replaceAll('\.mp4$', '.nl.vtt')) | ||
| 34 | <video controls preload="metadata" playsinline src="$doc.getAttachmentURL($c.bijlage)"#if ("$!c.poster" != '' && $doc.getAttachment($c.poster)) poster="$doc.getAttachmentURL($c.poster)"#{end}>#if ($vtt != $c.bijlage && $doc.getAttachment($vtt))<track kind="subtitles" srclang="nl" label="Nederlands" src="$doc.getAttachmentURL($vtt)">#{end}</video> | ||
| 35 | #else | ||
| 36 | <p class="wb-clip-ontbreekt">De video ontbreekt nog op deze pagina.</p> | ||
| 37 | #end | ||
| 38 | #set ($items = []) | ||
| 39 | #foreach ($raw in $c.hoofdstukken.split('\r?\n')) | ||
| 40 | #set ($line = $raw.trim()) | ||
| 41 | #if ($line.matches('^\d{1,2}:\d{2}(:\d{2})?\s+.+$')) | ||
| 42 | #set ($tc = $line.replaceAll('^(\S+)\s+.*$', '$1')) | ||
| 43 | #set ($sec = 0) | ||
| 44 | #foreach ($p in $tc.split(':')) | ||
| 45 | #set ($sec = $sec * 60 + $mathtool.toInteger($p)) | ||
| 46 | #end | ||
| 47 | #set ($label = $line.replaceAll('^\S+\s+', '')) | ||
| 48 | ## Optional reference after the label: "mm:ss Label >> Linktekst | adres" (adres: https://... or /...) | ||
| 49 | #set ($refText = '') | ||
| 50 | #set ($refUrl = '') | ||
| 51 | #set ($at = $label.indexOf(' >> ')) | ||
| 52 | #if ($at > 0) | ||
| 53 | #set ($ref = $label.substring($at + 4).trim()) | ||
| 54 | #set ($label = $label.substring(0, $at).trim()) | ||
| 55 | #set ($bar = $ref.lastIndexOf(' | ')) | ||
| 56 | #if ($bar > 0) | ||
| 57 | #set ($candidate = $ref.substring($bar + 3).trim()) | ||
| 58 | #if ($candidate.matches('^(https://|/)[^\s"<>]+$')) | ||
| 59 | #set ($refText = $ref.substring(0, $bar).trim()) | ||
| 60 | #set ($refUrl = $candidate) | ||
| 61 | #end | ||
| 62 | #end | ||
| 63 | #end | ||
| 64 | #set ($discard = $items.add({'t': $sec, 'tc': $tc, 'label': $label, 'refText': $refText, 'refUrl': $refUrl})) | ||
| 65 | #end | ||
| 66 | #end | ||
| 67 | #if ($items.size() > 0) | ||
| 68 | <ol class="wb-hoofdstukken" aria-label="Hoofdstukken"> | ||
| 69 | #foreach ($i in $items) | ||
| 70 | <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> | ||
| 71 | #end | ||
| 72 | </ol> | ||
| 73 | #end | ||
| 74 | <figcaption> | ||
| 75 | #if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{end} | ||
| 76 | #if ("$!c.showcase" != '')Bron: Syntess Atrium Zelfstudie, <a href="https://vimeo.com/showcase/$escapetool.url($c.showcase)" target="_blank" rel="noopener">alle clips van deze paragraaf</a>.#{end} | ||
| 77 | #if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end} | ||
| 78 | </figcaption> | ||
| 79 | #if ("$!c.tekst" != '') | ||
| 80 | ## Transcript (field tekst, one line per sentence as "[mm:ss] text"); the field is searchable in the Kennisbank | ||
| 81 | <details class="wb-tekst"> | ||
| 82 | <summary>Uitgeschreven tekst</summary> | ||
| 83 | <p class="wb-tekst-let">Automatisch uitgeschreven uit de gesproken tekst; er kunnen fouten in staan.</p> | ||
| 84 | <ol> | ||
| 85 | #foreach ($raw in $c.tekst.split('\r?\n')) | ||
| 86 | #set ($line = $raw.trim()) | ||
| 87 | #if ($line.matches('^\[\d{1,2}:\d{2}\]\s*.+$')) | ||
| 88 | #set ($tc = $line.replaceAll('^\[(\d{1,2}:\d{2})\].*$', '$1')) | ||
| 89 | #set ($parts = $tc.split(':')) | ||
| 90 | #set ($sec = $mathtool.toInteger($parts[0]) * 60 + $mathtool.toInteger($parts[1])) | ||
| 91 | <li><button type="button" data-t="$sec">$escapetool.xml($tc)</button> $escapetool.xml($line.replaceAll('^\[\d{1,2}:\d{2}\]\s*', ''))</li> | ||
| 92 | #end | ||
| 93 | #end | ||
| 94 | </ol> | ||
| 95 | </details> | ||
| 96 | #end | ||
| 97 | </figure> | ||
| 98 | {{/html}} | ||
| 99 | #end | ||
| 100 | {{/velocity}} |