Home > Ressource > Tips > Hvordan man laver en HTML5 Slideshow

Hvordan man laver en HTML5 Slideshow

HTML5, er som den næste generation web standard, rundt om hjørnet. Vil du tilføje HTML5 support til din hjemmeside? Måske er det tid i det mindste at forberede. Denne artikel vil vise dig 2 måder at lave HTML5 slideshow og integrere til dit websted.

Selvkørende HTML5 Slideshow

En af de største opgradering af HTML5 er at du direkte kan indlejre og afspille videoer online ved hjælp af. Denne måde, besøgende kan se HTML5 diasshow, så længe deres browser understøtter HTML5. Ingen Flash player påkrævet. Da HTML5 ikke er kommet til sin endelige udgave, kunne video codec sandsynligvis bruge WebM, H264, Ogv eller begge dele.

Her er hvordan du kan integrere en HTML5 slideshow video:

< video poster="movie.jpg" kontrol >
< kilde src='movie.webm' type =' video/webm; codecs = "vp8.0, vorbis" "/ >
< kilde src='movie.ogv' type =' video/ogg; codecs = "theora, vorbis" "/ >
< kilde src='movie.mp4' type =' video/mp4; codecs = "avc1.4D401E, mp4a.40.2"'/ >
< / video >

Hvis du kan se videoen nedenfor, understøtter din web-browsere HTML5, også. I dag, understøtter de fleste browsere HTML5 slideshow allerede. Se flere detaljer om HTML5 browsere.

HTML5 slideshow video lavet med DVD Slideshow Builder Deluxe - mere end 100 overgange inkluderet.

Nu skal du er kun en HTML5 slideshow software og oprette slideshow video i MP4 (AVC) format.

Download Win Version

Interaktive HTML5 Slideshow

Ligesom de aktuelt anvendte Flash slideshow på hjemmesider, kan du også designe en HTML5 lysbilledshow uden at installere noget. Selvfølgelig, behøver du ikke at skrive kode selv. Her tager vi et bredt fælles HTML5 lysbilledshow online for eksempel for at vise dig hvordan man kan integrere en HTML5 slideshow.

1. sætte filer i det rigtige sted.

Når du har hentet filen HTML5 projekt herfra, unzip filen til din computer, og flytte eller uploade til mappen på din hjemmeside.

html5 slideshow

Der er også andre folk til at dele deres HTML5 lysbilledshow online. Google for en og forandring der passer til dine behov. Det er bedre at sætte meddelelse om ophavsret for at takke andres arbejde, eller følg licens erklæringer.

2. ændre kode der passer til dine behov

Normalt, skal du ikke ændre koden for css og js-filer, bortset fra linkadresse, hvis du har sat dem i en anden mappe. For eksempel, bør du ændre css fil linkadresse til 'scripts/script.js', hvis du har flyttet script.js fil ind i en eksisterende mappe kaldet 'scripts'. Denne type linkadresse kaldes relative link, mens en anden type er absolut link, som http://yoursite.com/scripts/script.js. Hvis HTML5 slideshow er integrerer til en side i en mappe, skal du bruge noget i retning af '... /scripts/script.js'. Du må hellere bruge absolutte link, hvis du ikke er bekendt med forskellene.

Den vigtigste del af denne HTML5 slideshow er markeret i det røde felt. Kopiere disse koder ind på enhver side ønskede HTML5 lysbilledshow til at vise og ændre billed-adresse som beskrevet ovenfor.

html5 slideshow code
Klik for at forstørre.

3. eksempel med HTML5 browsere

Endelig se, hvordan HTML5 slideshow ser ud i browseren HTML5. Normalt, vil du få denne HTML5 slideshow. På siden kan du også download HTML5 Diasshowfiler og se den detaljerede proces at designe det af Martin Angelov.

Også tjek Flash lysbilledshow skabeloner til at gøre hjemmesiden lysbilledshow i klik.

Top