كيفية استخدام وتحسين مقاطع الفيديو

تشرح هذه الصفحة كيفية استخدام مقاطع الفيديو مع تطبيقات Next.js، موضحة كيفية تخزين وعرض ملفات الفيديو دون التأثير على الأداء.

استخدام <video> و <iframe>

يمكن تضمين مقاطع الفيديو في الصفحة باستخدام علامة HTML <video> لمقاطع الفيديو المباشرة و <iframe> لمقاطع الفيديو المستضافة على منصات خارجية.

<video>

يمكن لعلامة HTML <video> تضمين محتوى فيديو مستضاف ذاتيًا أو يتم تقديمه مباشرة، مما يسمح بالتحكم الكامل في التشغيل والمظهر.

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="/path/to/video.mp4" type="video/mp4" />
      <track
        src="/path/to/captions.vtt"
        kind="subtitles"
        srcLang="en"
        label="English"
      />
      Your browser does not support the video tag.
    </video>
  )
}

سمات شائعة لعلامة <video>

معلومة مفيدة: عند استخدام سمة autoPlay، من المهم تضمين سمة muted أيضًا لضمان تشغيل الفيديو تلقائيًا في معظم المتصفحات وسمة playsInline لتوافق أجهزة iOS.

للحصول على قائمة كاملة بسمات الفيديو، راجع توثيق MDN.

أفضل ممارسات الفيديو

• محتوى احتياطي: عند استخدام علامة <video>، قم بتضمين محتوى احتياطي داخل العلامة للمتصفحات التي لا تدعم تشغيل الفيديو.
• ترجمات أو تعليقات: قم بتضمين ترجمات أو تعليقات للمستخدمين الصم أو ضعاف السمع. استخدم علامة <track> مع عناصر <video> لتحديد مصادر ملفات الترجمة.
• عناصر تحكم قابلة للوصول: يُوصى باستخدام عناصر تحكم HTML5 القياسية للتنقل عبر لوحة المفاتيح وتوافق قارئات الشاشة. للاحتياجات المتقدمة، فكر في استخدام مشغلات طرف ثالث مثل react-player أو video.js، والتي توفر عناصر تحكم قابلة للوصول وتجربة متسقة عبر المتصفحات.

<iframe>

تسمح علامة HTML <iframe> بتضمين مقاطع الفيديو من منصات خارجية مثل YouTube أو Vimeo.

export default function Page() {
  return (
    <iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />
  )
}

سمات شائعة لعلامة <iframe>

للحصول على قائمة كاملة بسمات iframe، راجع توثيق MDN.

اختيار طريقة تضمين الفيديو

هناك طريقتان يمكنك من خلالهما تضمين مقاطع الفيديو في تطبيق Next.js الخاص بك:

• مقاطع الفيديو المستضافة ذاتيًا أو الملفات المباشرة: قم بتضمين مقاطع الفيديو المستضافة ذاتيًا باستخدام علامة <video> للحالات التي تتطلب تحكمًا تفصيليًا في وظائف ومظهر المشغل. تتيح طريقة التكامل هذه في Next.js تخصيصًا وتحكمًا في محتوى الفيديو الخاص بك.
• استخدام خدمات استضافة الفيديو (YouTube، Vimeo، إلخ): لخدمات استضافة الفيديو مثل YouTube أو Vimeo، ستقوم بتضمين مشغلاتهم القائمة على iframe باستخدام علامة <iframe>. بينما تحد هذه الطريقة من بعض التحكم في المشغل، فإنها توفر سهولة في الاستخدام وميزات مقدمة من هذه المنصات.

اختر طريقة التضمين التي تتوافق مع متطلبات تطبيقك وتجربة المستخدم التي تهدف إلى تقديمها.

تضمين مقاطع الفيديو المستضافة خارجيًا

لتضمين مقاطع الفيديو من المنصات الخارجية، يمكنك استخدام Next.js لجلب معلومات الفيديو و React Suspense للتعامل مع حالة الاحتياط أثناء التحميل.

1. إنشاء مكون خادم لتضمين الفيديو

الخطوة الأولى هي إنشاء مكون خادم يقوم بإنشاء iframe مناسب لتضمين الفيديو. سيقوم هذا المكون بجلب عنوان URL المصدر للفيديو وعرض iframe.

export default async function VideoComponent() {
  const src = await getVideoSrc()

  return <iframe src={src} allowFullScreen />
}

2. بث مكون الفيديو باستخدام React Suspense

بعد إنشاء مكون الخادم لتضمين الفيديو، تكون الخطوة التالية هي بث المكون باستخدام React Suspense.

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'

export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Loading video...</p>}>
        <VideoComponent />
      </Suspense>
      {/* محتوى آخر للصفحة */}
    </section>
  )
}

معلومة مفيدة: عند تضمين مقاطع الفيديو من المنصات الخارجية، ضع في الاعتبار أفضل الممارسات التالية:

• تأكد من أن تضمينات الفيديو متجاوبة. استخدم CSS لجعل iframe أو مشغل الفيديو يتكيف مع أحجام الشاشات المختلفة.
• نفذ استراتيجيات لتحميل مقاطع الفيديو بناءً على ظروف الشبكة، خاصة للمستخدمين الذين لديهم خطط بيانات محدودة.

