Differences

This shows you the differences between two versions of the page.

--- webbutv_09 [2013-02-25 12:06]
Joakim Forsgren
+++ webbutv_09 [2017-09-01 14:54]
@@ Line 1: / Line 1: @@
-====== Ljud och video i HTML5 ======
-===== Läsanvisningar =====
-Läs om översikten i Kap 5 om \\
-”Video Containers”: [[http://diveintohtml5.net/video.html#video-containers]] \\
-”Video Codecs”: [[http://diveintohtml5.net/video.html#video-codecs]] \\
-”Audio Codecs”: [[http://diveintohtml5.net/video.html#audio-codecs]] \\
-”What works on the web”: [[http://diveintohtml5.net/video.html#what-works]] \\ \\
-Läs Dive Into HTML avsnittet om audio/video taggarna (“At Last The Markup”):
-[[http://diveintohtml5.net/video.html#markup]]
-===== Syfte =====
-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.
-===== Uppgift =====
-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.
-==== Video ====
-  * 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.
-==== Ljud ====
-  * 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.
-==== HTML och CSS ====
-  * 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.
-===== Givna media-filer =====
-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).
-===== Inlämning =====
-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
-<php>
-/*
-HTML
-----
-<!DOCTYPE html>
-<html lang="sv">
-    <head>
-        <title>Audio och video</title>
-        <meta charset="utf-8" />
-        <link rel="stylesheet" href="pagestyle.css" />
-    </head>
-    <body>
-        <header>
-            <hgroup>
-                <h1>Mediasidan</h1>
-                <h2>Lite video och ljud</h2>
-            </hgroup>
-        </header>
-        <section>
-            <h1>Video</h1>
-            <div id="movieplayer">
-                <video controls preload autoplay>
-                    <source id="videoSource1" src="http://student.oedu.se/~daniel/videoaudio/WaterBalloon1.mp4" type='video/mp4'>
-                    <source id="videoSource2" src="http://student.oedu.se/~daniel/videoaudio/WaterBalloon1.ogv" type='video/ogg'>
-                </video>
-                <video controls preload>
-                    <source id="videoSource1" src="http://student.oedu.se/~daniel/videoaudio/WaterBalloon2.mp4" type='video/mp4'>
-                    <source id="videoSource2" src="http://student.oedu.se/~daniel/videoaudio/WaterBalloon2.ogv" type='video/ogg'>
-                </video>
-            </div>
-        </section>
-        <section>
-            <h1>Audio</h1>
-            <audio controls preload autoplay>
-                <source id="audioSource1" src="http://student.oedu.se/~daniel/videoaudio/DoKashiteru_-_Independence_Day.mp3" type='audio/mpeg'>
-                <source id="audioSource2" src="http://student.oedu.se/~daniel/videoaudio/DoKashiteru_-_Independence_Day.ogg" type='audio/ogg'>
-            </audio>
-        </section>
-        <footer>
-            <p>Obligatorisk uppgift i Webbutveckling</p>
-            <p><em>Ljudklipp 'Independence Day' av DoKashiteru, är licenserat under Creative Commons BY NC,
-            och det är nerladdat från <a href="http://ccmixter.org/">http://ccmixter.org/</a>.
-            Videoklippen är    från <a href="http://www.lucidmovement.com">http://www.lucidmovement.com</a>,
-            och kan användas för icke komerciellt bruk och så länge de inte används på sidor med liknande
-            format och användning.</em></p>
-        </footer>
-    </body>
-</html>
-CSS (med en massa extra)
----
-body {
-	color: #000000;
-	background-color: #FFFFFF;
-	padding: 3ex;
-	margin: 0;
-}
-h1, h2{
-	font-family: Arial, sans-serif;
-	color: #123456;
-	background-color: inherit;
-	padding: 0;
-	text-align: center;
-}
-header h1{
-	font-size: 6ex;
-	margin: 0.5ex 0ex 0.5ex 0ex;
-}
-header h2{
-	font-size: 2.5ex;
-	margin: 1ex 0ex 4ex 0ex;
-}
-section h1 {
-	font-size: 3.3ex;
-	margin: 1ex 0ex 1ex 0ex;
-	text-align: left;
-}
-p {
-	margin: 2.5ex 0ex;
-	padding: 0;
-	font-family: "Times New Roman", serif;
-	font-size: 2.2ex;
-	text-align: justify;
-}
-footer p{
-	text-align: center;
-}
-header p{
-	text-align: center;
-	color: #FF0000;
-	background-color: inherit;
-}
-header{
-	margin: 0ex 1ex 0ex 1ex;
-	border-bottom: 1px solid #000;
-}
-section{
-	margin: 0ex 1ex 0ex 1ex;
-	padding: 3ex 0;
-	text-align: center;
-	border-top: 1px dotted #AAA;
-}
-footer{
-	border-top: 1px solid #000000;
-	font-size: 1.8ex;
-	margin: 1ex;
-	padding: 1ex;
-}
-video{
-	width: 70ex;
-}
-audio{
-	margin: 3ex;
-}
-#movieplayer{
-	width: 70ex;
-	border: solid 1px #000000;
-	padding: 2ex;
-	margin: 2ex auto;
-	text-align: center;
-	color: #000;
-	background-color: #FFF;
-}
-em{
-	font-style: italic;
-}
-a, a:visited{
-	text-decoration: none;
-	color:#0000FF;
-	background-color:inherit;
-}
-a:hover, a:focus{
-	color: #FF6347;
-	background-color:inherit;
-}
-*/
-</php>