پخش ویدیو با تولید و پیش‌نمایش تصویری Thumbnails در Plyr
ساخت پیش‌نمایش تصویری ویدیو با Plyr و FFmpeg و تولید فایل VTT با Python برای نمایش هوشمندانه فریم‌ها در نوار زمان ویدیو.کتابخانه Plyr یک کتابخانه‌ی متن‌باز ...
لیست مطالب
یکی از ویژگی‌های مهم در تجربه کاربری پخش ویدیو در وب، امکان پیش‌نمایش تصویری از فریم‌های مختلف ویدیو هنگام حرکت موس روی نوار زمان است. این قابلیت که به آن preview thumbnails نیز گفته می‌شود، کمک می‌کند تا کاربران بتوانند به‌سرعت به بخش موردنظر ویدیو هدایت شوند. در این مقاله، نحوه‌ی راه‌اندازی این قابلیت را با استفاده از کتابخانه Plyr بررسی می‌کنیم. همچنین فرآیند تولید تصاویر بندانگشتی (thumbnail) با ابزار قدرتمند FFmpeg و تولید فایل متادیتای مورد نیاز (فایل VTT) با زبان Python را نیز شرح خواهیم داد.
معرفی Plyr و نقش آن در پخش حرفه‌ای ویدیو
کتابخانه Plyr یک کتابخانه‌ی متن‌باز و بسیار پیشرفته برای مدیریت و پخش چندرسانه‌ای در وب است. این کتابخانه از HTML5 video، audio، YouTube و حتی Vimeo پشتیبانی می‌کند. یکی از قابلیت‌های قابل‌توجه Plyr، پشتیبانی از پیش‌نمایش بندانگشتی برای ویدیوهاست که در تعامل کاربر با نوار پیشرفت (progress bar) نقشی کلیدی ایفا می‌کند. این ویژگی از فایل‌های WebVTT به‌عنوان منبع اطلاعات استفاده می‌کند تا تصاویر مشخصی از فریم‌های ویدیو را در بازه‌های زمانی مختلف نمایش دهد.
تولید تصاویر بندانگشتی با FFmpeg
برای ایجاد پیش‌نمایش تصویری، ابتدا باید تصاویری از فریم‌های ویدیو استخراج کنیم. FFmpeg که یکی از ابزارهای استاندارد و قدرتمند برای پردازش فایل‌های صوتی و تصویری است، این امکان را فراهم می‌کند تا با تنظیم نرخ فریم خاص، تصاویری در فواصل زمانی معین از ویدیو استخراج شود. دستور زیر یک فریم در هر 10 ثانیه با عرض 250 پیکسل تولید می‌کند و آن‌ها را در دایرکتوری مشخص ذخیره می‌کند:
mkdir -p thumbnails
ffmpeg -threads 0 -i 1.mp4 -vf "fps=1/10,scale=250:-1" thumbnails/frame_%03d.jpg
در این فرمان:
fps=1/10 به معنی استخراج یک فریم در هر 10 ثانیه است.
scale=250:-1 نسبت ابعاد را حفظ کرده و عرض تصویر را به 250 پیکسل تنظیم می‌کند.
frame_%03d.jpg تصاویر را با نام‌هایی مانند frame_001.jpg ذخیره می‌کند.
تولید فایل WebVTT برای Thumbnails با Python
پس از تولید تصاویر، نیاز به ایجاد یک فایل متادیتا با فرمت WebVTT داریم تا Plyr بتواند در زمان مناسب، تصویر مناسب را نشان دهد. این فایل دربردارنده‌ی بازه‌های زمانی و مسیر هر تصویر است. برای ایجاد این فایل می‌توان از اسکریپت Python زیر استفاده کرد:
import os
# Programmer : Ebrahim Shafiei (EbraSha)
# Email : [email protected]
frame_rate = 10 # one frame every 10 seconds
thumbnail_dir = "thumbnails"
output_vtt = os.path.join(thumbnail_dir, "thumbnails.vtt")
def seconds_to_timestamp(seconds):
h = int(seconds // 3600)
m = int((seconds % 3600) // 60)
s = seconds % 60
return f"{h:02}:{m:02}:{s:06.3f}".replace('.', ',')
files = sorted(f for f in os.listdir(thumbnail_dir) if f.endswith(".jpg"))
with open(output_vtt, "w") as vtt:
vtt.write("WEBVTT\n\n")
for i, file in enumerate(files):
start = i * frame_rate
end = start + frame_rate
vtt.write(f"{seconds_to_timestamp(start)} --> {seconds_to_timestamp(end)}\n")
vtt.write(f"{file}\n\n")
📂 ساختار نهایی پوشه:
index.html
1.mp4
thumbnails/
├─ frame_001.jpg
├─ frame_002.jpg
├─ ...
└─ thumbnails.vtt
پیاده‌سازی HTML و راه‌اندازی Plyr
برای پخش ویدیو و بارگذاری فایل VTT در Plyr، ساختار HTML و اسکریپت جاوااسکریپت زیر مورد استفاده قرار می‌گیرد:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video with Thumbnails</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<style>
.plyr__preview-thumb {
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<!-- Video with Thumbnails -->
<video id="player" playsinline controls data-poster="poster.jpg">
<source src="1.mp4" type="video/mp4" />
<track kind="metadata" label="thumbnails" default src="./thumbnails/thumbnails.vtt">
</video>
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<script>
// Programmer : Ebrahim Shafiei (EbraSha)
// Email : [email protected]
// Initialize Plyr with preview thumbnails
const player = new Plyr('#player', {
previewThumbnails: {
enabled: true,
src: './thumbnails/thumbnails.vtt'
}
});
</script>
</body>
</html>
در این مثال:
از عنصر <track> برای اتصال فایل VTT استفاده شده است.
گزینه previewThumbnails در Plyr فعال شده و مسیر فایل متادیتا مشخص گردیده است.
پوستر اولیه ویدیو از طریق ویژگی data-poster تنظیم شده است.
ایجاد پیش‌نمایش تصویری در پخش‌کننده‌های ویدیو، به‌ویژه در پروژه‌های وب، یک قابلیت حرفه‌ای و مهم محسوب می‌شود که تجربه‌ی کاربری را تا حد زیادی بهبود می‌بخشد. با ترکیب ابزارهای حرفه‌ای مانند FFmpeg برای استخراج فریم‌ها، Python برای تولید فایل‌های VTT، و Plyr برای نمایش حرفه‌ای ویدیو، می‌توان سیستمی پویا، کارآمد و کاملاً مدرن برای پخش ویدیو ایجاد کرد. این روش در پلتفرم‌های آموزشی، سایت‌های اشتراک‌گذاری ویدیو و سامانه‌های پخش محتوا کاربرد گسترده‌ای دارد.
دیدگاه های مربوط به این مقاله (برای ارسال دیدگاه در سایت حتما باید عضو باشید و پروفایل کاربری شما تکمیل شده باشد)