Controls voor meerdere <video>'s op één pagina

[Goeroeboeroe]

Dit is een vervolg op http://css-voorbeelden.nl/forum/viewtopic.php?f=5&t=562
Hier komt de meer algemene code. (Is nu dus nog even leeg.)

[Goeroeboeroe]

Code: Selecteer alles

<a aria-haspopup="true" href="#" id="lk_foto1b">
	<div class="videobox">
		<video preload="none" poster="images/bbb-splash.jpg">
			<source src="video/aftellen.mp4" type="video/mp4">
			<source src="video/aftellen.webm" type="video/webm">
		</video>
		<ul class="besturing">
			<li class="speel-pauzeer">&raquo;</li>
			<li class="timer"><span class="afgespeeld">0</span><span class="speelduur"></span><span class="balkje"></span><span class="achtergrond-balkje"></span></li>
			<li class="geluid"><span class="zachter">-</span><img src="images/volume.png" width="32" height="30" alt=""><span class="volume">10</span><span class="harder">+</span></li>
		</ul>
	</div>
	<img src="stieren.jpg" alt="Stieren_door_straat" width="180" height="101" class="lk_foto1a">
</a>

De bedoeling was dat er in eerste instantie alleen een foto zichtbaar is. Dat is de afbeelding die in de <img> zit. Pas bij hoveren over die <img> moet de eronder zittende video worden getoond. Dat brengt een apart probleem met zich mee: om de video te kunnen bekijken, moet je over de afbeelding (en dus de eronder zittende video) hoveren. Maar zolang je over de video hovert, staan de controls pontificaal over de video heen. Bij zo'n kleine video mis je hierdoor wel de helft. De controls moeten dus búíten de video komen te staan. Daar is JavaScript voo rnodig. Bovendien zijn er meerdere video's op één pagina, wat het nog wat ingewikkelder maakt.
Hier de html, de css en het JavaScript komen later.
In de site waar het om gaat zit de <a> met de <img> er al in, en uiteraard de </a>. Daar moet dus alleen het deel tussen <a ...> en <img ...> worden ingevoegd: de <div>. Dat is steeds dezelfde code, alleen de src van de <img> en de sources van de video's zijn (uiteraard) anders. Op deze site gaat het om zes keer dezelfde code, maar dat maakt niet uit, omdat het JavaScript het aantal <video>'s e.d. inleest.

Code: Selecteer alles

<a aria-haspopup="true" href="#" id="lk_foto1b">

