Uppgiften

Det finns olika sätt att lägga till film eller ljud på din webbsida. Låt oss titta närmare på dem tillsammans.

Lägg till en film från YouTube

Att lägga till filmer från YouTube är jättelätt.

Det kommer se ut ungefär såhär:

<iframe width="560" height="315" src="http://www.youtube.com/embed/FxhGIajRsq4"
   frameborder="0" allowfullscreen></iframe>

Just det här fragmentet med kod skulle lägga till en Code Club-film till din webbsida. Det är bara att kopiera och klistra in det på det stället på webbsidan där du vill att filmen ska ligga.

Lägg märke till attributen width och height. De gör så att du kan bestämma hur stor del av sidan som filmrutan ska täcka, därför kan du ändra dem till de mått som du tycker passar.

Lägg till en film från Vimeo.

<iframe src="http://player.vimeo.com/video/44738167" width="600" height="338"
   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Lägg till en film från din dator

Om du har en film som du själv har spelat in kan du lägga upp den på din hemsida utan att första lägga upp den på YouTube eller Vimeo.

    <video src="spaceship_landing.mp4">
    </video>

Tyvärr är det irriterande med att lägga upp en film att inte alla webbläsare kan spela upp alla videoformat. Du behöver spara din egen film i formaten .mp4 och .ogv minst, eftersom att de formaten i alla fall fungerar i de flesta webbläsare.

För att se till att webbläsaren förstår att det finns mer än ett videoformat tillgängligt, skriv så här:

    <video>
        <source src="spaceship_landing.ogv" type="video/ogg">
        <source src="spaceship_landing.mp4" type="video/mp4">
    </video>
    <video poster="spaceship_landing.jpg">
        <source src="spaceship_landing.ogv" type="video/ogg">
        <source src="spaceship_landing.mp4" type="video/mp4">
    </video>
    <video poster="spaceship_landing.jpg" autoplay>
        <source src="spaceship_landing.ogv" type="video/ogg">
        <source src="spaceship_landing.mp4" type="video/mp4">
    </video>
    <video poster="spaceship_landing.jpg" controls>
        <source src="spaceship_landing.ogv" type="video/ogg">
        <source src="spaceship_landing.mp4" type="video/mp4">
    </video>
    <video poster="spaceship_landing.jpg" width="600" height="400">
        <source src="spaceship_landing.ogv" type="video/ogg">
        <source src="spaceship_landing.mp4" type="video/mp4">
    </video>

Lägg till en ljudfil från din dator

Så som du lägger upp ljudfiler på din webbsida från din dator är liknande det sättet som använder för att lägga upp filmfiler.

    <audio src="spaceship.mp3">
    </audio>

Lägg märke till src-attributet som pekar mot filen.

Precis som med filmfiler så kan inte alla webbläsare spela upp alla typer av ljudfiler, så för att se till att så många som möjligt ska kunna höra ljudet måste du lägga upp ljudfilen i så många olika format som möjligt, du bör åtminstone lägga upp .mp3 och .oga.

    <audio>
        <source src="spaceship.mp3" type='audio/mp3'>
        <source src="spaceship.ogg" type='audio/ogg; codecs=vorbis'>
    </audio>
    <audio controls>
        <source src="spaceship.mp3" type='audio/mp3'>
        <source src="spaceship.ogg" type='audio/ogg; codecs=vorbis'>
    </audio>
    <audio controls autoplay>
        <source src="spaceship.mp3" type='audio/mp3'>
        <source src="spaceship.ogg" type='audio/ogg; codecs=vorbis'>
    </audio>