Com fer una presentació de diapositives de HTML5

HTML5, com la web de generació pròxima estàndard, és a la cantonada. Vols afegir suport HTML5 al seu lloc web? Potser és hora com a mínim a preparar. Aquest article et mostraré 2 maneres de fer la presentació de diapositives de HTML5 i incrustar al seu lloc web.

Auto-execució HTML5 Slideshow

Una major actualització de HTML5 és que directament pot arrelar i reproduir vídeos en línia mitjançant l'ús. D'aquesta manera, els visitants poden mirar les diapositives HTML5 mentre seu navegador compatible amb HTML5. Cap intèrpret de flaix exigit. Des de l'HTML5 no ha arribat a la seva versió final, probablement podria utilitzar còdec de vídeo WebM, H264, Ogv o ambdós.

Heus aquí com vostè pot incrustar un vídeo de presentació de diapositives de HTML5:

< poster="movie.jpg vídeo" els controls >
< font src='movie.webm' tipus =' vídeo/webm; codecs = "vp8.0, vorbis" "/ >
< font src='movie.ogv' tipus =' vídeo/ogg; codecs = "theora, vorbis" "/ >
< font src='movie.mp4' tipus =' vídeo/mp4; codecs = "avc1.4D401E, mp4a.40.2"'/ >
< / vídeo >

Si veieu el següent vídeo, seu navegador web suport HTML5, massa. Avui en dia, la majoria dels navegadors suport HTML5 slideshow ja. Veure més detalls sobre els navegadors de HTML5.

HTML5 slideshow vídeo creat amb DVD Slideshow Builder Deluxe - més de 100 transicions incloses.

Ara el que necessita és només un programari de presentació de diapositives de HTML5 i crear vídeo en format MP4 (AVC) presentació de diapositives.

Presentació de diapositives interactius de HTML5

Com s'utilitzen actualment Flash slideshow en llocs web, vostè pot també dissenyar un slideshow HTML5 sense instal·lar res. Per descomptat, no cal escriure a còdec si mateix. Aquí agafem un àmpliament compartida HTML5 slideshow en línia per exemple, per mostrar com incrustar un slideshow de HTML5.

1. Posi els arxius en el lloc correcte.

Quan descarregava l'arxiu HTML5 projecte des d'aquí, descomprimim l'arxiu al seu ordinador i moure o carregar a la carpeta del seu lloc web.

També hi ha altres persones per compartir el seu projecte de HTML5 slideshow en línia. Google per una i el canvi a les seves necessitats. És millor posar l'avís de copyright per agrair el treball dels altres, o seguir les declaracions de llicència.

2. canviar el codi a les seves necessitats

En general, no cal canviar el codi d'arxius css i js, excepte l'adreça d'enllaç si vostè tenir posar-los en una altra carpeta. Per exemple, hauria de convertir la adreça d'enllaç de fitxer css en 'scripts/script.js' si que han canviat script.js arxiu en una carpeta existent anomenat "seqüències". Aquest tipus d'adreça d'enllaç s'anomena enllaç relativa, mentre que un altre tipus és absoluta enllaç, com http://yoursite.com/scripts/script.js. Si el HTML5 slideshow és integrar a una pàgina en una carpeta, heu d'utilitzar alguna cosa com "... /scripts/script.js'. Millor utilitzaria enllaç absolut si vostè no està familiaritzat amb les diferències.

La part més important d'aquesta presentació de diapositives de HTML5 està marcada al quadre vermell. Copiar aquests codis en qualsevol pàgina que voleu HTML5 slideshow visualitzar i canviar l'adreça d'imatge com descrit a dalt.

Feu clic per ampliar.

3. presentar amb navegadors de HTML5

Finalment, veure com el passi de diapositives de HTML5 sembla al seu navegador de HTML5. Normalment, vostè rebrà aquesta slideshow HTML5. A la pàgina, també podria descarregar arxius de presentació de diapositives de HTML5 i veure el procés històric que el dissenyi per Martin Angelov.

També comprovi Flash slideshow plantilles per fer lloc web slideshows en clics.