تحسين الفيديو

توضح هذه الصفحة كيفية استخدام مقاطع الفيديو مع تطبيقات 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/watch?v=gfU1iZnjRZM"
      frameborder="0"
      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} frameborder="0" 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>جاري تحميل الفيديو...</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>جاري تحميل الفيديو...</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="مشغل فيديو">
      <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="مشغل فيديو">
      <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 للت

فاستلي (Fastly)

• تعرّف على المزيد حول دمج حلول فاستلي (Fastly) لـالفيديو حسب الطلب (VOD) ووسائط البث في إطار عمل نكست.جيه إس (Next.js).