Webbteknik 1

Laboration 9A

Inbäddad media

Laboration L9a är uppdelad i tre delar, där vi tittar på hur olika former av extern media kan inkluderas på en webbsida.

Laboration 9A-1 - Ljud och video

I denna första del tittar vi på hur vi kan ta in ljud och video på olika sätt.

Mediefiler

  • I mappen L9a/media finns en ljudfil i formatet mp3 och en videofil i formatet mp4. Dessa ska du konvertera till två andra format, så att vi har flera filer att arbeta med i övningarna.
  • Gå till https://online-audio-converter.com/ och konvertera filen music.mp3 till formatet ogg. Ladda ner den konverterade filen music.ogg och lägg den i media-mappen.
  • Gå till https://convert-video-online.com/ och konvertera filen mopedrally.mp4 till formatet webm. Ladda ner den konverterade filen mopedrally.webm och lägg den i media-mappen.

Öppna i Visual Studio Code

  • Öppna mappen L9a i VSC.
  • Öppna filerna lab9a-1.html och style.css samt öppna sidan i Live Server.

Ljud

  • Lägg in start- och sluttagg för ett audio-element i HTML-filen. Ta med attributet controls i starttaggen.

    • Attributet controls har inget värde, så skriv endast controls inom taggen.
    • Med detta attribut anger man att kontrollpanelen, med bl.a. knapp för att starta och stoppa ljudet, ska visas.

  • Referera till ljudfilerna:

    • Inom audio-elementet lägger du in ett source-element. Ta med ett src-attribut med referens till filen music.ogg (ange rätt sökväg) samt ett type-attribut med "audio/ogg".
    • Lägg in ytterligare ett source-element med referens till music.mp3 och typen "audio/mp3".

  • Efter de båda source-elementen lägger du in en länk för nedladdning av mp3-filen.

    • Denna länk visas endast i webbläsare som inte har stöd för audio-elementet.

  • Under audio-elementet lägger du in den HTML-kod som finns i filen music-attribution.txt.

    • Det är alltid viktigt att referera till upphovsmannen enligt dennes önskemål.

  • Prova att spela ljudet i webbläsaren.

  • Testa även andra attribut som loop och autoplay, se lista på attribut på https://www.w3schools.com/tags/tag_audio.asp

  • I CSS-koden lägger du in en regel för audio med width: 600px;

    • Detta blir storleken på kontrollpanelen.

Video

Video-elementet

  • Lägg in start- och sluttagg för ett video-element. Ta med attributet controls.
  • Lägg in två source-element med mopedrally.mp4 och "video/mp4" respektive mopedrally.webm och "video/webm".
  • Efter de båda source-elementen lägger du in en länk för nedladdning av mp4-filen.
  • Prova att spela filmen i webbläsaren.

Poster och andra attribut

Undertexter

  • Efter source-elementet lägger du till ett track-element med attributen src="media/subtitles-sv.vtt" kind="subtitles" srclang="sv" label="Svenska".
    • Elementet track måste ligga efter source. Annars blir det fel då du validerar HTML-koden.
  • Prova i webbläsaren. Klicka på symbolen i kontrollraden, för att slå på textning.
  • Prova också att lägga in attributet default i track-elementet.
    • Då visas textningen automatiskt, när filmen spelas. Den användare som inte vill ha textningen, får då stänga av den.
  • Lägg in ytterligare ett track-element med src="media/subtitles-en.vtt" kind="subtitles" srclang="en" "label="Engelska".

CSS-kod

  • Lägg in en regel för video med width: 500px; (eller valfri storlek).
    • Height anpassas automatiskt.
  • Lägg också in en regel för video::cue med font-size: 2rem; och line-height: 2.5rem;
    • Denna regel gäller för undertexterna.

Video från YouTube

  • Ta fram valfri film på YouTube.

  • Klicka på knappen Dela och sedan Bädda in.

  • Kopiera HTML-koden och klistra in den i ditt eget HTML-dokument.

  • Fixa till koden:

    • Ta bort attributet frameborder, som är gammalt och inte finns i HTML5.
    • I CSS-filen lägger du istället in en regel för iframe med border: none;

Validera

Laboration 9A-2 - Kartor

I denna laboration ska du ta in olika vyer från Google maps.

Arbetsfiler

  • Öppna filerna lab9a-2.html och style.css samt öppna sidan i Live Server.

Karta

  • Gå till Google maps, ta fram valfri plats och zooma in kartan till önskat område.
  • Klicka på menyknappen (tre vågräta streck) längst upp till vänster.
  • Välj Dela eller bädda in karta.
  • Klicka på Bädda in karta.
  • Klicka på Kopiera HTML.
  • Klistra in koden i ditt HTML-dokument.
  • Storleken på kartan kan ändras med width och height antingen direkt i HTML-koden eller med hjälp av CSS.

Vägbeskrivning

  • Klicka på knappen för vägbeskrivning (blå symbol med vit böjd pil) i Google maps.
  • Ange två platser. Välj önskat färdsätt.
  • Gör likadant som ovan för att dela, bädda in och kopiera HTML-kod, som du klistrar in i ditt HTML-dokument.

Satellitbild

  • Växla till satellitvy (“knappen” längst ner till vänster) och ta fram önskad plats.
  • Gör likadant som ovan, för att ta fram HTML-koden till ditt HTML-dokument.

Gatuvy

  • Ta fram önskad plats och zooma in. Gå ner på gatunivå (med den gula gubben) och vrid till den vy du vill ha.
  • Klicka på de tre prickarna och välj Dela eller bädda in bild. Gör sedan likadant som ovan, för att ta fram HTML-koden och klistra in i ditt HTML-dokument.

Laboration 9A-3 - Widget

I denna laboration ska du ta in en s.k. widget med väderdata.

En väderwidget

  • Gå till https://www.vackertvader.se och sök fram önskad plats.
  • Klicka på Väderwidget, längst ut till höger i navigeringsmenyn.
  • Välj form, färg och vad som ska finnas med.
  • Kopiera HTML-koden och klistra in i ditt HTML-dokument.

Klar