εισαγωγή βίντεο στη σελίδα: χρησιμοποιήστε javascript και flash

  1. Εκδότης
  2. x64 (aka andi)

πριν από λίγο καιρό ανέφερα την ετικέτα βίντεο, που υλοποιήθηκε ειδικά στο html5

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

για ένα έργο έπρεπε να βρω τη δυνατότητα να ξεβιδώνω βίντεο στην περιοχή. Δεν ήταν δυνατό να φτιάξω έναν παίκτη από το μηδέν σε ένα φλας (για αρχή, δεν έχω ένα περιβάλλον ανάπτυξης και δεν το έκανα), οπότε ήταν πράγματι απαραίτητο να βρεθεί ένας κατάλληλος υποψήφιος μπροστά σε ένα flash player. τίποτα δεν ήταν ιδιαίτερα περίπλοκο δεδομένου ότι χάρη στους χρήστες του YouTube είναι πολύ εύκολο να περιηγηθείτε σε αυτό το είδος παικτών.)

2 υποψήφιοι που βρίσκονται στους ιστότοπους flv-mp3.com (ένα έργο από uppod'a) και flowplayer . έχοντας κάνει μια μικρή πτύχωση το καθένα, η πρώτη εγκαταλείφθηκε γρήγορα υπέρ του συνδυασμού που παρέχει το παρόν api. όπως έδειξε ο χρόνος, το εσωτερικό έντερο δεν με άφησε κάτω (αν και μερικοί άνθρωποι κατάφεραν να μπει στο vtyuhat flv-mp3.com).

Όπως γνωρίζετε, η πρώτη εντύπωση είναι μάλλον παραπλανητική και μερικές φορές προτιμάται η λιγότερο κορεσμένη συσκευή (ειδικά αν χρησιμοποιεί τη μητρική γλώσσα). Αυτή η προσέγγιση ήταν η ζήτηση για το flv-mp3: η υπηρεσία παρέχει την ευκαιρία να "συγκεντρώσει" έναν παίκτη με συγκεκριμένα χαρακτηριστικά (σε μορφή υποδείξτε το αρχείο που αναπαράγεται, την προφύλαξη οθόνης, τις διαστάσεις και κάποιες άλλες παραμέτρους) και αποκτήστε τον κώδικα εξόδου για να εισαγάγετε το αρχείο. Ναι, η επιλογή μπορεί να φαίνεται πολύ βολική, ειδικά για τους ανθρώπους που θεωρούν html μια ισχυρή μάγισσα, για να μην αναφέρουμε το js και ούτω καθεξής.

μόνο η περιοδική προσθήκη βίντεο στο site είναι απίθανο να συμβάλει στον ενθουσιασμό της συνεχούς "κατασκευής" του παίκτη από μόνος του. εναλλακτικά, μπορείτε να εξερευνήσετε όλες τις ρυθμίσεις και να αυτοματοποιήσετε τη γλώσσα του διακομιστή. αλλά αυτή η αρχή μπορεί να ονομαστεί μόνο παραμορφωμένη (είναι πολύ πιο εύκολο να φορτώσετε βίντεο στο YouTube και να έχετε τον έτοιμο κώδικα για λήψη).

εδώ ερχόμαστε στο ίδιο το πράγμα που μπορεί ήδη να ονομάζεται μαγεία. θέλετε να κατανοήσετε javascript μαγεία; Θα δείξω ότι δεν είναι καθόλου δύσκολο (ακόμα ευκολότερο από τη χρήση ενός κατασκευαστή). και να βοηθήσει με αυτό το flowplayer. μπορείτε να επιλέξετε μια έκδοση από εδώ , αλλά η πρώτη έκδοση που διανέμεται στο GPL3 είναι αρκετά κατάλληλη για τον ιστότοπό σας.

Η συσκευή αναπαραγωγής υποστηρίζει την αναπαραγωγή του ακόλουθου περιεχομένου: flv, mp4, m4v (για εικόνες - jpg, gif, png). Το βίντεο υποστηρίζεται από την έκδοση 9, επομένως δεν πρέπει να υπάρχουν προβλήματα υποστήριξης.

Κάντε λήψη του αρχείου με τη συσκευή αναπαραγωγής και αποσυσκευάστε το. Θα χρειαστεί να ανεβάσετε 3 αρχεία στην τοποθεσία: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf και παράδειγμα / flowplayer-NumVer.min.js , όπου ο NumVer είναι μόνο ο αριθμός έκδοσης και μπορεί να είναι, για παράδειγμα, 3.2.7 .

Το πρώτο αρχείο περιέχει τον πίνακα ελέγχου, το δεύτερο - απευθείας από τη συσκευή αναπαραγωγής και το τρίτο είναι ο σύνδεσμος που παρέχει api. Τα πρώτα 2 αρχεία (* .swf) πρέπει να βρίσκονται στον ίδιο φάκελο. τώρα ήρθε η ώρα για τον απλούστερο κώδικα. μπορεί να είναι:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('παίκτης', '/src/player/flowplayer-3.2.7.swf', {}); </ script>

Το στοιχείο div με το αναγνωριστικό παίκτη είναι το δοχείο στο οποίο θα ξεβιδωθεί το βίντεο. Στη δεύτερη γραμμή βρίσκεται η σύνδεση αρχείου javascript. Απευθείας για την έξοδο είναι υπεύθυνη μία λειτουργία flowplayer () , η οποία περνάει από 3 παραμέτρους:

  1. Αναγνωριστικό του στοιχείου στο οποίο πρέπει να αναπαραχθεί το βίντεο.
  2. τη διαδρομή προς τον παίκτη (δηλαδή στον παίκτη και όχι στα χειριστήρια που θα φορτωθούν αυτόματα).
  3. Ορισμένες πρόσθετες παράμετροι.

Παρεμπιπτόντως, εκτός από το αναγνωριστικό, μπορείτε να περάσετε απευθείας μια αναφορά σε ένα αντικείμενο ή έναν επιλογέα.

Ο παραπάνω κώδικας δεν εμφανίζει τίποτα, αλλά δίνει μια ιδέα για το πόσο εύκολο είναι να συνδέσετε ένα flowplayer σε μια σελίδα. Για την παραγωγή βίντεο, πρέπει να δημιουργήσετε μια τρίτη παράμετρο, και αυτό, παρεμπιπτόντως, είναι επίσης πολύ απλό.

για λόγους απλότητας: η τρίτη παράμετρος (config) είναι μια συσσωρευτική διάταξη στην οποία μπορούν να περιγραφούν τα ακόλουθα στοιχεία:

  • Κλιπ - χρησιμοποιώντας αυτό το πλήκτρο, μπορείτε να "κάνετε" παγκόσμιες ρυθμίσεις, για παράδειγμα αν θέλετε να ξεκινήσετε αυτόματα την προσωρινή αποθήκευση (autoBuffering) ή την αναπαραγωγή (αυτόματη αναπαραγωγή), πώς να κλιμακώσετε το περιεχόμενο (κλιμάκωση με την τιμή προσαρμογής διατηρεί τον αρχικό λόγο διαστάσεων και για κανονικό βίντεο, ίσως μόνο). Μπορείτε επίσης να καθορίσετε το αρχείο που αναπαράγεται (url) και ακόμα να αναστείλετε τα συμβάντα (λειτουργίες που θα καλούνται, για παράδειγμα, όταν η ταινία αρχίζει να παίζει).
  • η λίστα αναπαραγωγής είναι ένας κανονικός πίνακας (λίστα). κάθε στοιχείο μπορεί να είναι μια συμβολοσειρά (στην περίπτωση αυτή, η συμβολοσειρά είναι η διεύθυνση του κλιπ που αναπαράγεται) ή μια συσπειρωτική συστοιχία. στη δεύτερη περίπτωση, το σύνολο δεδομένων μπορεί να θεωρηθεί ως ένα σύνολο δεδομένων παρόμοιο με το κλειδί κλιπ από το προηγούμενο στοιχείο, δηλ. μπορείτε να καθορίσετε τη χρήση buffering, να ξεκινήσετε την αναπαραγωγή κλπ.
  • plugins - χρησιμεύει για να επεκτείνει τα τυπικά χαρακτηριστικά. Ένα από τα χαρακτηριστικά είναι η δυνατότητα να κατευθύνει τη διασύνδεση απευθείας στο σημείο.

Τώρα ένα μικρό παράδειγμα που περιλαμβάνει μια επίδειξη των δυνατοτήτων:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: : 'ταιριάζει'}, λίστα αναπαραγωγής: [{url: 'https: //-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // για να χειριστείτε τα στοιχεία ελέγχου πρόσθετων στοιχείων: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // αφαιρεί τα κουμπιά επαναφοράς προς τα πίσω: true, // add scrubber button: true // false απενεργοποιεί την κύλιση του βίντεο}}}), </ script>

Ο παρουσιαζόμενος κώδικας ορίζει τα ακόλουθα ως γενικές ρυθμίσεις: απενεργοποίηση της αναπαραγωγής αυτόματης εκκίνησης, απενεργοποίηση της αυτόματης προσωρινής αποθήκευσης, κλιμάκωση βίντεο για προσαρμογή στο παράθυρο. Ως αρχείο που μπορεί να αναπαραχθεί, χρησιμοποιείται μια εικόνα και ένα βίντεο και οι ρυθμίσεις για την εικόνα αντικαθίστανται (δεδομένου ότι πρέπει να φορτωθούν αυτόματα). όταν κάνετε κλικ στην εικόνα (ή στο κουμπί αναπαραγωγής), εμφανίζεται το βίντεο. όπως μπορείτε να δείτε, όλα είναι πολύ απλά. αν θέλετε να προσθέσετε ένα άλλο βίντεο κλιπ, απλώς προσθέστε ένα νέο στοιχείο στη λίστα αναπαραγωγής, διαχωρισμένο με κόμμα. εάν απαιτείται αυτόματη αναπαραγωγή της λίστας αναπαραγωγής, ο συνδετικός πίνακας συστοιχιών έχει οριστεί, η τιμή της αυτόματης αναπαραγωγής έχει οριστεί ως αληθής.

τεκμηρίωση που περιέχει λειτουργίες api εδώ . αν κάποιος δεν καταλαβαίνει αγγλικά - δεν έχει σημασία, όλα είναι αρκετά σαφή εκεί. και μετά την ανάλυση του παραπάνω κώδικα, είναι πολύ πιθανό να καταλάβουμε τι είναι στις αποβάθρες. Συστήνω ιδιαίτερα μια ματιά, σίγουρα θα υπάρξει μια "ρύθμιση" που θα είναι σε ζήτηση.

παράδειγμα μπορεί Κοίτα εδώ . μην ξεχάσετε να δείτε τον πηγαίο κώδικα (Ctrl + U)

Εκδότης

offline 1 εβδομάδα

x64 (aka andi)

Σχόλια: 2842 Δημοσιεύσεις: 395 Εγγραφή: 02-04-2009