Cum sa faci un Slideshow HTML5

HTML5, ca următoarea generaţie de web standard, este după colţ. Te-ar adăuga suport HTML5 site-ul dumneavoastră? Poate e timpul cel puţin să se pregătească. Acest articol vă va arăta 2 moduri de a face prezentarea HTML5 şi embed site-ul dumneavoastră.

Auto-rulare HTML5 Slideshow

Unul dintre cel mai mare upgrade HTML5 este că direct puteţi încorpora şi reda clipuri video online folosind. În acest fel, vizitatorii pot viziona HTML5 slideshow, în măsura în care browser-ul lor sprijină HTML5. Nici un Flash player obligatoriu. Deoarece HTML5 nu a ajuns la versiunea finală, video codec, probabil, ar putea folosi WebM, H264, Ogv sau ambele.

Iată cum vă puteţi încorpora un video de prezentare HTML5:

< poster="movie.jpg pagina" controale >
< sursa src='movie.webm' tip =' pagina/webm; codec-uri = "vp8.0, vorbis" "/ >
< sursa src='movie.ogv' tip =' pagina/ogg; codec-uri = "theora, vorbis" "/ >
< sursa src='movie.mp4' tip =' pagina/mp4; codec-uri = "avc1.4D401E, mp4a.40.2"'/ >
< / video >

În cazul în care puteţi vedea video de mai jos, browsere web suport HTML5, prea. In prezent, cele mai multe browsere acceptă HTML5 slideshow deja. Vedea mai multe detalii despre HTML5 browsere.

HTML5 slideshow pagina create cu DVD Slideshow Builder Deluxe - mai mult de 100 transitions incluse.

Acum ceea ce ai nevoie este doar un software de slideshow HTML5 şi creaţi slideshow video în format MP4 (AVC) .

Prezentare interactivă HTML5

Ca prezentarea Flash utilizat în prezent pe site-uri web, puteţi, de asemenea, proiectaţi un slideshow HTML5 fără a instala nimic. Desigur, nu aveţi pentru a scrie codec-te. Aici noi a lua un larg împărtăşite HTML5 slideshow on-line de exemplu pentru a vă arăta cum să încorporaţi un slideshow HTML5.

1. pune fişierele în locul potrivit.

Când aţi descărcat fişierul proiect HTML5 de aici, dezarhivează fişierul pe computer, şi muta sau încărcaţi în folderul de site-ul dvs.

Există, de asemenea, alte persoane pentru a partaja lor proiect de slideshow HTML5 on-line. Google pentru unul şi schimbare pentru a se potrivi nevoilor dumneavoastră. Este mai bine pentru a pune de autor să mulţumesc munca altora, sau urmaţi extraselor de licenţă.

2. schimba codul pentru a se potrivi nevoilor dumneavoastră

De obicei, nu aveţi nevoie pentru a schimba codul de css şi js fişiere, cu excepţia adresa link-ul în cazul în care au le-aţi pus într-un folder diferit. De exemplu, ar trebui să modificaţi css fişier link-ul adresa în "scripts/script.js" dacă aţi mutat script.js fişier într-un folder existent numit "Scripturi". Acest tip de legătură adresa se numeşte legătură relativă, în timp ce un alt tip este link absolut, cum ar fi http://yoursite.com/scripts/script.js. Dacă HTML5 slideshow este încorporat într-o pagină într-un folder, ar trebui să utilizaţi ceva de genul "... /scripts/script.js'. Mai bine ar trebui să utilizaţi link-ul absolută dacă nu sunteţi familiarizaţi cu diferenţele.

Cea mai importantă parte din această prezentare HTML5 este marcat în casetă roşie. Copiaţi aceste coduri în orice pagina doriţi HTML5 slideshow pentru a afişa şi modifica adresa imaginii ca descrise mai sus.

Click pentru a mari.

3. examinaţi cu browsere de HTML5

În sfârşit, vedeţi cum HTML5 slideshow Arată în browser-ul HTML5. În mod normal, veţi obţine această prezentare HTML5. Pagina, ai putea, de asemenea, descărca fişiere de slideshow HTML5 şi vedea procesul detaliat de design-l de Martin Angelov.

De asemenea, verificaţi Flash slideshow template-uri pentru a face site-ul slideshows clicuri.