Bij hoveren over deze <a> verdwijnt de erin zittende <img> en worden video en besturing zichtbaar. De besturing is een css-pop-up. Voor een touchscreen in Windows 8 is daarvoor de toevoeging aria-haspopup="true" nodig. (Dat is één van de gestandaardiseerde WAI-ARIA toegankelijkheidscodes. Ik heb de pest aan Microsoft, maar eerlijk is eerlijk: dit is een uitstekende oplossing voor 'n touchscreen, stukken beter dan die van Apple of Android.)
Je zou het geheel ook in iets anders dan een <a> kunnen zetten. De <a> is een overblijfsel van IE 6, waar hoveren alleen binnen een <a> werkt. Maar de <a> heeft in iOS en Android de leuke bijwerking, dat hoveren ook daar (min of meer) goed werkt, met wat hulp van JavaScript.

Code: Selecteer alles

<div class="videobox">

Voor het bijbehorende JavaScript is het nodig dat de hele handel in een element met deze class staat. Dat mag ook iets anders dan 'n div zijn.

Code: Selecteer alles

<video preload="none" poster="images/bbb-splash.jpg">

De proload="none" is nodig voor een bug (Microsoft zegt dat dit juist zo hoort) in IE 9 en 10, waarbij je niets ziet als een poster is opgegeven en de video al mag preloaden (downloaden voor er wordt afgespeeld). Met genoeg humor kun je inderdaad de specificatie zo uitleggen, dat dit de bedoeling is. Nou komt dat hier goed uit, want het zijn zes video's, en mobiele bezoekers zullen niet gelukkig worden als die alle zes worden gepreload.
Er zijn geen controls opgegeven, want de besturing wordt met JavaScript geregeld. Bovendien mogen controls niet bij een <video> die in een <a> staat. Anders zou je ze standaard aan kunnen zetten en dan alleen uitzetten als JavaScript aan staat.

Code: Selecteer alles

<ul class="besturing">

De eigenlijke besturing staat binnen lijst-ingangen in een ongeordende lijst, maar dat hoeft in principe niet. Als het aantal elementen en de class-namen maar kloppen. De class 'besturing' wordt alleen in de css gebruikt, niet in het JavaScript.

Code: Selecteer alles

<li class="speel-pauzeer">&raquo;</li>

Binnen dit element staat de speel/pauzeerknop. Bij opening staat er >>, de Franse 'aanhalingstekens sluiten'. Bij klikken op dit element gaat de video afspelen en wordt het pauzeteken I I erin gezet. Dit element MOET de class-naam 'speel-pauzeer' hebben voor een goede werking van het JavaScript.

Code: Selecteer alles

<li class="timer">

Binnen deze lijst-ingang staan het voortgangsbalkje en de getallen met afgespeelde tijd en totale speelduur. De class-naam wordt alleen in de css gebruikt.

Code: Selecteer alles

<span class="afgespeeld">0</span>

De afgespeelde tijd. Bij opening staat hier een 0. Tijdens het afspelen wordt dit door JavaScript bijgewerkt. Dit element MOET de class-naam 'afgespeeld' hebben voor een goede werking van het JavaScript.

Code: Selecteer alles

 <span class="speelduur"></span>

Dit is een lege span, waarin JavaScript de totale speelduur zet. Dit element MOET de class-naam 'speelduur' hebben voor een goede werking van het JavaScript. Bij opening is het leeg, omdat de speelduur pas bekend is als (het eerste deel van) de video is gedownload.

Code: Selecteer alles

<span class="balkje"></span><span class="achtergrond-balkje"></span>

De eerste span vormt alleen de omtrek van het voortgangsbalkje. Dit is al bij opening zichtbaar. De breedte van deze span wordt in de css opgegeven en later in het JavaScript ingelezen. Deze breedtes hoeven bij de verschillende video's niet hetzelfde te zijn. Dit element MOET de class-naam 'speelduur' hebben voor een goede werking van het JavaScript.
De tweede span bevat de achtergrond van het voortgangsbalkje. De breedte hiervan is in eerste instantie 0 px, en uiteindelijk even breed als het volledige voortgangsbalkje. Het tempo waarin dit gebeurt, wordt bepaald door de speelduur van de video en de lengte van het balkje. Dit regel JavaScript allemaal. Dit element MOET de class-naam 'achtergrond-balkje' hebben voor een goede werking van het JavaScript.

Code: Selecteer alles

<li class="geluid">

Binnen deze lijst-ingang staan het volume en de knoppen om dit harder of zachter te zetten. In het midden staat een luidsprekertje, zodat harder en zachter ver genoeg uit elkaar zitten voor een touchscreen. De class-naam wordt alleen in de css gebruikt.

Code: Selecteer alles

<span class="zachter">-</span>

De zachter-knop. Dit is gewoon een min-teken. Bij klikken hierop wordt het getal dat het volume weergeeft met 1 verlaagd. Dit element MOET de class-naam 'zachter' hebben voor een goede werking van het JavaScript.

Het luidsprekertje:

volume.png

(1.98 KiB) 3362 keer gedownload

(Rechtsklik om te downloaden). Luidsprekertje is afkomstig van http://www.iconfinder.com/icondetails/1 ... olume_icon

Code: Selecteer alles

<span class="volume">10</span>

Het getal dat het volume weergeeft. Dit getal wordt uitgerekend door JavaScript en met behulp van css op het luidsprekertje gezet. Dit element MOET de class-naam volume hebben voor een goede werking van het JavaScript. Het volume loopt van 0 tot 10. Bij opening is het 10.

Code: Selecteer alles

<span class="harder">+</span>

De harder-knop. Dit is gewoon een plus-teken. Bij klikken hierop wordt het getal dat het volume weergeeft met 1 verhoogd. Dit element MOET de class-naam 'harder' hebben voor een goede werking van het JavaScript.

[Goeroeboeroe]

Eerst de wijzigingen in de al bestaande css, die hoort bij de oorspronkelijke vraag. Later komt de nieuwe css, die feitelijk echt bij de video hoort.

Code: Selecteer alles

div#links a:hover img {display: none;}

wordt

Code: Selecteer alles

div#links a:hover > img {display: none;}

De <img> moet bij hoveren verdwijnen, zodat de video zichtbaar wordt. Maar in de besturing voor de video zit nu ook 'n <img>: het luidsprekertje, Dit zou nu ook verdwijnen.
De toevoeging van de > betekent, dat nu alleen een <img> verdwijnt bij hoveren, die een DIRECT kind is van de <a>. De afbeelding is dat wel, het luidsprekertje niet, want dat zit in <a><li><span>, is dus genest. Door de toevoeging van de > blijft het luidsprekertje gewoon zichtbaar.

Code: Selecteer alles

div#rechts a:hover img {display: none;}

wordt

Code: Selecteer alles

div#rechts a:hover > img {display: none;}

Zelfde verhaal als hierboven.
Deze regel stond drie keer in de css, ik heb alleen de eerste laten staan.

De marge tussen de afbeeldingen moest worden vergroot. Dat kan heel simpel worden geregeld:

Code: Selecteer alles

div#links a {display: block; width: 190px; height: 111px; margin: 40px auto 0;}

wordt

Code: Selecteer alles

div#links a {display: block; width: 190px; height: 111px; margin: 80px auto 0;}

Gewoon de marge aan de bovenkant vergroten. Dat geeft meer ruimte tussen de <a>'s, en dus ook tussen de daarin zittende afbeeldingen, video, enz.

Code: Selecteer alles

div#rechts a {display: block; width: 190px; height: 111px; margin: 40px auto 0;}

wordt

Code: Selecteer alles

div#rechts a {display: block; width: 190px; height: 111px; margin: 80px auto 0;}

Zelfde verhaal als hierboven, maar voor de rechterkolom. Deze regel stond er drie keer in, ik heb alleen de bovenste laten staan.

Omdat de bovenste twee <a>'s die extra afstand niet nodig hebben, staan die nu te laag. Door in de css

Code: Selecteer alles

div#links a:first-child, div#rechts a:first-child {margin-top: 40px;}

toe te voegen, krijgen de eerste (de bovenste) <a>'s links en rechts weer hun oude marge van 40 px.

[Goeroeboeroe]

Voor de bestaande site: dit is allemaal volledig nieuwe css. Ik zet bovenaan even alle nieuwe css in z'n geheel. Daaronder staat stukje voor stukje de uitleg en zo.

Code: Selecteer alles

#links a div, #rechts a div {display: none;}

a:focus {outline: 0;}

div#links a:hover div, div#rechts a:hover div {
	display: block;
	position: relative;
	z-index: 10;
}

div#links a, div#rechts a {
	color: black;
	text-decoration: none;
}

.videobox  {
	background: rgba(255, 255, 255, 0);
	width: 221px;
	height: 170px;
	margin: -30px 0 0 -30px;
	outline: 0;
	padding: 30px 0 0 30px;
	border: red solid 1px;
}

div#rechts .videobox {width: 211px;}

video {
	width: 190px;
	height: 111px;
}

ul.besturing {
	width: 190px;
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
}

ul.besturing li {float: left;}

ul.besturing .speel-pauzeer {
	color: #0f0;
	width: 30px;
	height: 30px;
	font-family: sans-serif;
	font-size: 2.4em;
	line-height: 24px;
	text-align: center;
	border: grey solid 1px;
	border-radius: 5px 0 0 5px;
}

ul.besturing .timer {
	color: #ddd;
	width: 78px;
	height: 29px;
	font-family: sans-serif;
	font-size: 0.75em;
	border: grey solid;
	border-width: 1px 0;
	padding-top: 1px;
	position: relative;
}

.timer .afgespeeld {
	display: inline-block;
	width: 1.7em;
	text-align: right;
	padding-left: 2px;
}

.timer .speelduur {
	display: inline-block;
	width: 1.7em;
	float: right;
	text-align: left;
	padding-right: 2px;
}

.timer .balkje, .timer .achtergrond-balkje {
	width: 62px;
	height: 8px;
	border: grey solid 1px;
	border-radius: 4px;
	position: absolute;
	bottom: 3px;
	left: 7px;
}

