HTML. Media. Hans Roeyen V 3.0

Transcriptie

1 Media Hans Roeyen V maart 2015

2 Inhoud 1. (Multi)Media op websites Flash en Websites Video op je website YouTube insluiten op de pagina Video zonder YouTube Andere attributen voor het video element HTML Helpers (Plug-ins) Het <object> Element Het <embed> Element Opdracht... 8 Hans Roeyen HTML Media 2-8

3 1. (Multi)Media op websites Met Multimedia in de context van websites wordt verwezen naar de verschillende formaten waarin geluid en beelden worden aangeboden. De eerste browsers konden alleen maar tekst laten zien, later zijn daar afbeeldingen bijgekomen. De ondersteuning van geluid, animaties en video is later toegevoegd door de verschillende browsers. Elke browser deed dat op zijn eigen manier door verschillende formaten te ondersteunen of was er noodzaak aan een plug-in om de media weer te kunnen geven. Met HTML5 is het de bedoeling om gemakkelijker te kunnen werken met multimedia, zelfs zonder plug-ins. Multimedia heeft veel verschillende formaten zoals:.swf,.wav,.mp3,.mp4,.mpg,.wmv, avi. Het gebruik van verschillende formaten is natuurlijk ook onderhevig aan de evolutie en de ondersteuning op andere domeinen. Een video formaat dat meer en meer gebruikt wordt op het Internet is MP4. Het wordt aanbevolen door YouTube, is compatibel met Flash Players en wordt ondersteund door HTML5. Formaat Extensie Beschrijving MPEG.mpg -.mpeg Vroeger ondersteund in alle browser. Geen ondersteuning in HTML5 AVI.avi Door Microsoft ontworpen Geen ondersteuning in browsers WMV.wmv Windows Media Video (Microsoft) Geen ondersteuning in browsers QuickTime.mov Door Apple ontworpen Geen ondersteuning in browsers RealVideo.rm -.ram Ontworpen voor video streaming Geen ondersteuning in browsers Flash.swf -.flv Ontworpen door Macromedia Meestal een plug-in nodig voor browsers Ogg.ogg Ontworpen door Xiph.org Ondersteund door HTML5 WebM.webm Ontworpen door de Web Giants Adobe, Opera, Mozilla en Google Ondersteund door HTML5 MPEG-4 (MP4).mp4 Ontworpen door de Moving Pictures Expert Group Is gebaseerd op QuickTime en wordt aanbevolen op YouTube Ondersteund door HTML5 Hieruit maak je op dat enkel de drie laatste door HTML5 ondersteund worden. Voor audio formaten is een vergelijkbaar overzicht te maken. Samengevat komt het er op neer dat de formaten WAV Ogg MP3 (en MP4) ondersteund worden door HTML5. Hans Roeyen HTML Media 3-8

4 2. Flash en Websites Lange tijd was Flash de manier om video en audio op een website te plaatsen. In de begindagen van het Internet bood deze technologie de enige manier om animaties en multimedia te plaatsen op een webpagina. Het probleem met Flash is dat het geen open source is, je hebt (dure) software van Adobe nodig om het te maken en een plug-in om het te bekijken. Dat maakt dat een open standaard alternatief wenselijk was. Het voordeel van een open standaard (zoals HTML5 ) is dat het zich onafhankelijk opstelt voor elk platform of apparaat. In tegenstelling tot bijvoorbeeld Flash. Als Adobe plots zou beslissen om de compatibiliteit met bepaalde software te beëindigen of failliet gaat is dat voor de gebruiker een probleem. Door multimedia tags te voorzien in een open standaard zoals HTML5 wordt de koppeling tussen een bedrijf en de technologie uitgeschakeld. 3. Video op je website De gemakkelijkste manier om een video op een webpagina aan te bieden is via YouTube. Google bied deze service aan voor films die je zelf upload of bestaande content van andere YouTube gebruikers deelt. De werkwijze is gelijk in beide situaties. Het enige wat je moet doen is de link die YouTube voorziet te kopiëren in je HTML bestand YouTube insluiten op de pagina Op de pagina van YouTube worden de opties om een film te delen of in te sluiten op je HTML pagina toegankelijk via de Delen knop. De opties Delen Insluiten geven de verschillende mogelijkheden om de film vanop YouTube beschikbaar te of te delen. Hans Roeyen HTML Media 4-8

