تحكم في تشغيل الفيديو في React

في عالم تطوير واجهات الويب باستخدام React، يعتبر التحكم في تشغيل وإيقاف تشغيل الفيديو من بين التحديات الشائعة التي يواجهها المطورون. في حالتك، ترغب في تحقيق هذه الوظيفة دون اللجوء إلى استخدام مكتبات خارجية أو استخدام JavaScript العادي لاستدعاء “getElementById” واستخدام الأساليب الداخلية play() و pause().

للقيام بذلك في React بشكل نقي، يمكنك الاستفادة من مفهوم “الحالة” (State) ومن خلال استخدام الـ Hooks. فيما يلي خطوات توضح كيفية تحقيق هذا الهدف:

أولًا وقبل كل شيء، قم بإنشاء حالة تتحكم في حالة التشغيل/الإيقاف للفيديو. يمكنك استخدام الـ useState لتحقيق ذلك:

jsxCopy code
import React, { useState } from 'react';

function VideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);

  // ... مزيد من الشيفرة هنا
}

ثم، قم بإنشاء معالج حدث يقوم بتبديل قيمة الحالة بين تشغيل وإيقاف التشغيل:

jsxCopy code
function VideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);

  const handleTogglePlay = () => {
    setIsPlaying((prevIsPlaying) => !prevIsPlaying);
  };

  // ... مزيد من الشيفرة هنا
}

بعد ذلك، استخدم القيمة المحدثة للحالة لتحديد ما إذا كان يجب تشغيل الفيديو أم إيقافه:

jsxCopy code
function VideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false);

  const handleTogglePlay = () => {
    setIsPlaying((prevIsPlaying) => !prevIsPlaying);
  };

  return (
    <div>
      <video src="اسم_الفيديو.mp4" autoPlay={isPlaying} />
      <button onClick={handleTogglePlay}>
        {isPlaying ? 'إيقاف' : 'تشغيل'}
      button>
    div>
  );
}

هكذا، باستخدام حالة React والـ Hooks، يمكنك تحقيق وظيفة تشغيل/إيقاف تشغيل الفيديو دون الحاجة إلى استخدام getElementById أو الأساليب الداخلية للفيديو. يتم التحكم في حالة التشغيل باستخدام الزر المخصص، مما يوفر لك حلاً نظيفًا وقابلًا للصيانة.

بالطبع، سنوسع في المزيد من المعلومات لتوضيح الخطوات والمفاهيم المستخدمة في تطبيق React الذي تمثل تشغيل/إيقاف تشغيل الفيديو فيه.

في هذا السياق، قمنا باستخدام React Functional Component واستفدنا من الـ Hook الجديدة المُعرفة بـ useState لإدارة حالة التشغيل. هذا الـ Hook يسمح لنا بإضافة حالة محلية إلى العنصر الوظيفي (Functional Component) الخاص بنا، مما يسهل تتبع حالة التشغيل.

كما قمنا بتعريف دالة handleTogglePlay للتحكم في تغيير حالة التشغيل عند النقر على زر التشغيل/الإيقاف. يُستخدم هنا تحديث الحالة السابقة باستخدام دالة رد الفعل في setIsPlaying.

ثم قمنا بتضمين عنصر داخل عنصر