www.css-voorbeelden.nl

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>

Code: Selecteer alles

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

Code: Selecteer alles

<div class="videobox">

Code: Selecteer alles

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

Code: Selecteer alles

<ul class="besturing">

Code: Selecteer alles

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

Code: Selecteer alles

<li class="timer">

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

<li class="geluid">

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

Code: Selecteer alles

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

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;}
}

Code: Selecteer alles

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

Code: Selecteer alles

a:focus {outline: 0;}

Code: Selecteer alles

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

Code: Selecteer alles

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

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;
}

Code: Selecteer alles

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

Code: Selecteer alles

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

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

Code: Selecteer alles

ul.besturing li {float: left;}

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;
}

Code: Selecteer alles

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

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";

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;
}

Code: Selecteer alles

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

Code: Selecteer alles

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

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;
}

Code: Selecteer alles

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

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;
}

Code: Selecteer alles

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

Code: Selecteer alles

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

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;
}

Code: Selecteer alles

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

Code: Selecteer alles

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

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);
		}
	}
}

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]-->

Code: Selecteer alles

ul.besturing {display: none;}

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