5 Delen geeft je een bruikbare link naar alle mogelijke sociale media. Onderaan stel je in vanaf welk moment, in te stellen per minuut, de film zal openen bij de geadresseerde. Insluiten geeft je de HTML code die je kunt gebruiken op je eigen website. Het eerste deel van de code is een iframe: De attributen van deze tag bepalen de source, afmeting, border en of het toegelaten is om de weergave aan te passen naar Full-screen. Meer instellingen zoals het formaat van de video, andere video s tonen na afloop, ondertiteling, bediening stel je onderaan in. Om deze manier kun je de code in de HTML plaatsen. De indeling van je pagina bepaal je zelf natuurlijk. In dit voorbeeld plaats je de iframes gewoon in de body van de pagina, de <br> tag is zelfs niet nodig. De afmeting van het videoscherm stel je zelf in maar zeker niet groter dan de originele kwaliteit. Hans Roeyen HTML Media 5-8

6 Deze werkwijze is de gemakkelijkste manier om video op je webpagina te plaatsen. Je merkt dat zelf als je websites bezoekt met videomateriaal. Zelfs bedrijven gebruiken deze optie. Het voordeel met deze werkwijze is dat de video niet alleen op je website te zien is maar ook op YouTube. Als je deze werkwijze toepast moet je er tijdens het testen van je HTML code wel aan denken dat je verbonden bent met Internet Video zonder YouTube Vanaf HTML5 is het mogelijk om video op je webpagina te plaatsen (en te bekijken) zonder dat je een plug-in nodig hebt. De nieuwe tag heet vanzelfsprekend <video>, en voorziet in de mogelijkheid om video in te sluiten op je HTML5 pagina. De ondersteunde formaten voor de videobestanden werden reeds vermeld. Uiteraard moet je bestand ergens bewaard worden. De juiste werkwijze voor een link naar de locatie waar je video opgeslagen werd heb je in de module HTML Links kunnen oefenen. Het video element heeft een aantal attributen die je enige controle geven over het element. De attributen preload, autoplay, loop, en muted zijn parameters die bepalen hoe de video zich moet gedragen zonder tussenkomst van de gebruiker. Preload zorgt ervoor dat de video al geladen wordt voordat de gebruiker op afspelen (start) klikt. Autoplay laat het afspelen van de video starten als de pagina geladen is. Tenzij je een heel goede reden heb is het geen goed idee om dit te gebruiken. Loop zal zoals je verwacht de video opnieuw laten spelen na het bereiken van het einde. Het Muted attribuut zal bepalen of je het geluid mee laat afspelen of niet Andere attributen voor het video element Het attribuut poster plaatst een placeholder die zichtbaar is terwijl het videobestand wordt geladen. Zonder dit attribuut wordt het eerste frame getoond. Normaal gebruik je een jpg bestand als parameter. Het attribuut controls geeft aan of je de playback controlers waarmee de bezoeker het afspelen kan beheren. Je moet er wel rekening mee houden dat niet alle attributen ondersteund worden door alle browsers(versies). Een actueel overzicht is te lezen op Het element audio is verwant aan video en zal vergelijkbare attributen kennen. Voorbeelden en meer informatie via onderstaande links. Hans Roeyen HTML Media 6-8

7 Voorbeelden HTML Helpers (Plug-ins) Helper applications zijn programma s die de functionaliteit van de browser uitbreiden. HTML helper applications zijn beter gekend als plug-ins, met de Java applets als bekendste voorbeeld. Met HTML5 kun je plug-ins toevoegen aan je pagina met de <object> tag of de <embed> tag. Deze plug-ins gebruik je voor verschillende doeleinden: tonen van kaarten, scannen naar virussen, een id nakijken. Zoals je weet gebruik je voor video en audio: <video> en <audio> tags 4.1. Het <object> Element Het <object> element is door alle browsers ondersteund en laat toe om een object in te sluiten in een HTML document Het wordt gebruikt om plug-ins zoals Java applets, PDF readers, Flash Players) aan web pagina s toe te voegen Het <embed> Element Het <embed> element is eveneens ondersteund door de grote browsers en lijkt heel erg op het object element. Het verschil is dat dit element geen alternatieve tekst kan bevatten. Een andere feit over dit element is dat het al lang bestaat maara pas sinds HTML5 deel uit maakt van de HTML5 specificatie. Bij validatie zal het toegestaan worden in HTML5 maar niet in een HTML4 pagina. Voorbeeld met object <!DOCTYPE html> <html> <body> <object data="winter.jpg"></object> </body> </html> Meer informatie via volgende link: Hans Roeyen HTML Media 7-8

8 Voorbeeld met embed <!DOCTYPE html> <html> <body> <embed src="winter.jpg"> </body> </html> 5. Opdracht Maak verschillende pagina s die je kennis van de voorbeelden tonen. Probeer te experimenteren met de code. Hans Roeyen HTML Media 8-8