Η δημιουργία ενός προγράμματος αναπαραγωγής βίντεο στο React μπορεί να φαίνεται σαν μια πρόκληση. Αλλά με τα σωστά εργαλεία και τεχνικές, μπορείτε να το κάνετε με σχετική ευκολία.
Υπάρχουν δύο τρόποι για να δημιουργήσετε ένα πρόγραμμα αναπαραγωγής βίντεο στο React: χρησιμοποιώντας ενσωματωμένες δυνατότητες και χρησιμοποιώντας βιβλιοθήκες τρίτων.
Δημιουργία προγράμματος αναπαραγωγής βίντεο στο React
Πριν δημιουργήσετε ένα πρόγραμμα αναπαραγωγής βίντεο React, βεβαιωθείτε ότι έχετε βασική κατανόηση των HTML, CSS και JavaScript.
Ξεκινήστε από δημιουργώντας μια βασική εφαρμογή React για να προσθέσετε την ακόλουθη λειτουργία αναπαραγωγής βίντεο στο.
Χρήση ενσωματωμένων λειτουργιών (React Hooks)
Η πρώτη επιλογή για τη δημιουργία ενός προγράμματος αναπαραγωγής βίντεο στο React είναι η χρήση ενσωματωμένων λειτουργιών.
Ξεκινήστε δημιουργώντας το στοιχείο του προγράμματος αναπαραγωγής που θα εμφανίζει το βίντεο και όλα τα στοιχεία ελέγχου του. Για να το κάνετε αυτό, δημιουργήστε ένα αρχείο που ονομάζεται "Player.js" και προσθέστε τον ακόλουθο κώδικα:
εισαγωγή Αντιδρώ από 'αντιδρώ';συνθ Παίκτης = () => {
ΕΠΙΣΤΡΟΦΗ (
<div>
<πλάτος βίντεο="100%" ύψος="100%" ελέγχους>
<πηγή src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" τύπος="βίντεο/mp4" />
</video>
</div>
)
}
εξαγωγήΠροκαθορισμένο Παίχτης;
Αυτός ο κώδικας εισάγει τη βιβλιοθήκη React και δημιουργεί ένα στοιχείο αναπαραγωγής. Προσθέτει επίσης ένα στοιχείο βίντεο με το χαρακτηριστικό controls να έχει οριστεί σε "true". Αυτό θα προσθέσει το βασικό πρόγραμμα αναπαραγωγής βίντεο στη σελίδα.
Στη συνέχεια, προσθέστε το κουμπί αναπαραγωγής/παύσης. Για να το κάνετε αυτό, θα χρειαστεί να προσθέσετε μερικές γραμμές κώδικα στο στοιχείο του προγράμματος αναπαραγωγής. Προσθέστε τον ακόλουθο κώδικα στο αρχείο Player.js:
εισαγωγή React, { useState, useRef } από 'αντιδρώ';συνθ Παίκτης = () => {
συνθ [isPlaying, setIsPlaying] = useState(ψευδής);
συνθ videoRef = useRef(μηδενικό);
συνθ togglePlay = () => {
αν (παίζει) {
βίντεοΑναφ.ρεύμα.παύση();
} αλλού {
βίντεοΑναφ.ρεύμα.παίζω();
}
setIsPlaying(!isPlaying);
};
ΕΠΙΣΤΡΟΦΗ (
<div>
<βίντεο
ref={videoRef}
πλάτος="100%"
ύψος="100%"
ελέγχους
>
<πηγή src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" τύπος="βίντεο/mp4" />
</video>
<κουμπί onClick={togglePlay}>
{παίζει? "Παύση": "Παίζω"}
</button>
</div>
)
}
εξαγωγήΠροκαθορισμένο Παίχτης;
Αυτός ο κώδικας χρησιμοποιεί τα άγκιστρα useState και useRef για να παρακολουθείτε την κατάσταση του βίντεο (είτε αναπαράγεται είτε είναι σε παύση) και την αναφορά στο στοιχείο βίντεο. Προσθέτει επίσης μια λειτουργία togglePlay που θα αναπαράγει και θα διακόψει το βίντεο. Το στοιχείο του κουμπιού θα ενεργοποιήσει τη λειτουργία togglePlay.
Το τελευταίο βήμα είναι να προσθέσετε τη γραμμή προόδου. Για να το κάνετε αυτό, θα χρειαστεί να προσθέσετε μερικές ακόμη γραμμές κώδικα στο αρχείο Player.js. Προσθέστε τα ακόλουθα:
εισαγωγή React, { useState, useRef } από 'αντιδρώ';συνθ Παίκτης = () => {
συνθ [isPlaying, setIsPlaying] = useState(ψευδής);
συνθ [πρόοδος, setProgress] = useState(0);
συνθ videoRef = useRef(μηδενικό);
συνθ togglePlay = () => {
αν (παίζει) {
βίντεοΑναφ.ρεύμα.παύση();
} αλλού {
βίντεοΑναφ.ρεύμα.παίζω();
}
setIsPlaying(!isPlaying);
};
συνθ handleProgress = () => {
συνθ διάρκεια = videoRef.current.duration;
συνθ CurrentTime = videoRef.current.currentTime;
συνθ πρόοδος = (τρέχουσα ώρα / διάρκεια) * 100;
setProgress (πρόοδος);
};
ΕΠΙΣΤΡΟΦΗ (
<div>
<βίντεο
onTimeUpdate={handleProgress}
ref={videoRef}
πλάτος="100%"
ύψος="100%"
ελέγχους
>
<πηγή src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" τύπος="βίντεο/mp4" />
</video>
<div>
<κουμπί onClick={togglePlay}>
{παίζει? "Παύση": "Παίζω"}
</button>
<τιμή προόδου={πρόοδος} μέγ.="100" />
</div>
</div>
)
}
εξαγωγήΠροκαθορισμένο Παίχτης;
Αυτός ο κώδικας προσθέτει τη συνάρτηση handleProgress. Αυτή η λειτουργία θα ενημερώσει τη γραμμή προόδου. Προσθέτει επίσης ένα πρόγραμμα ακρόασης συμβάντων onTimeUpdate στο στοιχείο βίντεο που θα ενεργοποιήσει τη λειτουργία handleProgress. Τέλος, προσθέτει ένα στοιχείο προόδου στη σελίδα με τα χαρακτηριστικά value και max να έχουν οριστεί στην πρόοδο και 100 αντίστοιχα.
Χρήση βιβλιοθηκών τρίτων
Η δεύτερη επιλογή για τη δημιουργία ενός προγράμματος αναπαραγωγής βίντεο στο React είναι η χρήση βιβλιοθηκών τρίτων. Υπάρχουν πολλές διαθέσιμες βιβλιοθήκες, αλλά μερικές από τις πιο δημοφιλείς είναι η ReactPlayer και η React-media-player.
ReactPlayer
Το ReactPlayer είναι μια απλή, ελαφριά βιβλιοθήκη που σας επιτρέπει να δημιουργήσετε ένα πρόγραμμα αναπαραγωγής βίντεο με λίγες μόνο γραμμές κώδικα. Για να το εγκαταστήσετε, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:
npm εγκαθιστώ react-playerΜόλις εγκατασταθεί, μπορείτε να το χρησιμοποιήσετε ως εξής:
εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή ReactPlayer από 'react-player'?συνθ Παίκτης = () => {
ΕΠΙΣΤΡΟΦΗ (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
πλάτος="100%"
ύψος="100%"
ελέγχους
/>
)
}
εξαγωγήΠροκαθορισμένο Παίχτης;
Αυτός ο κώδικας εισάγει το στοιχείο ReactPlayer από τη βιβλιοθήκη του react-player και το προσθέτει στη σελίδα. Ορίζει τα χαρακτηριστικά url, πλάτος, ύψος και ελέγχει τα χαρακτηριστικά. Ρίξτε μια ματιά σε καθεμία από αυτές τις παραμέτρους μία προς μία:
- url: Αυτή είναι η διεύθυνση URL του βίντεο που θέλετε να παίξετε.
- πλάτος: Αυτό είναι το πλάτος του προγράμματος αναπαραγωγής βίντεο.
- ύψος: Αυτό είναι το ύψος του προγράμματος αναπαραγωγής βίντεο.
- έλεγχοι: Αυτό είναι ένα boolean χαρακτηριστικό που καθορίζει εάν το πρόγραμμα αναπαραγωγής βίντεο θα έχει στοιχεία ελέγχου ή όχι.
react-video-js-player
Το react-video-js-player είναι μια άλλη απλή, ελαφριά βιβλιοθήκη που σας επιτρέπει να δημιουργήσετε ένα πρόγραμμα αναπαραγωγής βίντεο με λίγες μόνο γραμμές κώδικα. Για να το εγκαταστήσετε, εκτελέστε την ακόλουθη εντολή στο τερματικό σας:
npm εγκαθιστώ react-video-js-playerΜόλις εγκατασταθεί, μπορείτε να το χρησιμοποιήσετε ως εξής:
εισαγωγή Αντιδρώ από "αντιδρώ";
εισαγωγή VideoPlayer από "react-video-js-player"?συνθ Παίκτης = () => {
ΕΠΙΣΤΡΟΦΗ (
<VideoPlayer
πλάτος="100%"
ύψος="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ελέγχους
/>
)
}
εξαγωγήΠροκαθορισμένο Παίχτης;
Αυτός ο κώδικας εισάγει το στοιχείο VideoPlayer από τη βιβλιοθήκη react-video-js-player και το προσθέτει στη σελίδα.
Πρόσθετες λειτουργίες προγράμματος αναπαραγωγής βίντεο
Μπορείτε να προσθέσετε επιπλέον λειτουργίες στο πρόγραμμα αναπαραγωγής βίντεο, όπως:
- Προσθήκη αφίσας: Μπορείτε να προσθέσετε μια εικόνα αφίσας στο πρόγραμμα αναπαραγωγής βίντεο ορίζοντας το χαρακτηριστικό αφίσας του στοιχείου βίντεο στη διεύθυνση URL της εικόνας.
- Looping: Μπορείτε να κάνετε επαναφορά του βίντεό σας ορίζοντας το χαρακτηριστικό βρόχου του στοιχείου βίντεο σε "true".
- Σε σίγαση: Μπορείτε να κάνετε σίγαση του βίντεό σας ορίζοντας το χαρακτηριστικό σίγασης του στοιχείου βίντεο σε "true".
- Αυτόματη αναπαραγωγή: Μπορείτε να αναπαράγετε αυτόματα το βίντεό σας ορίζοντας το χαρακτηριστικό αυτόματης αναπαραγωγής του στοιχείου βίντεο σε "true".
Μπορείτε επίσης να προσθέσετε τα δικά σας προσαρμοσμένα στοιχεία ελέγχου στο πρόγραμμα αναπαραγωγής βίντεο. Για να το κάνετε αυτό, θα χρειαστεί να προσθέσετε προγράμματα ακρόασης συμβάντων στο στοιχείο βίντεο και να γράψετε συναρτήσεις για τον έλεγχο του βίντεο.
Αυξήστε την αφοσίωση των χρηστών με ένα πρόγραμμα αναπαραγωγής βίντεο
Με τα κατάλληλα εργαλεία και τεχνικές, μπορείτε εύκολα να δημιουργήσετε ένα πρόγραμμα αναπαραγωγής βίντεο στο React. Μπορείτε επίσης να προσθέσετε πρόσθετες λειτουργίες για να αυξήσετε την αφοσίωση των χρηστών. Οι συσκευές αναπαραγωγής πολυμέσων είναι ένας πολύ καλός τρόπος για να αυξήσετε την αφοσίωση των χρηστών στον ιστότοπο ή την εφαρμογή σας.
Αφού προσθέσετε ένα πρόγραμμα αναπαραγωγής βίντεο στον ιστότοπό σας, φροντίστε να παρακολουθείτε την αφοσίωση των χρηστών για να δείτε εάν έχει το επιθυμητό αποτέλεσμα. Μπορείτε επίσης να αναπτύξετε τη δοκιμή A/B για να δείτε εάν η προσθήκη ενός προγράμματος αναπαραγωγής βίντεο αυξάνει τα ποσοστά μετατροπών.
