Wijzigen voor document Speler voor video's

Samenvatting

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

Details

Paginaeigenschappen

Titel

...	...	@@ -1,1 +1,1 @@
1		-Speler voor video's
	1	+Speler Syntess Atrium leren

Verborgen

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

Inhoud

...	...	@@ -1,10 +1,8 @@
1	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		-## another source goes in the object property bron.
	2	+## Shows the Syntess Atrium Zelfstudie clips of the including page: one figure per Wardenburg.Code.AtriumClipClass
	3	+## object (sorted on positie), with an HTML5 player and a clickable chapter list. The video itself is an attachment of
	4	+## the including page, so it is only visible to people who may read that page. Used through
	5	+## {{include reference="Wardenburg.Code.AtriumClips"/}} on the pages under Syntess Atrium leren.
8	8	#set ($discard = $xwiki.ssx.use('Wardenburg.Code.AtriumClips'))
9	9	#set ($discard = $xwiki.jsx.use('Wardenburg.Code.AtriumClips'))
10	10	#set ($clips = [])
...	...	@@ -19,9 +19,7 @@
19	19	'showcase': "$!o.getValue('vimeo_showcase')",
20	20	'geupload': "$!o.getValue('geupload')",
21	21	'hoofdstukken': "$!o.getValue('hoofdstukken')",
22		- 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')",
23		- 'tekst': "$!o.getValue('tekst')",
24		- 'bron': "$!o.getValue('bron')"
	20	+ 'gecontroleerd': "$!o.getValue('hoofdstukken_gecontroleerd')"
25	25	}))
26	26	#end
27	27	#foreach ($c in $collectiontool.sort($clips, 'positie'))
...	...	@@ -31,9 +31,7 @@
31	31	{{html clean="false"}}
32	32	<figure class="wb-clip" id="clip-$escapetool.xml($c.nummer)">
33	33	#if ("$!c.bijlage" != '' && $doc.getAttachment($c.bijlage))
34		- ## Subtitles: an attachment <video name>.nl.vtt next to the video, off by default (CC button in the player)
35		- #set ($vtt = $c.bijlage.replaceAll('\.mp4$', '.nl.vtt'))
36		- <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>
	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>
37	37	#else
38	38	<p class="wb-clip-ontbreekt">De video ontbreekt nog op deze pagina.</p>
39	39	#end
...	...	@@ -75,27 +75,9 @@
75	75	#end
76	76	<figcaption>
77	77	#if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{end}
78		- #if ("$!c.bron" != '')Bron: $escapetool.xml($c.bron).#elseif ("$!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}
	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}.
79	79	#if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
80	80	</figcaption>
81		-#if ("$!c.tekst" != '')
82		- ## Transcript (field tekst, one line per sentence as "[mm:ss] text"); the field is searchable in the Kennisbank
83		- <details class="wb-tekst">
84		- <summary>Uitgeschreven tekst</summary>
85		- <p class="wb-tekst-let">Automatisch uitgeschreven uit de gesproken tekst; er kunnen fouten in staan.</p>
86		- <ol>
87		- #foreach ($raw in $c.tekst.split('\r?\n'))
88		- #set ($line = $raw.trim())
89		- #if ($line.matches('^\[\d{1,2}:\d{2}\]\s*.+$'))
90		- #set ($tc = $line.replaceAll('^\[(\d{1,2}:\d{2})\].*$', '$1'))
91		- #set ($parts = $tc.split(':'))
92		- #set ($sec = $mathtool.toInteger($parts[0]) * 60 + $mathtool.toInteger($parts[1]))
93		- <li><button type="button" data-t="$sec">$escapetool.xml($tc)</button> $escapetool.xml($line.replaceAll('^\[\d{1,2}:\d{2}\]\s*', ''))</li>
94		- #end
95		- #end
96		- </ol>
97		- </details>
98		-#end
99	99	</figure>
100	100	{{/html}}
101	101	#end

XWiki.JavaScriptExtension[0]

code

...	...	@@ -10,18 +10,8 @@
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) return;
	13	+ if (!video || !buttons.length) 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		-
25	25	buttons.forEach(function (button) {
26	26	button.addEventListener('click', function () {
27	27	video.currentTime = Number(button.getAttribute('data-t'));

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -70,48 +70,6 @@
70	70	color: #666;
71	71	font-size: 0.9em;
72	72	}
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		-}
115	115	.wb-clip-let {
116	116	color: #8a5a00;
117	117	}