Level 3HTML: Legg til lyd og video

Skrevet av: Oversatt fra Code Club UK

Oversatt av: Trude Martinsen

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

Introduksjon

Lær å legge til lyd og video på din nettside!

Det finnes flere måte å legge til lyd, bilder og video på nettsidene dine. La oss ta en titt på de sammen.

Legg til video fra YouTube

Å legge til enn video fra YouTube er veldig lett.

Koden vil ligne på dette:

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

Denne kodesnutten vil legge til en kodeklubbvideo på siden din. Kopier koden og lim din der du vil at videoen skal vises. Legg merke til width(bredde) og height(høyde) attributtene. De gjør at du kan bestemme hvor stort videoen skal vises på nettsiden. Forsøk gjerne å forandre på de.

Legg til en video fra 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 en video fra datamaskinen din

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

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

Det som er kjedelig når man legger til video er at ikke aller nettleserene klarer å spille av alle videoformatene. .mp4 og .ogv fungere i de fleste nettleserene, så det kan lønne seg å lagre videoen din i et av de formatene.

  <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 en lydfil fra datamaskinen din

Måten man legger lydfiler til på nettsiden din er ganske lik måten man legger til videoer på.

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

Legg merke til src attributtet som peker på filen.

Akkurat som med video er det ikke alle nettlesere som kan spille alle type lydfiler. For å sørge for at flest mulig kan høre på filen bør du legge den til i flere formater. .mp3 og .oga er formatene som flest nettlesere klarer å spille av.

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