כיצד ליצור נגן וידאו ב-React

יצירת נגן וידאו ב-React עשויה להיראות כמו משימה מאתגרת. אבל עם הכלים והטכניקות הנכונות, אתה יכול לעשות זאת בקלות יחסית.

ישנן שתי דרכים ליצור נגן וידאו ב-React: שימוש בתכונות מובנות ושימוש בספריות של צד שלישי.

יצירת נגן וידאו ב-React

לפני יצירת נגן וידאו של React, ודא שיש לך הבנה בסיסית של HTML, CSS ו-JavaScript.

התחל ב יצירת אפליקציית React בסיסית כדי להוסיף את הפונקציונליות הבאה של נגן הווידאו.

שימוש בתכונות מובנות (React Hooks)

האפשרות הראשונה ליצור נגן וידאו ב-React היא להשתמש בתכונות מובנות.

התחל ביצירת רכיב הנגן שיציג את הסרטון ואת כל הפקדים שלו. כדי לעשות זאת, צור קובץ בשם "Player.js" והוסף את הקוד הבא:

יְבוּא לְהָגִיב מ 'לְהָגִיב';

const שחקן = () => {
לַחֲזוֹר (
<div>
<רוחב וידאו="100%" גובה="100%" בקרות>
<מקור src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" סוג="וידאו/mp4" />
</video>
</div>
)
}

יְצוּאבְּרִירַת מֶחדָל שחקן;

קוד זה מייבא את ספריית React ויוצר רכיב נגן. זה גם מוסיף רכיב וידאו עם תכונת הפקדים מוגדרת ל"true". זה יוסיף את נגן הווידאו הבסיסי לדף.

לאחר מכן, הוסף את כפתור ההפעלה/השהה. כדי לעשות זאת, תצטרך להוסיף כמה שורות קוד לרכיב הנגן. הוסף את הקוד הבא לקובץ Player.js:

יְבוּא תגובה, { useState, useRef } מ 'לְהָגִיב';

const שחקן = () => {
const [isPlaying, setIsPlaying] = useState(שֶׁקֶר);
const videoRef = useRef(ריק);

const togglePlay = () => {
if (isPlaying) {
וידאוRef.נוֹכְחִי.הַפסָקָה();
} אַחֵר {
וידאוRef.נוֹכְחִי.לְשַׂחֵק();
}
setIsPlaying(!isPlaying);
};

לַחֲזוֹר (
<div>
<וִידֵאוֹ
ref={videoRef}
רוחב="100%"
גובה="100%"
בקרות
>
<מקור src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" סוג="וידאו/mp4" />
</video>
<button onClick={togglePlay}>
{משחק? "הַפסָקָה": "לְשַׂחֵק"}
</button>
</div>
)
}

יְצוּאבְּרִירַת מֶחדָל שחקן;

קוד זה משתמש הווים useState ו-useRef כדי לעקוב אחר מצב הסרטון (בין אם הוא מופעל או מושהה) וההתייחסות לרכיב הסרטון. זה גם מוסיף פונקציית togglePlay שתפעיל ותשהה את הסרטון. רכיב הכפתור יפעיל את פונקציית ה-togglePlay.

השלב האחרון הוא הוספת סרגל ההתקדמות. כדי לעשות זאת, תצטרך להוסיף עוד כמה שורות קוד לקובץ Player.js. הוסף את הדברים הבאים:

יְבוּא תגובה, { useState, useRef } מ 'לְהָגִיב';

const שחקן = () => {
const [isPlaying, setIsPlaying] = useState(שֶׁקֶר);
const [התקדמות, setProgress] = useState(0);
const videoRef = useRef(ריק);

const togglePlay = () => {
if (isPlaying) {
וידאוRef.נוֹכְחִי.הַפסָקָה();
} אַחֵר {
וידאוRef.נוֹכְחִי.לְשַׂחֵק();
}
setIsPlaying(!isPlaying);
};

const handleProgress = () => {
const duration = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const התקדמות = (נוכחי / משך זמן) * 100;
setProgress (התקדמות);
};
לַחֲזוֹר (
<div>
<וִידֵאוֹ
onTimeUpdate={handleProgress}
ref={videoRef}
רוחב="100%"
גובה="100%"
בקרות
>
<מקור src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" סוג="וידאו/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{משחק? "הַפסָקָה": "לְשַׂחֵק"}
</button>
<ערך התקדמות={progress} מקסימום="100" />
</div>
</div>
)
}

יְצוּאבְּרִירַת מֶחדָל שחקן;

