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

Titel

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

Inhoud

...	...	@@ -1,8 +1,9 @@
1	1	{{velocity}}
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.
	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.
6	6	#set ($discard = $xwiki.ssx.use('Wardenburg.Code.AtriumClips'))
7	7	#set ($discard = $xwiki.jsx.use('Wardenburg.Code.AtriumClips'))
8	8	#set ($clips = [])
...	...	@@ -72,7 +72,7 @@
72	72	#end
73	73	<figcaption>
74	74	#if ("$!c.duur" != '')Duur $escapetool.xml($c.duur). #{end}
75		- 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.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}
76	76	#if ($items.size() > 0 && "$!c.gecontroleerd" != '1') <span class="wb-clip-let">Hoofdstukken nog niet gecontroleerd.</span>#{end}
77	77	</figcaption>
78	78	#if ("$!c.tekst" != '')

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

...	...	@@ -70,6 +70,48 @@
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	+}
73	73	.wb-clip-let {
74	74	color: #8a5a00;
75	75	}