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

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
12/10/2012 από
RsS

Υπάρχουν φορές που ίσως θα θέλατε να δημιουργήσετε μια αίσθηση εντυπωσιασμού στους χρήστες του διαδικτυακού σας τόπου, ή του διαδικτυακού τόπου κάποιου πελάτη σας. Αν μια μεγάλη εικόνα καλής ποιότητας δεν είναι αρκετή, τότε μπορείτε με την χρήστη του 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.











Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.