קוד זה מוסיף את הפונקציה handleProgress. פונקציה זו תעדכן את סרגל ההתקדמות. זה גם מוסיף מאזין אירועים onTimeUpdate לרכיב הווידאו שיפעיל את פונקציית handleProgress. לבסוף, הוא מוסיף אלמנט התקדמות לדף עם המאפיינים ערך ומקסימום מוגדרים להתקדמות ו-100 בהתאמה.

שימוש בספריות של צד שלישי

האפשרות השנייה ליצור נגן וידאו ב-React היא להשתמש בספריות של צד שלישי. ישנן ספריות רבות זמינות, אך חלק מהפופולריות שבהן הן ReactPlayer ו-React-media-player.

ReactPlayer

ReactPlayer היא ספרייה פשוטה וקלת משקל המאפשרת לך ליצור נגן וידאו עם מספר שורות קוד בלבד. כדי להתקין אותו, הפעל את הפקודה הבאה בטרמינל שלך:

npm להתקין שחקן תגובה

לאחר ההתקנה, אתה יכול להשתמש בו כך:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא ReactPlayer מ 'שחקן מגיב';

const שחקן = () => {
לַחֲזוֹר (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
רוחב="100%"
גובה="100%"
בקרות
/>
)
}

יְצוּאבְּרִירַת מֶחדָל שחקן;

קוד זה מייבא את רכיב ReactPlayer מספריית react-player ומוסיף אותו לדף. הוא מגדיר את כתובת האתר, הרוחב, הגובה ושולט בתכונות. תסתכל על כל אחד מהפרמטרים האלה אחד אחד:

• כתובת אתר: זוהי כתובת האתר של הסרטון שברצונך להפעיל.
• רוֹחַב: זהו הרוחב של נגן הווידאו.
• גוֹבַה: זה הגובה של נגן הווידאו.
• בקרות: זוהי תכונה בוליאנית שקובעת אם לנגן הווידאו יהיו פקדים או לא.

react-video-js-player

react-video-js-player היא עוד ספרייה פשוטה וקלת משקל המאפשרת לך ליצור נגן וידאו עם מספר שורות קוד בלבד. כדי להתקין אותו, הפעל את הפקודה הבאה בטרמינל שלך:

npm להתקין react-video-js-player

לאחר ההתקנה, אתה יכול להשתמש בו כך:

יְבוּא לְהָגִיב מ "לְהָגִיב";
יְבוּא נגן וידאו מ "react-video-js-player";

const שחקן = () => {
לַחֲזוֹר (
<נגן וידאו
רוחב="100%"
גובה="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
בקרות
/>
)
}

יְצוּאבְּרִירַת מֶחדָל שחקן;

קוד זה מייבא את רכיב VideoPlayer מספריית react-video-js-player ומוסיף אותו לדף.

תכונות נגן וידאו נוספות

אתה יכול להוסיף תכונות נוספות לנגן הווידאו שלך, כגון:

1. הוספת פוסטר: אתה יכול להוסיף תמונת פוסטר לנגן הווידאו שלך על ידי הגדרת תכונת הפוסטר של רכיב הווידאו לכתובת ה-URL של התמונה.
2. לולאה: אתה יכול ללולאה את הסרטון שלך על ידי הגדרת תכונת הלולאה של רכיב הווידאו ל"true".
3. מושתק: אתה יכול להשתיק את הסרטון שלך על ידי הגדרת התכונה המושתקת של רכיב הסרטון ל"true".
4. הפעלה אוטומטית: אתה יכול להפעיל אוטומטית את הסרטון שלך על ידי הגדרת תכונת ההפעלה האוטומטית של רכיב הסרטון ל"true".

אתה יכול גם להוסיף פקדים מותאמים אישית משלך לנגן הווידאו. כדי לעשות זאת, תצטרך להוסיף מאזינים לאירועים לאלמנט הווידאו ולכתוב פונקציות כדי לשלוט בסרטון.

הגבר את מעורבות המשתמש עם נגן וידאו

עם הכלים והטכניקות הנכונות, תוכלו ליצור בקלות נגן וידאו ב-React. אתה יכול גם להוסיף תכונות נוספות כדי להגביר את מעורבות המשתמש. נגני מדיה הם דרך מצוינת להגביר את מעורבות המשתמש באתר או באפליקציה שלך.

לאחר הוספת נגן וידאו לאתר שלך, הקפד לעקוב אחר מעורבות המשתמש כדי לראות אם יש לה את האפקט הרצוי. אתה יכול גם לפרוס בדיקות A/B כדי לראות אם הוספת נגן וידאו מגדילה את שיעורי ההמרה.