Jquery - ακορντεόν

[vasilisbilias]

Γεια σας,

 

με την βοήθεια του greektuts έφτιαξα ένα "ακορντεόν" (όπως αναφέρετε και στο άρθρο) Επειδή όμως θέλω να βάλω βίντεο αντί για κάποιο κείμενο,  η φόρτιση της σελίδας αργή. Η ερώτηση μου είναι εάν μπορώ να προσθέσω κάποιο κωδικά ο οποίος θα κάνει το βίντεο να φορτίσει μόλις ανοίξω το "ακορντεόν", ώστε να μην φορτίζουν όλα μαζί και κολλάει ολόκληρη η ιστοσελίδα.

 

Ευχαριστώ πολύ.

 

 

http://www.greektuts.net/jquery-accordion/

[migf1]

Αυτό ονομάζεται lazy loading και βασικά δεν έχει να κάνει με το accordeon, αλλά με οποιαδήποτε σελίδα περιέχει ένα η περισσότερα βίντεο.

 

Υποθέτοντας πως μιλάμε για streaming βίντεο, μια συνηθισμένη τεχνική είναι αντί να έχεις iframes ή video elements για τα βίντεο στη σελίδα σου, να έχεις αρχικά στη θέση τους απλές εικόνες, ενδεχομένως overlayed με ένα play-button. Με αυτό τον τρόπο δεν φορτώνονται τα βιντεο.

 

Μόλις ο χρήστης πατήσει κάποια από τις εικόνες σου, τότε με Javascript την αντικαθιστάς με το iframe ή το video element που περιέχει το βίντεο (τον player δηλαδή) και το ξεκινάς.

 

Στην πράξη είναι λίγο πιο πολύπλοκο, αλλά αν χρησιμοποιείς youtube βίντεο, ορίστε ένα script που απλοποιεί κατά πολύ τα πράγματα: http://www.labnol.org/internet/light-youtube-embeds/27941/

 

Αν το θες και responsive, θέλει λίγη παραπάνω δουλειά. Εδώ έχει μια λύση, όχι πολύ κομψή όμως: http://www.jokedewinter.co.uk/lazy-loading-of-video-while-keeping-it-responsive/

 

Καλύτερα νομίζω είναι να χρησιμοποιήσει κανείς το FitVids.js plugin.

[vasilisbilias]

Δημιούργησα ένα αρχείο .html το οποίο περιέχει μία εικόνα με σύνδεσμο. Αυτός ο σύνδεσμος οδηγεί σε ένα βίντεο στο youtube το οποίο αρχίζει αυτόματα να παίζει. Τέλος, σύνδεσα την ετικέτα iframe με αυτό το αρχείο .html και όλα είναι οκ....

 

Μέσα στο site:

<iframe src=".html"></iframe>

 

Αρχείο html:

<a href="http://youutbe......"><img src="play_video.png"></a>

[migf1]

Δηλαδή αν σε μια σελίδα σου έχεις 8 βίντεο, θα φτιάξεις 8 διαφορετικές html σελίδες, μια για κάθε βίντεο;

 

Με το σκριπτάκι που σου είπα να κοιτάξεις στο προηγούμενο ποστ, το μόνο που κάνεις είναι να βάλεις 8 div με class="youtube" και id="το_id_του_βίντεο_στο_youtube" και όλα τα άλλα τα κάνει μόνο του.

 

Δηλαδή, για κάθε div που έχεις βάλει για βίντεο, σου τραβάει αυτόματα thumbnail από το youtube, στο βάζει στο div, σου κάνει overlay από πάνω play-button, σου βάζει onclick event και τέλος μόλις κάνει κλικ ο επισκέπτης πάνω στο thumbnail σου αντικαθιστά το thumbnail με τον player του youtube περνώντας του autoplay option.

 

Όλα αυτά χωρίς εσύ να κάνεις απολύτως τίποτα παραπάνω από το να γράψεις τα empty-bodied divs και να ενεργοποιήσεις once το σκριπτ.

[vasilisbilias]

Δηλαδή αν σε μια σελίδα σου έχεις 8 βίντεο, θα φτιάξεις 8 διαφορετικές html σελίδες, μια για κάθε βίντεο;

 

Με το σκριπτάκι που σου είπα να κοιτάξεις στο προηγούμενο ποστ, το μόνο που κάνεις είναι να βάλεις 8 div με class="youtube" και id="το_id_του_βίντεο_στο_youtube" και όλα τα άλλα τα κάνει μόνο του.

 

Δηλαδή, για κάθε div που έχεις βάλει για βίντεο, σου τραβάει αυτόματα thumbnail από το youtube, στο βάζει στο div, σου κάνει overlay από πάνω play-button, σου βάζει onclick event και τέλος μόλις κάνει κλικ ο επισκέπτης πάνω στο thumbnail σου αντικαθιστά το thumbnail με τον player του youtube περνώντας του autoplay option.

 

Όλα αυτά χωρίς εσύ να κάνεις απολύτως τίποτα παραπάνω από το να γράψεις τα empty-bodied divs και να ενεργοποιήσεις once το σκριπτ.

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

Αυτό που μου πρωτινές είναι πολύ καλό, αλλα το ακορντεόν δεν μπορεί να κρύψει τα βίντεο.

[migf1]

Κάνει conflict δηλαδή το script με αυτό του accordeon?

[vasilisbilias]

Κάνει conflict δηλαδή το script με αυτό του accordeon?

ναι