Level 3HTML: Legg til lyd og video

Skrevet av: Omsett frå Code Club UK

Oversatt av: Stein Olav Romslo

Kurs: Web
Tema: Tekstbasert, Nettside
Fag: Programmering, Kunst og håndverk, Norsk
Klassetrinn: 5.-7. klasse, 8.-10. klasse
Bilde av BokmålPå Bokmål

Introduksjon

Lær å leggje til lyd og video på nettsida di!

Det finst fleire måtar å leggje til lyd, bilete og video på nettsidene dine. La oss sjå på dei saman.

Legg til video frå YouTube

Å leggje til ein video frå YouTube er veldig lett.

Koden vil likne på dette:

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

Denne kodesnutten vil leggje til ein kodeklubbvideo på sida di. Kopier koden og lim den inn der du vil at videoen skal visast. Legg merke til attributtane width (breidde) og height (høgde). Dei gjer at du kan bestemme kor stort videoen skal visast på nettsida. Gjerne prøv å forandre på dei.

Legg til ein video frå Vimeo.

<iframe src="http://player.vimeo.com/video/44738167?title=0&amp;byline=0&amp;portrait=0&amp;badge=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Legge til ein video frå datamaskina di

Viss du har ein video du har laga sjølv kan du leggje den til på sida utan å laste den opp på YouTube eller Vimeo.

  • Akkurat som img-taggen har video ein src-attributt som peikar på fila:

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

Det som er keisamt når me legg til video er at ikkje alle nettlesarane klarar å spele av alle videoformata. Formata .mp4 og .ogv fungerer i dei fleste nettlesarane, så det kan løne seg å lagre videoen din i eitt av desse formata.

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

Legg til ei lydfil frå datamaskina di

Måten ein legg til lydfiler på nettsida er veldig lik måten ein legg til videoar på.

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

Legg merke til src-attributten som peikar på fila.

Akkurat som med video er det ikkje alle nettlesarar som kan spele alle typer lydfiler. For å la flest mogleg få tilgang til å høyre på fila bør du leggje den til i fleie format. Formata flest nettlesarar klarar å spele av er .mp3 og .oga.

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

Forbedre denne siden

Funnet en feil? Kunne noe vært bedre?
Hvis ja, vennligst gi oss tilbakemelding ved å lage en sak på Github eller fiks feilen selv om du kan. Vi er takknemlige for enhver tilbakemelding!