Alla ämnen

+
Home > Resurs > Tips > Hur man gör en HTML5-bildspel

Hur man gör en HTML5-bildspel

HTML5, är som nästa generation web standard, runt hörnet. Vill du lägga till HTML5 stöd till din webbplats? Kanske är det dags att förbereda. Denna artikel kommer att visa dig 2 sätt att göra HTML5 bildspel och bädda in på din hemsida.

Självgående HTML5 bildspel

En av de största uppgraderingen av HTML5 är att du direkt kan bädda in och spela upp videor på nätet med. Detta sätt besökarna kan titta på HTML5 bildspelet så länge deras webbläsare har stöd för HTML5. Ingen Flash player krävs. Eftersom HTML5 inte har kommit till sin slutliga version, kan video-codec förmodligen använda WebM, H264, Ogv eller båda.

Här är hur du kan bädda in en HTML5 bildspel video:

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

Om du kan se videon nedan, stöder din webbläsare HTML5, alltför. Numera stöder de flesta webbläsare HTML5 bildspel redan. Se fler detaljer om HTML5 webbläsare.

HTML5 bildspel video skapad med DVD Slideshow Builder Deluxe - mer än 100 övergångar ingår.

Nu vad du behöver är endast en HTML5 bildspel programvara och skapa bildspel video i MP4 AVC -format.

Download Win Version

Interaktiva HTML5 bildspel

Som för tillfället används blixten bildspelet på webbplatser, kan du också designa en HTML5 bildspel utan att installera något. Naturligtvis behöver du inte skriva koden själv. Här tar vi ett allmänt delade HTML5 bildspel online till exempel för att visa dig hur till bädda in en HTML5 bildspel.

1. placera filer på rätt plats.

När du hämtat den HTML5 projektfilen från här, packa upp filen till din dator, och flytta eller överföra till mappen på din webbplats.

html5 slideshow

Det finns också andra människor att dela deras HTML5 bildspelsprojekt online. Google för en och ändra efter behov. Det är bättre att sätta meddelande om upphovsrätt för att tacka andras arbete, eller följa licens uttalanden.

2. ändra kod som passar dina behov

Vanligtvis behöver du inte ändra koden för css- och js-filer, utom länkadress om du har lagt dem i en annan mapp. Till exempel bör du ändra länkadressen css-fil till "scripts/script.js" om du har flyttat script.js filen till en befintlig mapp som kallas "scripts". Denna typ av länkadress kallas relativ länk, medan en annan typ är absolut länk, till exempel http://yoursite.com/scripts/script.js. Om HTML5 bildspelet är bädda in till en sida i en mapp, bör du använda något i stil med "... /scripts/script.JS'. Bättre skulle du använda absolut länk om du inte är bekant med skillnader.

Den viktigaste delen av detta HTML5 bildspel markeras i den röda rutan. Kopiera dessa koder till någon sida som du vill använda HTML5 bildspel att visa och ändra bild adressen som beskrivs ovan.

html5 slideshow code
Klicka för att förstora.

3. förhandsgranska med HTML5 webbläsare

Slutligen, se hur HTML5 bildspelet ser ut i webbläsaren HTML5. Normalt får du detta HTML5 bildspel. På sidan kan du också hämta HTML5 bildspelsfiler och se detaljerade processen att utforma det av Martin Angelov.

Kolla också in Flash bildspel Mallar att göra hemsida bildspel i klick.

Produktrelaterade frågor? Tala direkt till vårt Support-Team >>

Topp