Wijzigen voor document Speler voor video's

Samenvatting

• Paginaeigenschappen (2 gewijzigd, 0 toegevoegd, 0 verwijderd)
• Objecten (2 gewijzigd, 0 toegevoegd, 0 verwijderd)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]

Details

Paginaeigenschappen

Verborgen

...	...	@@ -1,1 +1,1 @@
1		-true
	1	+false

Inhoud

...	...	@@ -17,7 +17,9 @@
17	17	'showcase': "$!o.getValue('vimeo_showcase')",
18	18	'geupload': "$!o.getValue('geupload')",
19	19	'hoofdstukken': "$!o.getValue('hoofdstukken')",
20		- 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')"
	20	+ 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')",
	21	+ 'tekst': "$!o.getValue('tekst')",
	22	+ 'bron': "$!o.getValue('bron')"
21	21	}))
22	22	#end
23	23	#foreach ($c in $collectiontool.sort($clips, 'positie'))
...	...	@@ -27,7 +27,9 @@
27	27	{{html clean="false"}}
28	28	<figure class="wb-clip" id="clip-$escapetool.xml($c.nummer)">
29	29	#if ("$!c.bijlage" != '' && $doc.getAttachment($c.bijlage))
30		- <video controls preload="metadata" playsinline src="$doc.getAttachmentURL($c.bijlage)"#if ("$!c.poster" != '' && $doc.getAttachment($c.poster)) poster="$doc.getAttachmentURL($c.poster)"#{end}></video>
	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>
31	31	#else
32	32	<p class="wb-clip-ontbreekt">De video ontbreekt nog op deze pagina.</p>
33	33	#end
...	...	@@ -69,9 +69,27 @@
69	69	#end
70	70	<figcaption>
71	71	#if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{end}
72		- Bron: Syntess Atrium Zelfstudie#if ("$!c.showcase" != ''), <a href="https://vimeo.com/showcase/$escapetool.url($c.showcase)" target="_blank" rel="noopener">alle clips van deze paragraaf</a>#{end}.
	76	+ #if ("$!c.bron" != '')Bron: $escapetool.xml($c.bron).#{else}Bron: Syntess Atrium Zelfstudie#if ("$!c.showcase" != ''), <a href="https://vimeo.com/showcase/$escapetool.url($c.showcase)" target="_blank" rel="noopener">alle clips van deze paragraaf</a>#{end}.#end
73	73	#if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
74	74	</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
75	75	</figure>
76	76	{{/html}}
77	77	#end

XWiki.JavaScriptExtension[0]

code

...	...	@@ -10,8 +10,18 @@
10	10	fig.setAttribute('data-wb-klaar', '1');
11	11	var video = fig.querySelector('video');
12	12	var buttons = Array.prototype.slice.call(fig.querySelectorAll('.wb-hoofdstukken button'));
13		- if (!video || !buttons.length) return;
	13	+ if (!video) return;
14	14
	15	+ // The times in the transcript jump as well, without highlighting
	16	+ Array.prototype.forEach.call(fig.querySelectorAll('.wb-tekst button'), function (button) {
	17	+ button.addEventListener('click', function () {
	18	+ video.currentTime = Number(button.getAttribute('data-t'));
	19	+ video.play();
	20	+ video.scrollIntoView({ block: 'nearest' });
	21	+ });
	22	+ });
	23	+ if (!buttons.length) return;
	24	+
15	15	buttons.forEach(function (button) {
16	16	button.addEventListener('click', function () {
17	17	video.currentTime = Number(button.getAttribute('data-t'));

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -51,11 +51,14 @@
51	51	}
52	52	.wb-hoofdstukken .wb-ref {
53	53	display: block;
54		- padding: 0 0.75em 0.45em 4.85em;
	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;
55	55	font-size: 0.9em;
56	56	}
57	57	.wb-hoofdstukken .wb-ref::before {
58		- content: "Zie ";
	59	+ content: "Zie";
	60	+ display: inline-block;
	61	+ margin-right: 0.3em;
59	59	color: #666;
60	60	}
61	61	.wb-hoofdstukken button.wb-actief + .wb-ref {
...	...	@@ -67,6 +67,48 @@
67	67	color: #666;
68	68	font-size: 0.9em;
69	69	}
	73	+.wb-tekst {
	74	+ margin-top: 0.6em;
	75	+ border: 1px solid #ddd;
	76	+}
	77	+.wb-tekst summary {
	78	+ padding: 0.45em 0.75em;
	79	+ cursor: pointer;
	80	+ color: #444;
	81	+}
	82	+.wb-tekst[open] summary {
	83	+ border-bottom: 1px solid #eee;
	84	+}
	85	+.wb-tekst ol {
	86	+ list-style: none;
	87	+ margin: 0;
	88	+ padding: 0.4em 0.75em 0.6em;
	89	+ max-height: 24em;
	90	+ overflow-y: auto;
	91	+}
	92	+.wb-tekst li {
	93	+ margin: 0.15em 0;
	94	+}
	95	+.wb-tekst button {
	96	+ margin-right: 0.5em;
	97	+ padding: 0;
	98	+ border: 0;
	99	+ background: none;
	100	+ color: #666;
	101	+ font: inherit;
	102	+ font-variant-numeric: tabular-nums;
	103	+ cursor: pointer;
	104	+}
	105	+.wb-tekst button:hover,
	106	+.wb-tekst button:focus-visible {
	107	+ color: inherit;
	108	+ text-decoration: underline;
	109	+}
	110	+.wb-tekst-let {
	111	+ margin: 0.4em 0.75em 0;
	112	+ color: #8a5a00;
	113	+ font-size: 0.9em;
	114	+}
70	70	.wb-clip-let {
71	71	color: #8a5a00;
72	72	}