Ljud och video i HTML5

Läs om översikten i Kap 5 om
”Video Containers”: http://student.oedu.se/~jf/diveintohtml5.info/video.html#video-containers
”Video Codecs”: http://student.oedu.se/~jf/diveintohtml5.info/video.html#video-codecs
”Audio Codecs”: http://student.oedu.se/~jf/diveintohtml5.info#audio-codecs
”What works on the web”: http://student.oedu.se/~jf/diveintohtml5.info/video.html#what-works

Läs Dive Into HTML avsnittet om audio/video taggarna (“At Last The Markup”): http://student.oedu.se/~jf/diveintohtml5.info/video.html#markup

Uppgiften ger en introduktion till hur vi kan använda oss av olika former av ljud och bild i HTML5. Till skillnad från tidigare labbar så får ni inga givna filer (bortsett från ljud- och videofiler). I stället finns ett antal krav uppställda som er sida ska hantera på ett korrekt sätt. Det som är viktigt är funktionaliteten, men försök gärna ge er webbsida ett trevligt utseende med CSS.

Den sida ni ska skapa har två olika medier som ska hanteras, video och ljud. Tips: Använd en webbläsare som klarar av de taggar som ska användas i uppgiften, t.ex. Chrome.

• På er sida ska ni använda <video>-taggen för att visa två små filmklipp.
• Filmklippen kommer i två versioner: en Mpeg4 (.mp4) och en Ogg Vorbis (.ogv). Tyvärr finns det normalt inte ett videoformat som hanteras av alla webbläsare. En av uppgifterna är därför att tillhandahålla flera filer i olika format till användaren, vars webbläsare därefter får spela upp den fil som hanteras. Detta skall dock göras inom samma video-tagg. Alltså, en videotagg för båda versionerna av den ena filmen och en videotagg för båda versionerna av den andra filmen.
• Ni ska länka till video-filerna med hyperlänkar och ej använda filerna lokalt. Använd <source>-taggar med src- och type-attribut för att länka till de olika filerna.
• Filmklippen ska förladdas, och det ska gå att kontrollera uppspelningen av klippet genom webbläsarens kontroller, d.v.s. webbläsaren ska tillhandahålla de vanliga start/stop/spola/volym knapparna.
• ”Waterballoon1” ska starta av att webbsidan laddas, men inte ”Waterballoon2”, som ska startas med hjälp av kontrollerna.

• Ni ska använda en <audio>-tagg för att spela ett ljudklipp på er sida,.
• Ljudklippet kommer i två versioner: en mp3 (.mp3) och en Ogg (.ogg). Precis som med video finns det inte heller för ljud ett format som fungerar för alla webbläsare, så ni ska använda båda klippen på er sida (inom samma audio-tagg).
• Tänk på att länka till ljud-filerna med hyperlänkar och ej använda filerna lokalt. Använd <source>-taggar med src- och type-attribut för att länka till de olika filerna.
• Ljudklippet ska starta av att webbsidan laddas, och det ska gå att kontrollera uppspelningen av klippet genom webbläsarens kontroller.

• Sidan ska ha huvudrubrik samt underrubriker för video- och audio-delarna.
• En ram ska finnas som omsluter båda videospelarna, men inte audiospelaren.
• En sidfot ska finnas som innehåller texten nedan som beskriver rättigheterna för video och ljudfilerna.
• I övrigt bestämmer du själv vilka formatteringar som behövs för att göra en snygg och korrekt sida.

Samtliga filer finns för länkning på följande länk: http://student.oedu.se/~daniel/videoaudio

Ljudklipp 'Independence Day' av DoKashiteru, är licenserat under Creative Commons BY NC, och det är nerladdat från http://ccmixter.org/. Videoklippen är från http://www.lucidmovement.com, och kan användas för icke kommersiellt bruk och så länge de inte används på sidor med liknande format och användning.

Om ni lägger er webbsida på en publik webbserver (som är åtkomlig via internet) så bör ni lägga till en text likt ovanstående paragraf för att hålla er inom licensens ramar, eftersom licensen kräver att den som använder klippet:

• Inte använder det kommersiellt.
• Ger 'attribution' (berättar vem som är skaparen).

Filer bör ni ge lämpliga namn (undvik dock tecken som kan strula med teckenkodningar, exempelvis å, ä och ö). All HTML och CSS ni skriver ska vara validerad innan ni lämnar in. HTML skall vara HTML5