.timer .achtergrond-balkje {
	background: #daa520;
	display: none;
}

ul.besturing .geluid {
	color: #ddd;
	width: 72px;
	height: 30px;
	font-family: sans-serif;
	line-height: 26px;
	border: grey solid 1px;
	border-radius: 0 5px 5px 0;
	position: relative;
}

span.zachter {
	display: inline-block;
	width: 10px;
	font-size: 1.4em;
	padding-left: 10px;
}

ul.besturing img {
	line-height: 0;
	vertical-align: top;
	margin: 0 -8px 0 4px;
}

span.volume {
	background: rgba(0, 0, 0, 0.2);
	color: white;
	height: 14px;
	font-size: 0.8em;
	line-height: 14px;
	position: absolute;
	top: 8px;
	right: 31px;
}

span.harder {
	display: inline-block;
	width: 20px;
	text-align: center;
}

@media screen and (max-width: 400px) {
	ul.besturing {display: none;}
}

De uitleg:

Code: Selecteer alles

#links a div, #rechts a div {display: none;}

De divs met de video en besturing verbergen.

Code: Selecteer alles

a:focus {outline: 0;}

Haal stippellijn weg die een <a> waarop wordt geklikt standaard krijgt.

Code: Selecteer alles

div#links a:hover div, div#rechts a:hover div {
	display: block;
	position: relative;
	z-index: 10;
}

Toon de div (met daarin video en besturing) bij hoveren over de <a>
De z-index is eigenlijk niet nodig, maar 'n veiligheid. Als de besturing door 'n ander element, later in de html, wordt afgedekt, kan er niet op worden geklikt. Door 'n hogere z-index te geven, staat de besturing altijd bovenaan.
De position: relative is alleen nodig, omdat 'n z-index alleen werkt bij 'n relatieve, fixed of absolute positie.

Code: Selecteer alles

div#links a, div#rechts a {
	color: black;
	text-decoration: none;
}

De besturing van de video is gedeeltelijk gewone tekst. Die in een <a> staat. De onderstreping en kleur die 'n link automatisch krijgt, willen we hier niet.

Code: Selecteer alles

.videobox  {
	background: rgba(255, 255, 255, 0);
	width: 221px;
	height: 170px;
	margin: -30px 0 0 -30px;
	outline: 0;
	padding: 30px 0 0 30px;
}

Binnen .videobox staan de video en de besturing.
De background is volledig wit (drie keer 255), én volledig doorzichtig. Je ziet hem dus niet. Dit is nodig vanwege 'n bug die al in IE 6 zat en die Microsoft kennelijk bijzonder waardeert, want in IE 10 zit het kreng er nog steeds in. Zolang je hovert over de <a>, blijft de video zichtbaar. Maar niet in IE als je over 'n border hovert, ook al zit die border heel ergens anders. Hier is het de border rondom de <a>. Door een achtergrondkleur te geven, ook al zie je die niet, wordt dit voorkomen. Een doorzichtige gif heeft hetzelfde effect, maar dit scheelt 'n aanroep naar de server. Gewoon transparent als achtergrondkleur werkt niet.
Boven en links komt een padding van 30 px. Hoogte en breedte zijn groter dan de <a>, zodat de .videobox ook onder en rechts 30 px breder en lager is dan d e<a>. Met een negatieve marge wordt .videobox 30 px omhoog en naar links gezet. Zonder dit zou de div gewoon gelijk komen de <a> en alleen rechts en onder 60 px uitsteken. Nu is .videobox aan alle kanten 30 px groter dan de <a>. Als je nu met de cursor iets buiten de video komt, blijft deze gewoon open: er is een soort 'veiligheidszone' van 30 px. Zonder deze zone is dit een tamelijk weerzinwekkend sadistische constructie
De outline: 0 is om 'n bug in Firefox op te vangen. Ogenschijnlijk willekeurig zet Firefox soms de stippellijn die bij 'n link met focus hoort rondom .videbox.

Code: Selecteer alles

div#rechts .videobox {width: 211px;}

Dit is specifiek voor deze pagina, waar de video's in twee kolommen staan. Door de breedte in de rechterkolom íéts smaller te maken, past alles net in een tablet met een breedte van 1024 px.

Code: Selecteer alles

video {
	width: 190px;
	height: 111px;
}

ul.besturing {
	width: 190px;
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
}

Binnen .besturing staat de hele besturing. Dit is een <ul>. Deze css is de gebruikelijk voor een <ul>. De marge aan de bovenkant van 15px geeft een kleine afstand tussen video en besturing.

Code: Selecteer alles

ul.besturing li {float: left;}

De onderdelen van de besturing staan elk in een <li>. Die moeten niet onder, maar naast elkaar komen te staan.

Code: Selecteer alles

ul.besturing .speel-pauzeer {
	color: #0f0;
	width: 30px;
	height: 30px;
	font-family: sans-serif;
	font-size: 2.4em;
	line-height: 24px;
	text-align: center;
	border: grey solid 1px;
	border-radius: 5px 0 0 5px;
}

.speel-pauzeer is de knop waarin >> of I I (spelen of pauzeren) staat.
Dit is allemaal gewone css om het 'n beetje netjes op één lijn met de rest van de besturing te krijgen.
Bij openen van de pagina staat hier >> in. Zodra de video speelt, wordt hier door het JavaScript I I in gezet. Bij pauzeren wordt er weer >> in gezet. Hierbij verandert ook de kleur van groen (afspelen) naar oranje (pauzeren). Het pauzeteken is in feite twee keer de hoofdletter i met een spatie ertussen. De sans-serif voorkomt dwarsstreepjes (schreef, serif).
Dit is zoals het eruit ziet bij openen van de pagina. Het afspeelteken wordt in de html opgegeven met de code &raquo; wat voor >> staat. Dit teken wordt via JavaScript vervangen door I I. Hierbij moeten helaas ook de lettergrootte en regelhoogte worden veranderd, omdat anders de verhouding tussen >> en I I totaal zoek is. Omdat JavaScript het teken verandert, moet ook deze verandering via JavaScript. Dat is minder moeilijk dan het misschien lijkt.
Voor het plaatsen van het pauzeteken: zoek in JavaScript naar

