Video plaatsen op webpagina

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

Voor het plaatsen van video maak je gebruik van het html-element -video-.

Deze start je op en sluit je weer af.

Ik plaats direct het attribuut -controls- binnen het video-element.

Bewaar het document en voilà.

De browser toont direct al een videospeler met de besturingsknoppen.

Het videobestand geef ik aan met het html-element -source-.

Hierin plaats ik het attribuut src=" " .

En tussen de quotes de route naar het videobestand.

In de Local Root Folder staat een map en die heet video. Ik kan hem hier openklappen.

Zien welk bestand hierin staat.

Dus ik geef eerst de maanaam aan 'video/' .

En daarin staat het bestand gracht.mp.

Ik bewaar het document en soms moet je even de pagina verversen.

Om daadwerkelijk de verandering door te voeren. En daar is dan mijn video.

Ontbreekt nog een verplicht attribuut en dat is namelijk de type=" ".

En ditmaal typ je video/mp, het type video.

Je kunt in het voorbeeldvenster op de knop Play drukken om de video af te laten spelen.

Elke browser heeft een eigen player met meer of minder functies.

In safari kun je bijvoorbeeld de video seconde voor- of achteruit laten springen.

In Firefox en Chrome zit een knop waarmee je de video beeldvullend kunt tonen.

En Chrome biedt een optie om de video apart in het beeldscherm te tonen. Ook handig!

Net als bij het audiobestand kun je binnen het video-element ook nog meerdere bronbestanden opgeven.

Naast het mp formaat kun je dan ook nog kiezen voor het webM-formaat.

Dat ziet er zo uit. Het type is dan ook webM.

En dan heb je nog het ogg-formaat. En ook daarvan moet je dan de juiste type aangeven, ogg.

Als de browser dan de mp niet kan afspelen dan probeert hij gewoon één van de volgende bestanden.

Door drie verschillende bestanden aan te bieden heb jij in ieder geval je best gedaan.

Deze bestanden zijn alleen niet aanwezig dus ik haal deze broncode hier weer weg.

Er zijn nog een aantal attributen voor het video-element die ik met je wil aflopen.

Je kunt de grootte van de videospeler bepalen door een andere hoogte in te stellen. En doe je met height=" " .

Tussen de quotes typ je de nieuwe hoogte in, bijvoorbeeld px.

De breedte wordt automatisch proportioneel aangepast.

In plaats van de hoogte te bepalen kun je ook de breedte bepalen. Dat doe je dan met de width.

Nu wordt de hoogte proportioneel aangepast.

En natuurlijk kun je ook de breedte en de hoogte aanpassen.

Let op! Je wijzigt hiermee niet de grootte van het videobestand maar van de player.

Het kan er dus vreemd uitzien.

De video wordt altijd proportioneel binnen de beschikbare ruimte in de player aangepast.

Met het attribuut loop zal de video zichzelf herhalend gaan afspelen.

Het attribuut autoplay maakt dat de video zichzelf gaat afspelen zodra het videobestand is geladen.

De meeste mensen houden daar niet van. Die willen zelf bepalen of ze de video gaan bekijken

Dus die zou ik niet aanraden.

Je kunt ook weer kiezen voor een preload.

En dan kun je kiezen uit drie opties.

'None'. Dan wordt de video pas opgehaald als de bezoeker op play drukt.

Daardoor kan het even duren voordat deze dus afgespeeld kan worden.

Metadata download de metadata die aan de video is verbonden.

Dat is dan weer die extra informatie over een bestand. Denk aan copyright, bestandsformaat, locatie etcetera.

En auto zorgt ervoor dat tijdens het laden van de webpagina direct ook het videobestand wordt opgehaald.

Zodat deze zo snel mogelijk kan worden afgespeeld.

Daar zou ik dan voor kiezen.

Dan heb je nog het attribuut poster=" ".

En dan kun je tussen de quotes de route naar een andere afbeelding toewijzen.

Ik heb in de map img een afbeelding voorbereid die ik als start-afbeelding wil gaan gebruikten.

Deze heet gracht-poster.jpg.

Ik bewaar mijn document. Ververs eventueel opnieuw de pagina. En die ziet er zo uit.

Dat is gewoon het eerste plaatje dat nu getoond wordt.

Je weet nu hoe je zelf video plaatst op een webpagina.

Toch wil ik afsluiten met het volgende.

Een videobestand kan behoorlijk veel MB's in beslag nemen.

De website kan daardoor trager gaan lopen.

Ook het afspelen van de video kan moeizaam zijn.

En met horten en stoten gaan wat het kijken nou niet bepaald prettig maakt.

Afhankelijk van het soort hostingpakket wat je hebt afgesloten kan het je ook geld kosten.

Als heel veel mensen jouw video's gaan afspelen.

Want hiermee creëer je dataverkeer en daarvoor moet je soms extra betalen.

De meesten zullen er dan ook voor kiezen om video's te plaatsen op YouTube of Vimeo

En dan deze video van YouTube of Vimeo te embedden op de pagina.

Ik heb deze video ook al gepost op Youtube.

Onder de video klik je op de knop Delen.

En daar kies je voor Insluiten.

Kopieer de html van YouTube met de knop Kopiëren.

Keer terug naar Brackets en ik vervang deze video met de gekopieerde broncode.

Voor het insluiten van een bestand of document in een webpagina wordt het html-element -iframe- gebruikt.

Ik bewaar het document,

En daar staat mijn YouTube video op de pagina.

Feitelijk heb je op deze manier enkel een link gemaakt naar de video op YouTube.

Maar deze wordt wel afgespeeld op jouw pagina.

Het fijne is dat het streamen van de video door YouTube wordt gedaan.

Dus het kost jou geen dataverkeer.

Daarnaast bieden diensten als YouTube of Vimeo natuurlijk een heel goede, betrouwbare en snelle streaming.