~2 دقیقه مطالعه • بروزرسانی ۶ آبان ۱۴۰۴
استفاده از تگ
برای نمایش ویدیو در Next.js میتوان از تگ video برای فایلهای خودمیزبان و از iframe برای ویدیوهای میزبانیشده در پلتفرمهایی مانند YouTube استفاده کرد.
نمونه استفاده از
<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>ویژگیهای مهم تگ
controls: نمایش کنترلهای پخشautoPlay: پخش خودکار (نیازمندmutedوplaysInline)preload: نحوهٔ بارگذاری اولیه (none, metadata, auto)track: افزودن زیرنویس
نمونه استفاده از
<iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />ویژگیهای مهم: width, height, loading="lazy", title, sandbox
انتخاب روش نمایش ویدیو
- ویدیوهای خودمیزبان: کنترل کامل، مناسب برای نیازهای خاص
- ویدیوهای خارجی: راحتی استفاده، مناسب برای محتوای عمومی
استریم ویدیو با React Suspense
برای بارگذاری تدریجی ویدیو:
<Suspense fallback={<p>Loading video...</p>}>
<VideoComponent />
</Suspense>استفاده از Skeleton بهجای پیام ساده
<Suspense fallback={<VideoSkeleton />}>
<VideoComponent />
</Suspense>مزایای ویدیوهای خودمیزبان
- کنترل کامل و استقلال از پلتفرمهای خارجی
- سفارشیسازی برای نیازهای خاص
- بهینهسازی عملکرد و مقیاسپذیری
- ادغام آسان با Next.js و زیرساختهای موجود
میزبانی ویدیو با Vercel Blob
Vercel Blob فضای ذخیرهسازی ابری برای ویدیوها فراهم میکند.
- آپلود ویدیو از داشبورد یا با Server Action
- نمایش ویدیو با استفاده از URL فایل
نمونه نمایش ویدیو از Vercel Blob
const { blobs } = await list({ prefix: fileName, limit: 1 })
const { url } = blobs[0]
<video controls preload="none">
<source src={url} type="video/mp4" />
</video>افزودن زیرنویس از Vercel Blob
const { url } = blobs[0]
const { url: captionsUrl } = blobs[1]
<track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />جمعبندی
با استفاده از تگهای HTML، React Suspense، و Vercel Blob میتوانید ویدیوها را بهصورت بهینه در Next.js نمایش دهید. انتخاب روش مناسب به نیازهای پروژه و تجربهٔ کاربری مورد نظر شما بستگی دارد.
نوشته و پژوهش شده توسط دکتر شاهین صیامی