يؤدي هذا النهج إلى تجربة مستخدم أفضل حيث يمنع الصفحة من التوقف، مما يعني أن المستخدم يمكنه التفاعل مع الصفحة أثناء بث مكون الفيديو.

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

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
import VideoSkeleton from '../ui/VideoSkeleton.jsx'

export default function Page() {
  return (
    <section>
      <Suspense fallback={<VideoSkeleton />}>
        <VideoComponent />
      </Suspense>
      {/* محتوى آخر للصفحة */}
    </section>
  )
}

مقاطع الفيديو المستضافة ذاتيًا

قد يكون استضافة مقاطع الفيديو ذاتيًا مفضلاً لعدة أسباب:

• تحكم كامل واستقلالية: يمنحك الاستضافة الذاتية إدارة مباشرة لمحتوى الفيديو الخاص بك، من التشغيل إلى المظهر، مما يضمن الملكية الكاملة والتحكم، بعيدًا عن قيود المنصات الخارجية.
• تخصيص للاحتياجات المحددة: مثالي للاحتياجات الفريدة، مثل مقاطع الفيديو الخلفية الديناميكية، حيث يسمح بالتخصيص المصمم ليناسب احتياجات التصميم والوظائف.
• اعتبارات الأداء وقابلية التوسع: اختر حلول التخزين عالية الأداء وقابلة للتوسع، لدعم زيادة حركة المرور وحجم المحتوى بشكل فعال.
• التكلفة والتكامل: وازن بين تكاليف التخزين وعرض النطاق الترددي مع الحاجة إلى تكامل سهل في إطار عمل Next.js والنظام البيئي التقني الأوسع.

استخدام Vercel Blob لاستضافة الفيديو

يوفر Vercel Blob طريقة فعالة لاستضافة مقاطع الفيديو، حيث يوفر حل تخزين سحابي قابل للتوسع يعمل بشكل جيد مع Next.js. إليك كيف يمكنك استضافة فيديو باستخدام Vercel Blob:

1. تحميل فيديو إلى Vercel Blob

في لوحة تحكم Vercel، انتقل إلى علامة التبويب "التخزين" وحدد متجر Vercel Blob الخاص بك. في الزاوية العلوية اليمنى من جدول Blob، ابحث وانقر على زر "تحميل". ثم اختر ملف الفيديو الذي ترغب في تحميله. بعد اكتمال التحميل، سيظهر ملف الفيديو في جدول Blob.

بدلاً من ذلك، يمكنك تحميل الفيديو الخاص بك باستخدام إجراء خادم. للحصول على تعليمات مفصلة، راجع توثيق Vercel حول التحميل من جانب الخادم. يدعم Vercel أيضًا التحميل من جانب العميل. قد تكون هذه الطريقة مفضلة لبعض حالات الاستخدام.

2. عرض الفيديو في Next.js

بمجرد تحميل الفيديو وتخزينه، يمكنك عرضه في تطبيق Next.js الخاص بك. إليك مثال لكيفية القيام بذلك باستخدام علامة <video> و React Suspense:

import { Suspense } from 'react'
import { list } from '@vercel/blob'

export default function Page() {
  return (
    <Suspense fallback={<p>Loading video...</p>}>
      <VideoComponent fileName="my-video.mp4" />
    </Suspense>
  )
}

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 1,
  })
  const { url } = blobs[0]

  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  )
}

في هذا النهج، تستخدم الصفحة عنوان URL الخاص بالفيديو @vercel/blob لعرض الفيديو باستخدام VideoComponent. يتم استخدام React Suspense لعرض احتياطي حتى يتم جلب عنوان URL للفيديو ويكون الفيديو جاهزًا للعرض.

إضافة ترجمات إلى الفيديو الخاص بك

إذا كان لديك ترجمات للفيديو الخاص بك، فيمكنك إضافتها بسهولة باستخدام عنصر <track> داخل علامة <video> الخاصة بك. يمكنك جلب ملف الترجمة من Vercel Blob بطريقة مشابهة لملف الفيديو. إليك كيف يمكنك تحديث <VideoComponent> لتضمين الترجمات.

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 2,
  })
  const { url } = blobs[0]
  const { url: captionsUrl } = blobs[1]

  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      Your browser does not support the video tag.
    </video>
  )
}

باتباع هذا النهج، يمكنك استضافة وتكامل مقاطع الفيديو بشكل فعال في تطبيقات Next.js الخاصة بك.

مصادر

لمواصلة التعرف على تحسين الفيديو وأفضل الممارسات، راجع المصادر التالية:

• فهم تنسيقات الفيديو وبرامج الترميز: اختر التنسيق وبرنامج الترميز المناسبين، مثل MP4 للت

تكامل ImageKit.io

• اطلع على الدليل السريع الرسمي لدمج ImageKit مع Next.js.
• يوفر التكامل مكون <IKVideo> الذي يقدم دعمًا سلسًا لمقاطع الفيديو.
• يمكنك أيضًا استكشاف مكتبات ImageKit الأخرى، مثل Node.js SDK المتاح أيضًا.