Πώς να κάνει ένα Slideshow HTML5

HTML5, ως η επόμενη γενιά web πρότυπο, που είναι γύρω από τη γωνία. Θα μπορείτε να προσθέσετε HTML5 υποστήριξη στον ιστοχώρο σας; Ίσως ήρθε η ώρα τουλάχιστον για να προετοιμαστούν. Αυτό το άρθρο θα σας δείξει 2 τρόπους για να κάνει HTML5 slideshow και να ενσωματώσετε στην ιστοσελίδα σας.

Αυτόματης εκτέλεσης HTML5 Slideshow

Ένα από τα μεγαλύτερα αναβάθμιση της HTML5 είναι ότι μπορείτε άμεσα να ενσωματώσετε και αναπαραγωγή βίντεο σε απευθείας σύνδεση χρησιμοποιώντας. Αυτόν τον τρόπο, οι επισκέπτες μπορούν να παρακολουθήσουν το slideshow HTML5 τους πρόγραμμα περιήγησης υποστηρίζει την HTML5. Δεν Flash player που απαιτείται. Δεδομένου ότι το HTML5 δεν έχει έρθει να την τελική έκδοση, τηλεοπτικός κωδικοποιητής-αποκωδικοποιητής θα μπορούσαν πιθανώς χρήση WebM, H264, Ogv ή και τα δύο.

Εδώ είναι πώς μπορείτε να ενσωματώσετε ένα βίντεο HTML5 slideshow:

< βίντεο poster="movie.jpg" έλεγχοι >
< πηγή src='movie.webm «τύπος =' βίντεο/webm? κωδικοποιητές = «vp8.0, vorbis» «/ >
< πηγή src='movie.ogv «τύπος =' βίντεο/ogg? κωδικοποιητές = «theora, vorbis» «/ >
< πηγή src='movie.mp4 «τύπος =' video/mp4? κωδικοποιητές = «avc1.4D401E, mp4a.40.2"'/ >
< / βίντεο >

Εάν μπορείτε να δείτε το βίντεο που ακολουθεί, σας προγράμματα περιήγησης υποστήριξη HTML5, πάρα πολύ. Σήμερα, τα περισσότερα προγράμματα περιήγησης υποστήριξη HTML5 slideshow ήδη. Δείτε περισσότερες λεπτομέρειες σχετικά με τα προγράμματα περιήγησης HTML5.

Βίντεο HTML5 slideshow δημιουργήθηκε με DVD Slideshow Builder Deluxe - περισσότερα από 100 μεταβάσεις που περιλαμβάνονται.

Τώρα ό, τι χρειάζεστε είναι μόνο ένα HTML5 λογισμικού slideshow και να δημιουργήσετε το slideshow βίντεο σε μορφή MP4 (AVC) .

Διαδραστική HTML5 Slideshow

Όπως η στιγμή που χρησιμοποιείται παρουσίαση διαφανειών Flash στις ιστοσελίδες, μπορείτε επίσης να σχεδιάσετε ένα slideshow HTML5 χωρίς εγκατάσταση τίποτα. Φυσικά, δεν έχετε να γράψετε κωδικοποιητή τον εαυτό σας. Εδώ θα ρίξουμε μια ευρέως κοινόχρηστο HTML5 slideshow σε απευθείας σύνδεση για παράδειγμα να σας δείξει πώς να ενσωματώσετε ένα slideshow HTML5.

1. Βάλτε αρχείων στο σωστό μέρος.

Όταν μεταφορτώσατε το HTML5 αρχείο έργου από εδώ, αποσυμπιέστε το αρχείο στον υπολογιστή σας, και να μετακινήσετε ή να ανεβάσετε στο φάκελο της ιστοσελίδας σας.

Υπάρχουν επίσης άλλους ανθρώπους να μοιραστούν τους HTML5 slideshow έργου σε απευθείας σύνδεση. Google για μία και την αλλαγή για να ταιριάζει στις ανάγκες σας. Είναι καλύτερα να βάλει πνευματικών να ευχαριστήσω το έργο των άλλων, ή ακολουθούν τις δηλώσεις άδεια.

2. αλλαγή κώδικα ώστε να ταιριάζει τις ανάγκες σας

Συνήθως, δεν χρειάζεται να αλλάξετε τον κωδικό του css και js αρχεία, εκτός από τη διεύθυνση του Συνδέσμου, αν τα έχετε βάλει σε διαφορετικό φάκελο. Για παράδειγμα, πρέπει να αλλάξετε τη διεύθυνση του Συνδέσμου αρχείο css να «scripts/script.js» εάν έχετε μετακινήσει script.js αρχείο σε έναν υπάρχοντα κατάλογο που λέγονται «γραφές». Αυτός ο τύπος σύνδεση διεύθυνση ονομάζεται σχετική σύνδεση, ενώ ένας άλλος τύπος είναι απόλυτη σύνδεση, όπως http://yoursite.com/scripts/script.js. Αν το slideshow HTML5 είναι να ενσωματώσετε σε μια σελίδα σε ένα φάκελο, πρέπει να χρησιμοποιείτε κάτι σαν "... /scripts/script.js. Πρέπει να χρησιμοποιήσετε απόλυτη σύνδεση εάν δεν είστε εξοικειωμένοι με τις διαφορές.

Το πιο σημαντικό μέρος της αυτό το slideshow HTML5 χαρακτηρίζεται στο κόκκινο πλαίσιο. Αντιγράψτε αυτούς τους κωδικούς σε κάθε σελίδα που θέλετε HTML5 slideshow για να εμφανίσετε και να αλλάξετε τη διεύθυνση εικόνας όπως περιγράφεται παραπάνω.

Κάντε κλικ για μεγέθυνση.

3. πρόβλεψη με HTML5 προγράμματα περιήγησης

Τέλος, να δούμε πώς το HTML5 slideshow που μοιάζει στο πρόγραμμα περιήγησης HTML5. Κανονικά, θα έχετε αυτό το slideshow HTML5. Στη σελίδα, θα μπορούσε επίσης να κατεβάσετε αρχεία slideshow HTML5 και να δείτε τη λεπτομερή διαδικασία για το σχεδιασμό από Martin Ανγκέλοφ.

Επίσης να ελέγξετε έξω Flash slideshow πρότυπα ώστε να ιστοσελίδα slideshows κλικ του ποντικιού.