12Οκτ

Χρησιμοποιήστε Video για background στο site σας

, 12 Οκτωβρίου 2012 | JQUERY | 0 Σχόλια

Μέσος χρόνος ανάγνωσης άρθρου: 5 λεπτά

Υπάρχουν φορές που ίσως θα θέλατε να δημιουργήσετε μια αίσθηση εντυπωσιασμού στους χρήστες του διαδικτυακού σας τόπου, ή του διαδικτυακού τόπου κάποιου πελάτη σας. Αν μια μεγάλη εικόνα καλής ποιότητας δεν είναι αρκετή, τότε μπορείτε με την χρήστη του bigvideo.js να χρησιμοποιήσετε για background ένα full screen video. Το bigvideo.js είναι φτιαγμένο πάνω στο videojs.com και την jQuery βιβλιοθήκη. Αν το αρχικό δείγμα video που χρησιμοποιήσετε είναι καλής ποιότητας, τότε το αποτέλεσμα που παράγεται, ακόμα και σε μεγάλες οθόνες, είναι αρκετά ικανοποιητικό για τον χρήστη.

Το bigvideo.js σας δίνει την δυνατότητα να δημιουργήσετε ακόμα, image slide shows, να παίξετε πολλά video το ένα μετά το άλλο, αλλά και να δώσετε περισσότερες δυνατότητες στους χρήστες όπως την επιλογή του video background αλλά και τη δυνατότητα της διαχείρισης των video προσθέτοντας σε αυτά media player options (play, pause, κλπ).

SETUP

Το bigvideo.js όπως αναφέρθηκε παραπάνω, χρησιμοποιεί το api του videojs.com καθώς επίσης τις βιβλιοθήκες, jQuery, jQuery UI (για την χρήση του slider control) και το  jQuery imagesloaded plugin. Είναι απαραίτητη η χρήση όλων των παραπάνω ώστε να δουλέψει σωστά το bigvideo.js.

Για να μπορέσετε να χρησιμοποιήσετε ένα video σαν background όπως φαίνεται στην σελίδα του παραδείγματος που έχουν δημιουργήσει οι δημιουργοί του Big Video θα χρειαστεί να γράψετε τον παρακάτω κώδικα:

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});

Για καλύτερα αποτελέσματα στον Firefox, δημιουργήστε μια Ogg έκδοση του video που θέλετε να χρησιμοποιήσετε:

$(function() {
    var BV = new $.BigVideo({useFlashForFirefox:false});
    BV.init();
    BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});
});

Για περισσότερες πληροφορίες σχετικά με το bigvideo.js μπορείτε να επισκεφτείτε τη σελίδα http://dfcb.github.com/BigVideo.js. Για να δείτε και άλλους τρόπους εφαρμογής του, απλά πλοηγηθείτε στην ίδια σελίδα στην παράγραφο Setup.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Χρησιμοποιήστε Video για background στο site σας γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter