Introduksjon

Det finnes flere måter å legge til video eller lyd til sidene dine. La oss ta en nærmere titt på dem sammen.

Legge til video fra YouTube

Å legge til videoer fra YouTube er egentlig ganske enkelt.

Det vil se omtrent slik ut:

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

Denne spesifikke kodefragment ville legge en CodeClub video til din side. Bare kopier og lim inn koden der du ønsker at videoen skal vises.

Legg merke til width (bredde) og height (høyde) attributtene. De lar deg kontrollere hvor stor videoen vil være på siden, så du kan gjerne endre dem.

Add a video from Vimeo.

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

Legg til en videofil fra datamaskinen

Hvis du har en video du har laget, kan du legge den på siden din uten å måtte laste det opp til YouTube eller Vimeo.

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

Dessverre kan ikke alle nettlesere spille alle videoformater. Du blir nødt til å lagre den i minst .mp4 og .ogv formater, som vil fungere i de fleste nettlesere.

For å la nettleseren vite at vi har mer enn ett format av video klar, skriver vi slik:

    <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>

Legg til en lydfil fra datamaskinen

Måten å legge lydfiler til siden din fra datamaskinen din er omtrent som med videofil.

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

Legg merke til src atributtet som peker til filen.

Akkurat som med video, kan ikke alle nettlesere spille hver type lydfil, så for å sørge for at så mange som mulig kan høre lyden du har til å legge filen i mer enn ett format, i hvert fall i .mp3 og .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>