Hoe maak je een HTML5 Slideshow maken

HTML5, als de volgende generatie web-standaard, is om de hoek. Zou je HTML5 ondersteuning toe te voegen aan uw website? Misschien is het tijd tenminste voor te bereiden. Dit artikel zal u tonen 2 manieren om HTML5 slideshow maken en insluiten op uw website.

Self-running HTML5 Slideshow

Een van de grootste upgrade van HTML5 is dat je direct kunt insluiten en afspelen video's online door gebruik te maken. Op deze manier kunnen de bezoekers de HTML5 diashow te kijken, zolang hun browser ondersteunt HTML5. Geen Flash player nodig. Aangezien de HTML5 niet om de definitieve versie is gekomen, kon videocodec waarschijnlijk gebruik WebM, H264, OGV of beide.

Hier is hoe je een HTML5 slideshow video kunt insluiten:

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

Als je de video hieronder kunt zien, uw web-browsers ondersteunen HTML5, ook. Tegenwoordig zijn de meeste browsers ondersteunen HTML5 slideshow reeds. Bekijk meer details over HTML5 browsers.

HTML5 slideshow video gemaakt met DVD Slideshow Builder Deluxe - Meer dan 100 overgangen opgenomen.

Nu, wat je nodig hebt is slechts een HTML5 slideshow software en creëer slideshow video in MP4 (AVC) formaat.

Interactieve HTML5 Slideshow

Net als de momenteel gebruikte Flash-diavoorstelling op websites, kunt u ook een HTML5 slideshow ontwerpen zonder install niets. Natuurlijk hoef je niet te codec zelf te schrijven. Hier nemen we een breed gedeelde HTML5 slideshow online bijvoorbeeld te laten zien hoe je een HTML5 diavoorstelling insluiten.

1. Zet bestanden op de juiste plaats.

Wanneer u de HTML5-project bestand gedownload van hier, unzip het bestand naar uw computer, en verplaatsen of te uploaden naar de map van uw website.

Er zijn ook andere mensen om hun HTML5 slideshow project online te delen. Google voor een en verandering aan uw behoeften. Het is beter om copyright te maken aan het werk van anderen bedanken, of volg de licentie verklaringen.

2. Wijzig code aan uw behoeften

Meestal heb je niet nodig om de code van css en js bestanden te wijzigen, met uitzondering van de link adres als je ze hebt in een andere map. Bijvoorbeeld, moet u het CSS-bestand link adres te wijzigen in 'scripts / script.js' als je script.js bestand hebt verplaatst naar een bestaande map met de naam 'scripts'. Dit type link adres wordt genoemd relatieve koppeling, terwijl een ander type is absolute koppeling, zoals http://yoursite.com/scripts/script.js. Als de HTML5 diashow wordt insluiten op een pagina in een map, moet je iets als '.. / Scripts / script.js'. Je zou beter gebruik absolute link als u niet bekend bent met de verschillen.

Het belangrijkste onderdeel van deze HTML5 diavoorstelling wordt gemarkeerd in het rode vak. Kopieer deze codes in elke pagina die u wilt HTML5 diavoorstelling om het beeld adres weergeven en wijzigen zoals hierboven beschreven.

Klik om te vergroten.

3. Voorbeeld met HTML5 browsers

Tenslotte zien hoe de HTML5 slideshow eruit ziet in uw HTML5 browser. Normaal gesproken krijg je  dit HTML5 slideshow.  Op de pagina, kun je ook HTML5 slideshow-bestanden te downloaden en zie de gedetailleerde proces om het te ontwerpen door Martin Angelov.

Lees ook Flash slideshow templates naar de website van diavoorstellingen maken in het aantal klikken.