Code: Selecteer alles

this.firstChild.nodeValue = "I I";							
this.style.fontSize = "1.6em";					
this.style.lineHeight = "30px";					
this.style.color="#daa520";

De I I kan gewoon door een ander teken worden vervangen. Tussen aanhalingstekens.
De lettergrootte staat achter fontSize en gebruikt dezelfde eenheden e.d. als css.
De regelhoogte staat achter lineHeight en werkt ook net zoals als css.
De kleur (hier oranje) idem. Deze staat achter color.
Alle drie kun je gewoon vervangen door iets anders, net zoals css, maar tussen aanhalingstekens.

Het Afspeelteken >> wordt, behalve bij het openen van de pagina, ook door JavaScript geplaatst. Je kunt het vinden in de functie plaatsAfteken:

Code: Selecteer alles

function plaatsAfspeelteken(volgnr) {
	speelPauzeerArray[volgnr].firstChild.nodeValue = "\u00bb";
	speelPauzeerArray[volgnr].style.fontSize = "2.4em";
	speelPauzeerArray[volgnr].style.lineHeight = "24px";
	speelPauzeerArray[volgnr].style.color="#0c0";

Je kunt het op dezelfde manier aanpassen als het pauzeteken hierboven. Alleen staat hier niet >>, maar \u00bb. Dat is omdat >> een speciaal teken is, en daarvoor moet je in JavaScript de utf-code gebruiken. Maar als je \u00bb zou vervangen door twee keer >, zou je ongeveer hetzelfde zien als nu.

Code: Selecteer alles

ul.besturing .timer {
	color: #ddd;
	width: 78px;
	height: 29px;
	font-family: sans-serif;
	font-size: 0.75em;
	border: grey solid;
	border-width: 1px 0;
	padding-top: 1px;
	position: relative;
}

Binnen .timer staat alles wat met de afspeeltijd te maken heeft. Weinig spannend, gewoon css. Die naar wens kan worden aangepast. De padding van 1 px aan de bovenkant is nodig, omdat het anders in OSX iets te hoog staat. Vraag me niet waarom.
De position: relative is om de elementen binnen deze <li> te kunnen positioneren ten opzichte van deze <li> (dat kan alleen als het element fixed, relatief of absoluut is gepositioneerd).

Code: Selecteer alles

.timer .afgespeeld {
	display: inline-block;
	width: 1.7em;
	text-align: right;
	padding-left: 2px;
}

Binnen .afgespeeld staat de afgespeelde tijd. De css kan gewoon worden aangepast. inline-block: de span blijft op dezelfde regel staan (inline), maar je kunt eigenschappen voor een blok-element (breedte e.d.) gebruiken. De teller wordt door JavaScript bijgehouden.

Code: Selecteer alles

.timer .speelduur {
	display: inline-block;
	width: 1.7em;
	float: right;
	text-align: left;
	padding-right: 2px;
}

Binnen .speelduur staat de totale tijd. Deze wordt door JavaScript geplaatst, maar hier wordt het uiterlijk bepaald. inline-block: de span blijft op dezelfde regel staan (inline), maar je kunt eigenschappen voor een blok-element (breedte e.d.) gebruiken.

Code: Selecteer alles

.timer .balkje, .timer .achtergrond-balkje {
	width: 62px;
	height: 8px;
	border: grey solid 1px;
	border-radius: 4px;
	position: absolute;
	bottom: 3px;
	left: 7px;
}

.balkje is het lege voortgangsbalkje dat je bij opening ziet. .achtergrond-balkje is een tweede span, waarbinnen de achtergrond komt te staan, die de voortgang weergeeft. Deze css is ook weinig spectaculair, hij zet beide balkjes over elkaar heen en op de juiste plaats t.o.v. de rest van de besturing.

Code: Selecteer alles

.timer .achtergrond-balkje {
	background: #daa520;
	display: none;
}

.achtergrond-balkje bevat de steeds breder wordende achtergrondkleur, die de voortgang van het afspelen aangeeft. Aan het begin van de video is de breedte 0 px en is er dus geen achtergrond. Aan het eind is de breedte even breed als het voortgangsbalkje en is dit dus helemaal gevuld.
De breedte van het balkje wordt door JavaScript ingelezen en mag bij elke video anders zijn. De snelheid van het vullen van het balkje wordt door JavaScript bepaald aan de hand van de breedte van het balkje en de totale speelduur.
Het balkje heeft ronde hoeken van 4 px. Maar in het begin is de breedte 0 px. Dat bijt elkaar. Je krijgt 'n vreemd soort combinatie van 0 px breed én ronde hoeken van 4 px. Ziet er niet uit. Daarom wordt het verborgen. Via JavaScript wordt het zichtbaar gemaakt, op het moment dat het nodig is.

Code: Selecteer alles

ul.besturing .geluid {
	color: #ddd;
	width: 72px;
	height: 30px;
	font-family: sans-serif;
	line-height: 26px;
	border: grey solid 1px;
	border-radius: 0 5px 5px 0;
	position: relative;
}

Binnen .geluid staat alles dat met het volume te maken heeft. Gewoon normale css, die aangepast kan worden.
De position: relative is om de elementen binnen deze <li> te kunnen positioneren ten opzichte van deze <li> (dat kan alleen als het element fixed, relatief of absoluut is gepositioneerd).

Code: Selecteer alles

span.zachter {
	display: inline-block;
	width: 10px;
	font-size: 1.4em;
	padding-left: 10px;
}

Hierin staat de -. Gewoon css om de - op de goede plaats te krijgen. inline-block: de span blijft op dezelfde regel staan (inline), maar je kunt eigenschappen voor een blok-element (breedte e.d.) gebruiken.

Code: Selecteer alles

ul.besturing img {
	line-height: 0;
	vertical-align: top;
	margin: 0 -8px 0 4px;
}

Het luidsprekertje. Gewoon css om het op de juiste plaats te kijken. Een <img> is een inline-element en heeft daarom wat ruimte aan de onderkant voor letters als de g. Dat stoort hier, vandaar de regelhoogte van 0.

Code: Selecteer alles

span.volume {
	background: rgba(0, 0, 0, 0.2);
	color: white;
	height: 14px;
	font-size: 0.8em;
	line-height: 14px;
	position: absolute;
	top: 8px;
	right: 31px;
}

Het volume. Dit wordt boven het luidsprekertje gepositioneerd. De zwarte vrijwel doorzichtige achtergrond zorgt ervoor dat er voldoende contrast is tussen getal en luidsprekertje. De waarde is bij opening 10 en wordt later bijgehouden via JavaScript. Het uiterlijk wordt hier bepaald.

Code: Selecteer alles

span.harder {
	display: inline-block;
	width: 20px;
	text-align: center;
}

De + om harder te zetten. inline-block: de span blijft op dezelfde regel staan (inline), maar je kunt eigenschappen voor een blok-element (breedte e.d.) gebruiken.

@media screen and (max-width: 400px) {
ul.besturing {display: none;}
}
In smallere vensters werken eigen controls niet lekker. Bovendien heeft de fabrikant vaak z'n eigen aanpassingen, die beter werken voor heel smalle vensters, zoals smartphones. Het JavaScript controleert op de breedte van het venster. Als dit smaller is dan 400 px, worden de standaardcontrols ingeschakeld en wordt de hele eigen besturing hier overgeslagen.
Dit zorgt ervoor dat de hele besturing in vensters smaller dan 400 px niet zichtbaar is.
(Dat is de bedoeling. Door een bug in Android browser versie 2 wordt de verkeerde breedte gegeven en zie je daar toch de controls zoals die hier zijn gemaakt. Het werkt verder allemaal prima, ziet er alleen wat vreemd uit. In Opera Mobile werkt het wel goed.)

[Goeroeboeroe]

Dit is het JavaScript. Voordat je het gebruikt, kun je het beste alles wat achter // staat weghalen. Dat is uitleg en scheelt tweederde of zo in omvang. Maak wel 'n kopie mét de uitleg, anders ga je héél véél spijt krijgen (dit was weer 'n tip van de bij mij uiterst productie Afdeling Schade en Schande).
Je koppelt het aan de html door in de head het volgende te zetten:

Code: Selecteer alles

<script src="js/knoppen.js"></script>

Het zit mij mij in de map js, vandaar de 'js/' voor knoppen.js, wat de naam van het script is. Die naam kun je gewoon wijzigen, als je dat witl.

Code: Selecteer alles

// knoppen.js

window.onload = vulVideoArray;											// Start de hele handel als de pagina volledig is geladen

var videoArray;															// Array om <video>'s in op te bergen

function vulVideoArray() {
	videoArray = document.getElementsByTagName("video");				// Stop alle <video>-elementen in array
		// Lees naam van browser in. Gruwelijke methode, weet het, maar in dit geval acceptabel, denk ik
	if (navigator.appName == "Microsoft Internet Explorer") {			// Als het om IE gaat
		var ua = navigator.userAgent;
		var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");			// Om te kunnen zoeken naar versie
		if ((re.exec(ua) != null) && (parseFloat(RegExp.$1) < 9)) {		// Als het om een versie ouder dan versie 9 gaat
			for (i = 0; i < videoArray.length; i++) {
				videoArray[i].controls = "true";						// Schakel standaardcontrols van <video> dan in
			}
		return;															// Doe verder niets
		}
	}
 	if (screen.width < 500) {											// Als het scherm smaller is dan 500 px
		var doeNiets = document.getElementsByClassName("besturing");	// Stop alle elementen met controls in array
		for (i = 0; i < doeNiets.length; i++) {
			doeNiets[i].style.display = "none";							// Verberg deze elementen
			videoArray[i].controls = "true";							// En schakel de standaardcontrols van <video> in
		}
		return;															// Doe verder niets
	}
	for (i = 0; i < videoArray.length; i++) {
		stuurVideo(i);													// Roep eigenlijke besturingsfunctie aan met index van array
	}
}

	// Dit is de hoofdfunctie die de hele besturing van de video's regelt
	// (volgnr) is index van array's met video, afspeelknop,, enz. [1] van elke array hoort bij elkaar, [2] ook, enz.
function stuurVideo(volgnr) {
	var videoBoxArray = document.getElementsByClassName("videobox");	// Binnen 'videobox' staan video, knoppen, enz. In array stoppen
	var speelPauzeerArray =  document.getElementsByClassName("speel-pauzeer");		// Stop alle speel/pauzeerknoppen in array
	var afgespeeldArray = document.getElementsByClassName("afgespeeld");// Stop elementen waar afgespeelde tijd verschijnt in array
	var speelduurArray = document.getElementsByClassName("speelduur");	// Stop elementen waar speelduur verschijnt in array
	var balkjeArray = document.getElementsByClassName("balkje");		// Stop elementen waar voortgangsbalkje in staat in array
	var lengteBalkjeArray = new Array(balkjeArray.length);				// Maak array die even lang is als voor de breedtes van balkjeArray
		// Lees breedte van voortgangsbalkje in. Dit moet hier worden ingelezen, omdat de breedte kan variëren en van belang is voor het vullen van het balkje.
	lengteBalkjeArray[volgnr] = getComputedStyle(balkjeArray[volgnr]).width;
		// Stop elementen waar achtergrond van voorgangsbankje in komt in array
	var achtergrondBalkjeArray = document.getElementsByClassName("achtergrond-balkje");
	var volumeArray = document.getElementsByClassName("volume");		// Stop elementen waar geluidssterkte wordt getoond in array
	var harderArray = document.getElementsByClassName("harder");		// Stop elementen waar geluid harder wordt gezet in array
	var zachterArray = document.getElementsByClassName("zachter");		// Stop elementen waar geluid zachter wordt gezet in array
	var t;																// Voor timer afgespeelde tijd
	var v;																// Voor timer voortgangsbalkje
		// Geef volume weer. Omdat volumes in tienden wordt uitgedrukt het afgeronde volume met tien vermenigvuldigen om een geheel getal te krijgen.
	volumeArray[volgnr].firstChild.nodeValue = Math.round(videoArray[volgnr].volume * 10);

		// Teller met afgespeelde tijd starten
	function startTeller() {
		t = window.setInterval(function() {
			// Lees afgeronde afgespeelde tijd in. Omdat de teller dit steeds bij starten doet, begint hij altijd op de juiste tijd, ook als de teller gepauzeerd was.
		var gespeeld = Math.round(videoArray[volgnr].currentTime);
			if (videoArray[volgnr].ended != true) {						// Als video nog niet volledig is afgespeeld
					// Als (door afrondingen en zo) afgespeelde tijd hoger is dan totale speelduur
				if (gespeeld > Math.round(videoArray[volgnr].duration)) {
					gespeeld--;											// Verlaag afgespeeld tijd met 1 seconde
				}
				afgespeeldArray[volgnr].firstChild.nodeValue = gespeeld;	// Geef afgespeelde tijd weer
				if (videoArray[volgnr].duration) {						// Als de speelduur van de video al bekend is
					// Geef dan de speelduur weer. innerHTML en geen firstChild.nodeValue gebruikt, omdat de span waar dit in komt te staan leeg is en Firefox er anders niets in zet.
					speelduurArray[volgnr].innerHTML = Math.round(videoArray[volgnr].duration);
				}
			} else {													// Video is volledig afgespeeld
				plaatsAfspeelteken(volgnr);								// Zet afspeelteken in bijbehorende pauze/afspeelknop
				window.clearInterval(t);								// Stop teller met afgespeelde tijd
					// Door afrondingsverschillen kan afgespeelde tijd korter zijn dan speelduur, maak gelijk en zet op scherm
				afgespeeldArray[volgnr].firstChild.nodeValue = Math.round(videoArray[volgnr].duration);
			}
		}, 1000);														// Doe dit elke 1000 miliseconden
	}

		// Achtergrond voortgangsbalkje vullen
	function startVoortgang() {
		v = window.setInterval(function() {
		var breedte, voortgang = 0;
		breedte = lengteBalkjeArray[volgnr];							// Breedte van voortgangsbalkje is hierin opgeslagen
		breedte = breedte.substring(0, breedte.length - 2);				// Verwijder "px" aan einde, zodat alleen getallen overblijven
			// Als speelduur al bekend is en als de video al gedeeltelijk is afgespeeld
		if (videoArray[volgnr].duration && (videoArray[volgnr].currentTime > 0)) {
			// Sla in voortgang speelduur gedeeld door afgespeelde tijd op. Vermenigvuldig dit met de breedte van het voortgangsbalkje. Dit levert het aantal px op dat het element met de achtergrond van het balkje breed moet worden.
			voortgang = Math.round((videoArray[volgnr].currentTime / videoArray[volgnr].duration) * breedte);
		}
		achtergrondBalkjeArray[volgnr].style.width = voortgang + "px";
		achtergrondBalkjeArray[volgnr].style.display = "block";
		if (videoArray[volgnr].ended) {									// Als video volledig is afgespeeld
				window.clearInterval(v);								// Stop teller voor voortgangsbalkje
			}
		}, 100);														// Doe dit elke 100 miliseconden
	}

		// Functie om juiste afspeel/pauzeernop te tonen en te zorgen dat niet meer dan één video gelijktijdig speelt.
		// (volgnr) is de index van de diverse array's die bij deze video horen
	speelPauzeerArray[volgnr].addEventListener("click", speelPauzeer, false);	// Koppel eventlistener aan speel/pauzeerknop
	function speelPauzeer(ev) {
		if (videoArray[volgnr].paused == false) {						// Als de video niet is gepauzeerd
			videoArray[volgnr].pause();									// Pauzeer deze dan
			plaatsAfspeelteken(volgnr);									// Zet afspeelteken in bijbehorende pauze/afspeelknop
			window.clearInterval(t);									// Stop teller met afgespeelde tijd
		} else {														// Video is gepauzeerd
			videoArray[volgnr].play();									// Start video
			this.firstChild.nodeValue = "I I";							// Zet twee hoofdletters 'i' (pauzeren) in afspeel/pauzeerknop
			this.style.fontSize = "1.6em";								// Dit moet kleiner dan het afspeelteken
			this.style.lineHeight = "30px";								// Maar met een grotere regelhoogte dan het afspeelteken
			this.style.color="#daa520";
			stopAndere()												// Stop alle andere video's
			startTeller();												// Start teller met afgespeelde tijd
			startVoortgang();											// Vul achtergrond voortgangsbalkje
		}
	}

	function stopAndere() {
		for(i = 0; i < videoArray.length; i++) {						// Bekijk elke video
			if (i == volgnr) {											// Als het de zojuist gestarte video is
				continue;												// Sla deze over
			} else {													// Alle andere video's
				videoArray[i].pause();									// Pauzeren. Zo kan er nooit meer dan één tegelijk spelen.
				plaatsAfspeelteken(i);									// Zet afspeelteken in bijbehorende pauze/afspeelknop
			}
		}
	}
	
		// Plaats afspeelteken >> in afspeelknop en pas lettergrootte en regelhoogte aan
	function plaatsAfspeelteken(volgnr) {								// volgnr is index van speelPauzeerArray
		speelPauzeerArray[volgnr].firstChild.nodeValue = "\u00bb";		// Zet Franse aanhalingstekens >> (afspelen) in afspeel/pauzeerknop
		speelPauzeerArray[volgnr].style.fontSize = "2.4em";				// Dit moet groter dan het stopteken
		speelPauzeerArray[volgnr].style.lineHeight = "24px";			// Maar met een kleinere regelhoogte
		speelPauzeerArray[volgnr].style.color="#0c0";
	}
	
		// Volume verhogen
	harderArray[volgnr].addEventListener("click", harder, false);		// Koppel eventlistener aan knop voor harder
	function harder() {
		if (videoArray[volgnr].volume < 1) {							// Als nog niet op maximumvolume
				// Volume wordt in tienden uitgedrukt. Verhoog volume met eentiende. Omdat zo'n optelling nou eenmaal tot getallen met vele decimalen kan leiden, en dus tot mogelijk ongewenste bijwerkingen, moet de optelling worden afgerond. Om dat te kunnen doen, moet deze eerst met 10 worden vermenigvuldigd, zodat naar een geheel getal kan worden afgrond. Het geheel weer door 10 delen, zodat weer een tiende (of 1) wordt verkregen. Dat wordt dan het nieuwe volume.
			videoArray[volgnr].volume = Math.round((videoArray[volgnr].volume + 0.1) * 10) / 10;
				// Geef volume weer (x 10, want het is in tienden, en mensen houden meer van hele getallen.)
			volumeArray[volgnr].firstChild.nodeValue = Math.round(videoArray[volgnr].volume * 10);
		}
	}

		// Volume verlagen
	zachterArray[volgnr].addEventListener("click", zachter, false);		// Koppel eventlistener aan knop voor zachter
	function zachter() {
		if (videoArray[volgnr].volume > 0) {							// Als nog niet op laagste volume
				// Volume wordt in tienden uitgedrukt. Verlaag volume met eentiende. Omdat zo'n optrekking nou eenmaal tot getallen met vele decimalen kan leiden, en dus tot mogelijk ongewenste bijwerkingen, moet de aftrekking worden afgerond. Om dat te kunnen doen, moet deze eerst met 10 worden vermenigvuldigd, zodat naar een geheel getal kan worden afgrond. Het geheel weer door 10 delen, zodat weer een tiende (of 1) wordt verkregen. Dat wordt dan het nieuwe volume.
			videoArray[volgnr].volume = Math.round((videoArray[volgnr].volume - 0.1) * 10) / 10;
				// Geef volume weer (x 10, want het is in tienden, en mensen houden meer van hele getallen.)
			volumeArray[volgnr].firstChild.nodeValue = Math.round(videoArray[volgnr].volume * 10);
		}
	}

		// Deze functie is gebaseerd op een functie afkomstig van https://gist.github.com/3127081
		// Als de muis .videoBox verlaat, pauzeer dan de daarin zittende video
	videoBoxArray[volgnr].addEventListener("mouseout", function(ev) {	// Koppel eventlistener aan element waar video, knoppen, enz. in staan
			if (!isParent(this, ev.relatedTarget) && ev.target == this){	// Als het dit element is en niet een van de kinderen ervan
				videoArray[volgnr].pause();								// Pauzeer bijbehorende video
				plaatsAfspeelteken(volgnr);								// Zet afspeelteken in bijbehorende pauze/afspeelknop
			}
		}, false);
	
		// Deze functie is gebaseerd op een functie afkomstig van https://gist.github.com/3127081
		// Hij zorgt dat mouseout net zo werkt als mouseleave, wat helaas nog niet in alle browsers werkt
		// refNode is element dat mouseout genereert, otherNode is element waar muis naar binnen gaat
		// Kijk of otherNode een kind van refNode is
	function isParent(refNode, otherNode) {
			// parent is ouder van element waar muis naar binnen gaat. Als dat hetzelfde element is als het element dat de mouseout genereerde,
			// is otherNode dus een kind van refNode
		var parent = otherNode.parentNode;
		do {															// Zolang er ouders zijn
			if (refNode == parent) {
				return true;											// otherNode is een kind van refNode, cancel mouseout
			} else {													// otherNode is geen kind van refNode
					// Zoek volgende ouder van otherNode op, want het kan een (achter, achter, ...)kleinkind van refNode zijn
				parent = parent.parentNode;
			}
		} while (parent);
		return false;													// otherNode is geen kind van refNode
	}

		// Koppel eventlistener aan .videobox, het element waar video, controls, enz. in zitten.
		// stopPropagation voorkomt dat 'n klik op dit .videoBox of een van de kinderen door <body> wordt overgenomen. Aan de eventlistener onclick bij <body> is stopAlles() gekoppeld: stop alle video's. Dit moet natuurlijk niet gebeuren als je 'n video start, maar zonder het bubbelen te stoppen, is dit precies wat er zou gebeuren als je op de startknop klikt.
		// stopAndere: alle ándere video's moeten wel worden gestopt. Anders blijf de video op touchscreens doorspelen, terwijl de foto alweer is teruggezet.
	videoBoxArray[volgnr].addEventListener("click", function(ev) { ev.stopPropagation(); stopAndere(); }, false);
	
	var testvar = document.getElementsByTagName("body");				// Lees <body> in in testvar. Dat wordt dus 'n array met maar één element
	testvar[0].addEventListener("click", stopAlles, false);				// Koppel eventlistener aan testvar[0], oftewel: aan <body>

		// Pauzeer alle video's en zet het Afspeelteken >> op alle Afspeelknoppen. videoArray bevat alle <video>'s, dus ze worden allemaal
		// afgewerkt. Dit is bedoeld voor touchscreens: bij een aanraking buiten .videobox worden alle video's gestopt.
	function stopAlles() {
		for(i = 0; i < videoArray.length; i++) {
			videoArray[i].pause();
			plaatsAfspeelteken(i);
		}
	}
}

[Goeroeboeroe]

Internet Explorer 8 kent <video> niet, daarvoor is iets aparts nodig. (In tegenstelling tot wat ik eerder zei, opent de pagina in IE 8 toch redelijk snel, na wat aanpassingen.)
In de <head> komt het volgende te staan:

Code: Selecteer alles

<!--[if IE 8]>
	<link rel="stylesheet" href="css/ie-8.css">
	<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
<![endif]-->

Het script is een JavaScript dat bij html5medis.info staat. Je kunt het ook zelf op je eigen server zetten, maar ik zag geen verschil in snelheid. Dit JavaScript roept weer een aantal andere scripts aan van anderen, waaronder flowplayer. Dit zorgt ervoor dat IE 8 de mp4 kan afspelen in een flashplayer, die vrijwel iedereen met dit onding al heeft geïnstalleerd.

De css voor IE 8 (die bij mij dus in de map css staat, vandaar het 'css/' aan het begin van de href):

Code: Selecteer alles

ul.besturing {display: none;}

div#links a:hover img, div#rechts a:hover img {display: none;}

IE 8 heeft niets aan de eigen besturing, dus verbergen.
Om Joost mag weten welke reden verbergt IE 8 de afbeeldingen niet als je erover hovert, maar zet deze ongeveer 200 px omlaag. Doet 'n beetje denken aan de tijd dat de cameralui van Toppop dachten dat het wel geestig was om de zanger(es) ondersteboven, in stervorm en gevierendeeld weer te geven. Omdat deze techniek de Here zei geloofd gelukkig is verouderd, wil jij dat vast ook niet, dus verbergen we de onruststokers.

[Goeroeboeroe]

Dit is getest in de volgende browsers en systemen:

• Windows XP:
  Firefox, Opera, Safari en Google Chrome in een resolutie van 1440x900.
  Internet Explorer 8 in de resoluties 800x600, 1024x768, 1280x1024 en 1440x900.
  Internet Explorer 7 in de resoluties 800x600, 1024x768 en 1280x1024.
• Windows 7:
  Firefox, Opera, Safari, Google Chrome en Internet Explorer 9 in de resoluties 800x600, 1024x768 en 1280x1024.
• Windows 8:
  Alles is getest met touchscreen en toetsenbord/touchpad in de volgende browsers:
  Firefox, Opera, Google Chrome en Internet Explorer 10 (desktop-versie en tablet-versie) in de resoluties 800x600, 1024x768 en 1366x768.
• OS X:
  Firefox, Opera, Safari en Google Chrome in de resolutie 1024x768.
• Linux:
  Firefox, Opera en Google Chrome in de resoluties 800x600, 1024x768 en 1280x1024.
• iPad met iOS 6.0.1 in een resolutie van 1024x768 (MC979NF):
  Safari (portret en landschap).
  Opera Mini (portret en landschap).
  Chrome for IOS (portret en landschap).
• Android 4.0.3 in een resolutie van 1024x768 (CRESTA CTP888):
  Android browser, Opera Mobile, Firefox en Chrome voor mobiel (alles portret en landschap).
• Android 2.3.6 in een resolutie van 320x240 (Samsung Galaxy Y GT-S5360):
  Android browser (portret en landschap).
  Opera Mobile (éénkolomsstand aan/uit, portret en landschap).
  Opera Mini (éénkolomsstand aan/uit, portret en landschap).

Omdat het JavaScript zelf de <video>'s e.d. inleest, werkt dit script van 1 video tot ... video's op dezelfde pagina. De besturing hoeft ook niet dezelfde opmaak te hebben, deze kan per video verschillen. (Meer daarover bij de css hierboven. Een paar dingen lopen via JavaScript.) Ook de breedte van het voortgangsbalkje kan per video worden opgegeven.

Opera Mini geeft geen video's weer, dus daar zijn we snel mee klaar.

Internet Explorer 8 kent <video> niet. Die heeft eigen JavaScript en css. Dat werkt, alleen staan de controls wel 'n beetje over elkaar heen, vermoedelijk omdat de video's zo smal zijn. IE 8 geeft de mp4 weer via een flashspeler.

In alle andere browsers werkt het in principe zo: als je over 'n foto hovert, of deze aanraakt, wordt de eronder zittende video zichtbaar. Door een klik of aanraking kan deze afgespeeld of gepauzeerd worden.
Bij gebruik van een muis stopt de video, en komt de foto terug, als de muis meer dan 30 px buiten de spelende video komt. De meeste mensen zullen dit niet eens merken, omdat ze gewend zijn een video te stoppen door te klikken. Als je de muis echt heel supersnel beweegt, kan dit worden gemist en blijft de video spelen. Terwijl je hem niet meer ziet, want de afbeelding staat er weer. Daarom stoppen alle video's ook, als je ergens op de pagina klikt. Als je een video start, pauzeren alle andere eventueel nog spelende video's.
Op Android en Windows 8 met aanraakscherm werkt dit precies hetzelfde, behalve dat je daar het scherm moet aanraken buiten de spelende video.
Op iOS6 moet je het scherm twee keer aanraken. Als je de eerste keer 'n foto aanraakt, verdwijnt deze en wordt de video zichtbaar. Dat gebeurt via een :hover. Daarna kun je de video afspelen. Wat je daarna ook doet, de eerste aanraking van het scherm zet die foto terug en stopt niet de video. Apple vreet die eerste aanraking als het ware op en spuugt die als eerste weer uit. Je moet het scherm dus twee keer aanraken om de video te stoppen (of op de stopknop van de video drukken). Ook hier stoppen alle andere video's wel, als je 'n nieuwe video start.

Nog wat algemene dingen:
* De toegankelijkheid met 'n toetsenbord kun je vergeten. (Als het bij mij op de site komt, hoop ik dit op te lossen.)
* Je moet overal volume, timer, enz. gebruiken. Het kan bij geen enkele video worden overgeslagen. Uiteindelijk moet dit wel kunnen, maar dit script kan dat nog niet.
* Het voortgangsbalkje geeft de eerste paar px als het loopt linksonder wat vervorming, als je goed kijkt. Dit komt door de ronde hoeken die samen 8 px breed zijn. Is op te lossen, maar nogal ingewikkeld, dus dat komt wel als het bij mij op de site komt.
* Er zit geen geluid uit (in één keer), snel terug- en verderspoelen, en naar 'n bepaalde plek gaan in. Komt er wel in als het bij mij op de site komt.
* In iOS en Android kan het volume alleen met de hardwareknop worden geregeld. Alleen Firefox op Android kan wel overweg met de besturing. Ik laat het zo, want ooit kan dit misschien wel. En mensen die zo'n apparaat gebruiken, zullen dit weten.
* Het herkennen van IE 8 gebeurt in het JavaScript via 'browser sniffing'. Dit is een gruwelijk slechte, verouderde, onbetrouwbare methode. Maar in dit geval, omdat het maar om één browser gaat die nooit meer verandert, vind ik het 'n acceptabele methode.
* Er vindt geen controle op codecs of zo plaats. Ik ga ervan uit dat je WebM en mp4 gebruikt, en dat is voldoende voor elke browser (in combinatie met die constructie voor IE 8). Bij mp4 moet je even opletten: het is allemaal mp4, maar de codecs verschillen en niet elke browser kan met elke codec overweg.
* De video moet exact de juiste hoogte en breedte hebben, omdat browsers dit verschillend afhandelen. De een past breedte én hoogte aan aan <video> (vervormt dus). De ander neemt de hoogte en past de breedte aan, of omgekeerd, waarbij je dus boven en onder of links en rechts lege ruimte krijgt, of boven en onder of links en rechts een stuk wegvalt.
* Opera Mobile op Android 4: als de eerste video wordt afgespeeld, wordt gedurende 2-3 seconden de hele pagina ondersteboven getoond op de plaats van de video. Bij elke volgende video wordt aan het begin de vorig afgespeelde video 2-3 seconden ondersteboven getoond. Dit is een bug in Opera (of van mijn tablet...).