اگر تصویر، فایل صوتی یا ویدئویی را برای صفحه وب خود آماده کرده‌اید، قدم بعدی این است که آن را با استفاده از HTML به مرورگر معرفی کنید. برای نمایش تصویر معمولاً از تگ img و برای پخش صوت و ویدئو از تگ‌های audio و video استفاده می‌کنیم. عناصر دیگری مانند picture، figure، source و track نیز کمک می‌کنند منابع رسانه‌ای مناسب را انتخاب کنیم، توضیحی همراه تصویر قرار دهیم یا به ویدئو زیرنویس اضافه کنیم.
در این آموزش تصاویر و چندرسانه‌ای در HTML، ابتدا با آماده‌سازی فایل‌ها و آدرس‌دهی به آن‌ها آشنا می‌شویم، سپس روش افزودن انواع رسانه را با مثال‌های عملی یاد می‌گیریم. در پایان نیز یک صفحه چندرسانه‌ای می‌سازیم و بررسی می‌کنیم که اگر تصویر، صوت یا ویدئو نمایش داده نشد، از کجا باید عیب‌یابی را شروع کنیم. برای انجام تمرین‌ها، آشنایی اولیه با ساخت یک فایل HTML کافی است.
برای افزودن رسانه به HTML چه چیزهایی لازم داریم؟
برای قرار دادن تصویر، صوت و ویدئو در یک صفحه HTML، ابتدا باید یک فایل HTML و فایل‌های رسانه‌ای موردنظر را آماده کنیم. سپس با مشخص‌کردن مسیر هر فایل در کد HTML، به مرورگر می‌گوییم رسانه موردنظر را از کجا پیدا کند.
اگر هنوز با نقش HTML در ساختار صفحات وب آشنا نیستید، می‌توانید پیش از شروع تمرین، راهنمای HTML چیست را مطالعه کنید.
برای شروع، به یک ویرایشگر کد مانند Visual Studio Code، یک مرورگر و پوشه‌ای برای نگهداری فایل‌های پروژه نیاز داریم. فرض می‌کنیم از قبل می‌توانید یک فایل index.html بسازید و آن را در مرورگر باز کنید. اگر هنوز این مرحله را انجام نداده‌اید، ابتدا آموزش ساخت اولین فایل HTML را دنبال کنید.
ساختار پوشه پروژه
بهتر است فایل‌های تصویر، صوت و ویدئو را در پوشه‌های جداگانه نگهداری کنیم تا مدیریت آن‌ها ساده‌تر شود. برای مثال، می‌توانیم پروژه‌ای با ساختار زیر داشته باشیم:
media-demo/
│
├── index.html
│
└── media/
├── images/
│ └── photo.jpg
│
├── audio/
│ └── intro.mp3
│
└── video/
└── intro.mp4
در این ساختار، فایل index.html سند اصلی ماست و پوشه media فایل‌های رسانه‌ای را در خود نگه می‌دارد. داخل آن نیز سه پوشه برای تصاویر (images)، فایل‌های صوتی (audio) و ویدئوها (video) ساخته‌ایم.
نام فایل‌ها در این مثال فرضی است. برای ادامه تمرین، باید فایل‌های واقعی خودتان را در پوشه‌های مربوط قرار دهید. اگر نام تصویر شما landscape.jpg است، لازم نیست آن را به photo.jpg تغییر دهید؛ فقط باید هنگام آدرس‌دهی از نام واقعی فایل استفاده کنید.
آدرس‌دهی به فایل‌های رسانه‌ای
مرورگر برای پیدا کردن یک فایل رسانه‌ای به آدرس آن نیاز دارد. در مثال‌های این مقاله از مسیر نسبی (Relative Path) استفاده می‌کنیم؛ یعنی مسیر فایل را نسبت به محل سند HTML مشخص می‌کنیم.
فرض کنید می‌خواهیم تصویری به نام photo.jpg را از ساختار پوشه قبلی پیدا کنیم. چون فایل index.html بیرون از پوشه media قرار دارد، مسیر تصویر به این شکل خواهد بود:
media/images/photo.jpg
این مسیر به مرورگر می‌گوید از محل سند HTML وارد پوشه media، سپس images شود و فایل photo.jpg را پیدا کند. برای فایل‌های صوتی و ویدئویی همین پروژه نیز مسیرها به‌ترتیب media/audio/intro.mp3 و media/video/intro.mp4 خواهند بود.
اگر تصویر مستقیماً کنار فایل index.html قرار داشت، نوشتن photo.jpg کافی بود. همچنین برای اشاره به فایلی در پوشه والد می‌توان از ../ استفاده کرد.
نکته مهم این است که مسیر نوشته‌شده باید با محل واقعی فایل مطابقت داشته باشد. اگر پوشه‌ای را جابه‌جا کنید یا نام فایلی تغییر کند، باید آدرس مربوط به آن را نیز اصلاح کنید.
در ادامه، این مسیرها را داخل اتریبیوت‌هایی مانند src قرار می‌دهیم تا عناصر HTML بتوانند به فایل‌های رسانه‌ای اشاره کنند. اگر می‌خواهید تفاوت مسیر نسبی، مسیر مطلق و آدرس‌های اینترنتی را دقیق‌تر یاد بگیرید، مقاله آموزش لینک‌ها و مسیرها در HTML این موضوع را به‌صورت مستقل بررسی می‌کند.
برای اطمینان از آماده‌بودن پروژه، فعلاً کافی است فایل index.html و پوشه‌های رسانه‌ای را ایجاد کنید و مطمئن شوید فایل‌های موردنظر با نام و پسوند صحیح در مسیرهای مشخص‌شده قرار دارند. در بخش بعد یاد می‌گیریم چگونه اولین تصویر را با استفاده از تگ img در صفحه نمایش دهیم.
چگونه تصویر را در HTML نمایش دهیم؟
برای نمایش تصویر در یک صفحه HTML از تگ img استفاده می‌کنیم. این تگ به مرورگر می‌گوید کدام فایل تصویری را بارگذاری کند و در چه قسمتی از صفحه نمایش دهد.
تگ img برخلاف بسیاری از تگ‌های HTML، تگ پایانی ندارد و محتوایی میان تگ باز و بسته قرار نمی‌گیرد. اطلاعات لازم برای نمایش تصویر را از طریق اتریبیوت‌هایی مانند src و alt مشخص می‌کنیم.
نمونه ساده استفاده از تگ img
فرض کنید در پروژه‌ای که در بخش قبل ساختیم، فایل photo.jpg تصویری از یک کوهستان در کنار دریاچه است. برای نمایش این تصویر، کد زیر را داخل بخش body فایل index.html قرار می‌دهیم:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="کوهستان در کنار دریاچه" title="تصاویر و چندرسانه‌ای در HTML | آموزش عکس، صوت و ویدئو" data-lazy-src="http://media/images/photo.jpg"><noscript><img decoding="async" src="media/images/photo.jpg" alt="کوهستان در کنار دریاچه" title="تصاویر و چندرسانه‌ای در HTML | آموزش عکس، صوت و ویدئو"></noscript>
در این کد، دو اتریبیوت نقش اصلی دارند:
- src (Source): آدرس فایل تصویری را مشخص می‌کند. در مثال ما، مرورگر تصویر را در مسیر media/images/photo.jpg جست‌وجو می‌کند.
- alt (Alternative Text): متن جایگزینی برای تصویر تعریف می‌کند تا اطلاعات یا مفهوم ضروری تصویر در شرایطی که دیده نمی‌شود نیز قابل انتقال باشد.
اگر فایل تصویر در مسیر مشخص‌شده وجود داشته باشد و مرورگر بتواند آن را نمایش دهد، پس از بازکردن index.html، تصویر در همان قسمتی از صفحه ظاهر می‌شود که تگ img را قرار داده‌ایم.
برای این کار نیازی به نوشتن تگ پایانی </img> نداریم؛ چنین تگ پایانی در HTML معتبر نیست.
متن جایگزین تصویر با اتریبیوت alt
اتریبیوت alt فقط برای زمانی نیست که تصویر بارگذاری نمی‌شود. متن جایگزین به افرادی که از صفحه‌خوان استفاده می‌کنند نیز کمک می‌کند اطلاعات یا هدف تصویر را درک کنند.
متن جایگزین مناسب باید با نقش تصویر در همان صفحه هماهنگ باشد. برای مثال، اگر تصویری مراحل ساخت یک صفحه وب را نشان می‌دهد، نوشتن «عکس» اطلاعات چندانی منتقل نمی‌کند؛ بهتر است متن، موضوع یا نکته ضروری تصویر را توضیح دهد.
البته تمام تصاویر به توضیح متنی نیاز ندارند. اگر تصویری صرفاً تزئینی باشد و اطلاعات مستقلی به محتوا اضافه نکند، می‌توان از alt=”” استفاده کرد تا صفحه‌خوان معمولاً از اعلام آن صرف‌نظر کند. این کار با حذف کامل اتریبیوت alt تفاوت دارد.
در مثال ما، عبارت «کوهستان در کنار دریاچه» تنها زمانی مناسب است که تصویر واقعاً همین محتوا را نشان دهد. بنابراین هنگام استفاده از فایل تصویری خودتان، متن جایگزین را نیز متناسب با آن تغییر دهید.
تعیین ابعاد تصویر با width و height
با استفاده از اتریبیوت‌های width و height می‌توان عرض و ارتفاع تصویر را در HTML مشخص کرد. مقدار این اتریبیوت‌ها به‌صورت عدد و برحسب پیکسل CSS نوشته می‌شود؛ بنابراین نیازی نیست عبارت px را داخل مقدار آن‌ها قرار دهیم.
برای مثال، اگر فایل photo.jpg واقعاً تصویری با ابعاد ۱۲۰۰ در ۸۰۰ پیکسل باشد، می‌توانیم کد قبلی را به شکل زیر تکمیل کنیم:
<img fetchpriority="high" fetchpriority="high" decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20800'%3E%3C/svg%3E"
alt="کوهستان در کنار دریاچه"
width="1200"
height="800"
data-lazy-src="http://media/images/photo.jpg"
><noscript><img fetchpriority="high" fetchpriority="high" decoding="async"
src="media/images/photo.jpg"
alt="کوهستان در کنار دریاچه"
width="1200"
height="800"
></noscript>
مشخص‌کردن ابعاد صحیح به مرورگر کمک می‌کند پیش از بارگذاری کامل تصویر، نسبت عرض به ارتفاع آن را بداند و فضای لازم را در چیدمان صفحه پیش‌بینی کند. این کار می‌تواند از جابه‌جایی ناگهانی محتوای اطراف تصویر هنگام بارگذاری جلوگیری کند.
مقادیر width و height باید با نسبت ابعاد واقعی تصویر هماهنگ باشند. واردکردن مقادیر نامتناسب ممکن است باعث کشیدگی یا فشردگی تصویر شود. همچنین این دو اتریبیوت به‌تنهایی تصویر را برای همه اندازه‌های صفحه واکنش‌گرا نمی‌کنند؛ برای کنترل نحوه نمایش تصویر در صفحه‌نمایش‌های مختلف می‌توان از CSS استفاده کرد.
اکنون می‌توانید فایل index.html را در مرورگر باز کنید و نتیجه را ببینید. اگر تصویر نمایش داده نشد، ابتدا نام فایل، پسوند و مسیر نوشته‌شده در src را با فایل واقعی مقایسه کنید. در بخش عیب‌یابی مقاله، دلایل احتمالی نمایش‌داده‌نشدن رسانه‌ها را دقیق‌تر بررسی می‌کنیم.
چه زمانی از picture و figure استفاده کنیم؟
تگ img برای نمایش بیشتر تصاویر در HTML کافی است؛ اما گاهی لازم داریم نسخه متفاوتی از یک تصویر را متناسب با شرایط نمایش انتخاب کنیم یا تصویری را همراه با توضیح مشخصی در صفحه قرار دهیم. در چنین شرایطی، عناصر picture و figure به کمک ما می‌آیند.
این دو عنصر کاربرد متفاوتی دارند: picture برای انتخاب منبع مناسب تصویر است، درحالی‌که figure برای گروه‌بندی معنایی یک محتوا و توضیح مرتبط با آن استفاده می‌شود. بنابراین، هیچ‌کدام جایگزین مستقیم تگ img نیستند.
تصاویر جایگزین با picture و source
فرض کنید تصویری عریض از یک منظره داریم که در صفحه دسکتاپ به‌خوبی دیده می‌شود؛ اما وقتی همان تصویر را در صفحه کوچک موبایل نمایش می‌دهیم، جزئیات مهم آن به‌سختی قابل تشخیص هستند.
یکی از راه‌حل‌ها این است که نسخه دیگری از تصویر تهیه کنیم که کادر مناسب‌تری برای صفحه‌های کوچک داشته باشد. با استفاده از picture می‌توانیم شرایط انتخاب این نسخه‌ها را در HTML مشخص کنیم.
برای مثال، دو فایل زیر را در پوشه media/images پروژه قرار می‌دهیم:
- photo.jpg: تصویر اصلی برای نمایش در صفحه‌های بزرگ‌تر
- photo-mobile.jpg: نسخه‌ای با کادربندی مناسب‌تر برای صفحه‌های کوچک
سپس کد زیر را در فایل HTML می‌نویسیم:
<picture>
<source
media="(max-width: 600px)"
data-lazy-srcset="media/images/photo-mobile.jpg"
>
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="کوهستان در کنار دریاچه"
data-lazy-src="http://media/images/photo.jpg" ><noscript><img decoding="async"
src="media/images/photo.jpg"
alt="کوهستان در کنار دریاچه"
></noscript>
</picture>
در این ساختار، هر عنصر وظیفه مشخصی دارد:
- picture: چند منبع احتمالی تصویر را در یک ساختار قرار می‌دهد تا مرورگر بتواند منبع مناسب را انتخاب کند.
- source: یک منبع جایگزین همراه با شرایط انتخاب آن معرفی می‌کند.
- media: شرط انتخاب منبع را تعیین می‌کند. در مثال ما، این شرط زمانی برقرار است که عرض محیط نمایش حداکثر ۶۰۰ پیکسل CSS باشد.
- srcset: آدرس تصویر پیشنهادی را در عنصر source مشخص می‌کند.
- img: تصویر اصلی و متن جایگزین را تعریف می‌کند و زمانی که هیچ‌یک از منابع پیشنهادی انتخاب نشوند، منبع پیش‌فرض تصویر را در اختیار مرورگر قرار می‌دهد.
در نتیجه، اگر عرض محیط نمایش ۶۰۰ پیکسل یا کمتر باشد، مرورگر منبع معرفی‌شده در source را انتخاب می‌کند. در عرض‌های بیشتر، تصویر مشخص‌شده در img استفاده می‌شود. عدد ۶۰۰ فقط برای این مثال انتخاب شده و یک مرز ثابت برای تمام وب‌سایت‌ها نیست.
کاربرد picture فقط به تغییر کادربندی محدود نیست. می‌توان با اتریبیوت type نیز منابعی با فرمت‌های متفاوت معرفی کرد تا مرورگر براساس فرمت‌هایی که پشتیبانی می‌کند، تصویر مناسب را انتخاب کند. جزئیات انتخاب تصاویر واکنش‌گرا و مدیریت فرمت‌ها را می‌توان در آموزش تخصصی این عنصر بررسی کرد.
تصویر دارای توضیح با figure و figcaption
گاهی تصویر فقط بخشی از ظاهر صفحه نیست و می‌خواهیم آن را به‌عنوان محتوایی مستقل، همراه با عنوان یا توضیحی مرتبط ارائه کنیم. برای مثال، ممکن است در یک مقاله آموزشی تصویری از نتیجه اجرای کد داشته باشیم و بخواهیم زیر آن بنویسیم که تصویر چه چیزی را نشان می‌دهد.
بیایید تصویر نمونه پروژه را همراه با یک توضیح نمایش دهیم:
<figure>
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="کوهستان در کنار دریاچه"
data-lazy-src="http://media/images/photo.jpg" ><noscript><img decoding="async"
src="media/images/photo.jpg"
alt="کوهستان در کنار دریاچه"
></noscript>
<figcaption>
شکل ۱ — تصویر نمونه استفاده‌شده در این تمرین HTML
</figcaption>
</figure>
در این مثال، عنصر figure تصویر و توضیح مرتبط با آن را در یک گروه معنایی قرار می‌دهد. عنصر figcaption نیز نقش عنوان یا توضیح همراه تصویر را دارد و می‌تواند در ابتدا یا انتهای محتوای figure قرار بگیرد.
دقت کنید که figcaption جایگزین اتریبیوت alt نیست. متن alt باید جایگزین مناسبی برای محتوای تصویری باشد، درحالی‌که figcaption توضیح یا عنوانی است که در صفحه دیده می‌شود و به محتوای داخل figure ارتباط معنایی دارد.
همچنین استفاده از figure به تصاویر محدود نیست؛ برای نمونه، می‌توان قطعه‌کد، نمودار یا محتوای مستقلی را که به توضیح همراه نیاز دارد نیز داخل آن قرار داد.
در صورت نیاز، حتی می‌توان picture را داخل figure قرار داد. در این حالت، picture انتخاب منبع تصویر را مدیریت می‌کند و figure تصویر انتخاب‌شده را همراه با توضیح آن در یک گروه معنایی قرار می‌دهد.
پس برای انتخاب میان این عناصر، کافی است به نیاز صفحه توجه کنیم: اگر فقط می‌خواهیم یک تصویر نمایش دهیم، معمولاً img کافی است؛ اگر انتخاب منبع تصویر اهمیت دارد، از picture استفاده می‌کنیم؛ و اگر محتوا به یک توضیح یا عنوان مرتبط نیاز دارد، figure و figcaption گزینه مناسبی هستند.
چگونه فایل صوتی را در HTML قرار دهیم؟
برای قرار دادن فایل صوتی در یک صفحه HTML از تگ audio استفاده می‌کنیم. این تگ به مرورگر امکان می‌دهد فایل‌هایی مانند موسیقی، پادکست یا توضیحات صوتی را مستقیماً در صفحه پخش کند؛ بدون اینکه برای پخش معمول آن‌ها به افزونه جداگانه‌ای نیاز باشد.
ساخت پخش‌کننده صوت با audio و controls
فرض کنید فایل intro.mp3 را مطابق ساختار پروژه قبلی، داخل پوشه media/audio قرار داده‌ایم. برای اضافه‌کردن یک پخش‌کننده صوتی به صفحه، کد زیر را در بخش body فایل index.html می‌نویسیم:
<audio src="media/audio/intro.mp3" controls></audio>
در این مثال، دو بخش اصلی داریم:
- src: مسیر فایل صوتی را مشخص می‌کند. مرورگر از این آدرس برای پیدا کردن و بارگذاری فایل استفاده می‌کند.
- controls: کنترل‌های پیش‌فرض مرورگر را برای مدیریت پخش صدا نمایش می‌دهد.
پس از بازکردن صفحه در مرورگر، باید یک پخش‌کننده صوتی ببینید. این پخش‌کننده معمولاً امکاناتی مانند شروع و توقف پخش، مشاهده زمان و جابه‌جایی در فایل صوتی را فراهم می‌کند. ظاهر و جزئیات کنترل‌ها ممکن است در مرورگرها و سیستم‌عامل‌های مختلف متفاوت باشد.
اتریبیوت controls از نوع Boolean است؛ یعنی وجود آن برای فعال‌کردن قابلیت مربوط کافی است و لازم نیست مقداری مانند controls=”true” برای آن بنویسیم.
نکته دیگر اینکه برخلاف تگ img، عنصر audio دارای تگ آغازین و پایانی است. بنابراین باید آن را با </audio> ببندیم.
اگر اتریبیوت controls را حذف کنیم، مرورگر کنترل‌های پیش‌فرض پخش را نمایش نمی‌دهد. در این حالت، برای اینکه کاربر بتواند پخش صوت را مدیریت کند، معمولاً باید رابط کنترلی دیگری، مثلاً با جاوااسکریپت، فراهم کنیم. پس برای یک پخش‌کننده ساده و قابل استفاده، بهتر است controls را نگه داریم.
همچنین بهتر است پخش صوت را به انتخاب کاربر واگذار کنیم. استفاده از autoplay برای شروع خودکار پخش، علاوه بر اینکه ممکن است تجربه ناخوشایندی ایجاد کند، در بسیاری از مرورگرها با محدودیت‌هایی روبه‌رو است.
تعیین منبع صوت با src یا source
اما همه مرورگرها و محیط‌های پخش الزاماً از تمام فرمت‌ها و کدک‌های صوتی پشتیبانی نمی‌کنند. اگر بخواهیم چند نسخه از یک محتوای صوتی را ارائه دهیم، می‌توانیم به‌جای تعیین src روی عنصر audio، از چند عنصر source درون آن استفاده کنیم.
برای مثال، فرض کنید علاوه بر intro.mp3، نسخه دیگری از همان محتوای صوتی با نام intro.ogg نیز داریم و هر دو فایل را داخل پوشه media/audio قرار داده‌ایم:
<audio controls>
<source src="media/audio/intro.ogg" type="audio/ogg">
<source src="media/audio/intro.mp3" type="audio/mpeg">
<p>
مرورگر شما از پخش‌کننده صوتی HTML پشتیبانی نمی‌کند.
<a href="media/audio/intro.mp3">دریافت فایل صوتی</a>
</p>
</audio>
در این ساختار، هر عنصر source یک فایل صوتی را معرفی می‌کند. اتریبیوت src مسیر فایل و اتریبیوت type نوع رسانه یا همان MIME Type را مشخص می‌کند.
برای نمونه، audio/ogg نوع رسانه فایل OGG و audio/mpeg نوع متداول فایل MP3 است. این اطلاعات به مرورگر کمک می‌کند بدون دریافت کامل فایل، درباره پشتیبانی از نوع رسانه تصمیم بگیرد؛ هرچند پخش موفق همچنان به فرمت و کدک واقعی فایل وابسته است.
مرورگر منابع معرفی‌شده را به‌ترتیب بررسی می‌کند و تلاش می‌کند اولین منبع قابل استفاده را بارگذاری کند. بنابراین اگر نتواند از منبع اول استفاده کند، می‌تواند منبع بعدی را بررسی کند.
متنی که بعد از عناصر source و داخل audio قرار داده‌ایم، محتوای جایگزین برای مرورگرهایی است که خود عنصر audio را پشتیبانی نمی‌کنند. این متن قرار نیست در مرورگرهای پشتیبان، هنگام خطای بارگذاری یا پخش فایل به‌صورت خودکار نمایش داده شود.
دقت کنید که برای اجرای این مثال، هر دو فایل intro.ogg و intro.mp3 باید واقعاً در مسیرهای نوشته‌شده وجود داشته باشند. همچنین بهتر است هر دو نسخه، محتوای صوتی یکسانی داشته باشند تا تغییر منبع باعث تغییر محتوای قابل شنیدن نشود.
در مثال چندمنبعی، اتریبیوت src را روی خود عنصر audio قرار ندادیم؛ زیرا منابع را با عناصر source تعریف کرده‌ایم. این با کاربرد source داخل picture متفاوت است؛ در آنجا از srcset برای معرفی تصویر استفاده می‌کردیم.
برای یک تمرین ساده، داشتن فایل MP3 و استفاده از روش اول کافی است. زمانی سراغ چند منبع بروید که برای پوشش نیازهای پخش، واقعاً نسخه‌های جایگزین آماده کرده باشید. اگر به جزئیات اتریبیوت‌ها و قابلیت‌های این عنصر نیاز دارید، می‌توانید آموزش تخصصی تگ audio در HTML را مطالعه کنید.
برای بررسی نتیجه، صفحه index.html را در مرورگر باز کنید، دکمه پخش را بزنید و مطمئن شوید صدای فایل شنیده می‌شود. اگر کنترل‌ها نمایش داده می‌شوند اما صدا پخش نمی‌شود، ابتدا مسیر فایل و سپس سالم‌بودن فایل و پشتیبانی مرورگر از فرمت و کدک آن را بررسی کنید. نمایش پخش‌کننده به‌تنهایی به معنی پخش موفق فایل نیست.
در پایان، اگر فایل صوتی حاوی گفتار یا اطلاعات آموزشی مهم است، بهتر است متن پیاده‌شده آن را نیز در دسترس مخاطب قرار دهید تا افرادی که امکان شنیدن صدا را ندارند، از محتوای آن محروم نشوند.
چگونه ویدئو را در HTML نمایش دهیم؟
برای نمایش ویدئو در یک صفحه HTML از تگ video استفاده می‌کنیم. این تگ امکان پخش مستقیم فایل‌های ویدئویی را در مرورگر فراهم می‌کند و می‌توانیم با کمک اتریبیوت‌های آن، کنترل‌های پخش، تصویر پیش‌نمایش و منابع جایگزین را مشخص کنیم.
روش استفاده از video شباهت زیادی به تگ audio دارد؛ با این تفاوت که این بار علاوه بر صدا، محتوای تصویری نیز نمایش داده می‌شود. برای شروع، کافی است فایل ویدئویی را در مسیر مناسب قرار دهیم و آن را به سند HTML معرفی کنیم.
ساخت پخش‌کننده ویدئو با video و controls
فرض کنید فایل intro.mp4 را مطابق ساختار پروژه قبلی، داخل پوشه media/video قرار داده‌ایم. برای نمایش این ویدئو، کد زیر را در بخش body فایل index.html می‌نویسیم:
<video src="media/video/intro.mp4" controls width="640"></video>
در این مثال، سه اتریبیوت داریم:
- src: مسیر فایل ویدئویی را مشخص می‌کند.
- controls: کنترل‌های پیش‌فرض مرورگر را برای مدیریت پخش ویدئو نمایش می‌دهد.
- width: عرض ناحیه نمایش ویدئو را برحسب پیکسل CSS مشخص می‌کند. در این مثال، مقدار آن ۶۴۰ است.
اگر فایل در مسیر تعیین‌شده وجود داشته باشد و فرمت و کدک آن توسط مرورگر پشتیبانی شود، با بازکردن صفحه یک پخش‌کننده ویدئویی مشاهده می‌کنید. این پخش‌کننده معمولاً امکاناتی مانند شروع و توقف پخش، جابه‌جایی در زمان ویدئو، تنظیم صدا و نمایش تمام‌صفحه را در اختیار کاربر قرار می‌دهد.
مانند تگ audio، عنصر video نیز دارای تگ آغازین و پایانی است. همچنین controls یک اتریبیوت Boolean محسوب می‌شود و برای فعال‌کردن آن، نوشتن نام اتریبیوت کافی است.
در این مثال فقط عرض ویدئو را مشخص کردیم تا مرورگر بتواند نسبت ابعاد اصلی آن را هنگام تعیین ارتفاع در نظر بگیرد. برای نمایش مناسب ویدئو در صفحه‌های کوچک‌تر نیز می‌توان از CSS استفاده کرد؛ زیرا مقدار ثابت width به‌تنهایی طراحی واکنش‌گرا ایجاد نمی‌کند.
تصویر پیش‌نمایش و منابع جایگزین ویدئو
گاهی می‌خواهیم پیش از شروع پخش، تصویری مشخص روی پخش‌کننده نمایش داده شود. برای این کار از اتریبیوت poster استفاده می‌کنیم.
تصویر معرفی‌شده در poster نقش پیش‌نمایش ویدئو را دارد و معمولاً تا زمانی که پخش آغاز نشده است، در ناحیه نمایش ویدئو دیده می‌شود. این قابلیت زمانی مفید است که می‌خواهیم کاربر قبل از پخش، موضوع ویدئو را تشخیص دهد.
فرض کنید دو نسخه از یک ویدئو با نام‌های intro.webm و intro.mp4 در پوشه media/video داریم. همچنین تصویر پیش‌نمایشی به نام video-cover.jpg را داخل پوشه media/images قرار داده‌ایم.
کد زیر این فایل‌ها را به مرورگر معرفی می‌کند:
<video
controls
width="640"
poster="media/images/video-cover.jpg"
preload="metadata"
>
<source src="media/video/intro.webm" type="video/webm">
<source src="media/video/intro.mp4" type="video/mp4">
<p>
مرورگر شما از عنصر ویدئو در HTML پشتیبانی نمی‌کند.
<a href="media/video/intro.mp4">دریافت فایل ویدئو</a>
</p>
</video>
در این مثال، علاوه بر controls و width، چند ویژگی دیگر نیز استفاده کرده‌ایم:
- poster: آدرس تصویری را مشخص می‌کند که پیش از شروع پخش، به‌عنوان پیش‌نمایش ویدئو استفاده می‌شود.
- preload=”metadata”: به مرورگر پیشنهاد می‌کند پیش از شروع پخش، اطلاعات اولیه ویدئو مانند مدت‌زمان و ابعاد آن را دریافت کند. این مقدار یک راهنماست و مرورگر الزاماً دقیقاً مطابق آن عمل نمی‌کند.
- source: منابع جایگزین ویدئو را معرفی می‌کند.
- type: نوع رسانه هر منبع را مشخص می‌کند تا مرورگر بتواند درباره امکان پشتیبانی از آن تصمیم بگیرد.
مرورگر منابع معرفی‌شده را به‌ترتیب بررسی می‌کند و تلاش می‌کند منبع مناسبی را برای پخش انتخاب کند. برای مثال، اگر نتواند از نسخه WebM استفاده کند، می‌تواند نسخه MP4 را بررسی کند.
البته پسوند فایل به‌تنهایی پخش موفق را تضمین نمی‌کند؛ کدک‌های صوتی و تصویری به‌کاررفته در فایل نیز باید با قابلیت‌های مرورگر سازگار باشند. همچنین اگر منبعی انتخاب شود ولی هنگام بارگذاری یا پخش آن خطایی رخ دهد، مرورگر الزاماً به منبع بعدی تغییر نمی‌کند.
متن و لینک داخل video نیز محتوای جایگزین برای مرورگرهایی هستند که خود عنصر video را پشتیبانی نمی‌کنند؛ این محتوا پیام خطای عمومی برای تمام مشکلات پخش نیست.
در استفاده عملی، نیازی نیست همیشه چند نسخه از ویدئو داشته باشیم. اگر فقط یک فایل سازگار با محیط موردنظر داریم، همان روش ساده با src کافی است. استفاده از source زمانی ارزش دارد که منابع جایگزین واقعی و قابل استفاده آماده کرده باشیم.
محدودیت‌های پخش خودکار با autoplay
اتریبیوت autoplay برای درخواست شروع خودکار پخش ویدئو استفاده می‌شود؛ اما وجود آن به این معنا نیست که ویدئو حتماً بدون دخالت کاربر پخش خواهد شد.
مرورگرهای امروزی معمولاً برای جلوگیری از پخش ناخواسته صدا، محدودیت‌هایی روی پخش خودکار رسانه‌ها اعمال می‌کنند. به همین دلیل، ویدئویی که صدای فعال دارد ممکن است تا پیش از تعامل کاربر با صفحه اجازه پخش خودکار نداشته باشد.
اگر در شرایط مشخصی به پخش خودکار ویدئوی بی‌صدا نیاز داشته باشیم، می‌توانیم از ترکیب زیر استفاده کنیم:
<video
src="media/video/intro.mp4"
autoplay
muted
playsinline
controls
></video>
در این مثال:
- autoplay: از مرورگر می‌خواهد در صورت مجازبودن، پخش را خودکار آغاز کند.
- muted: صدای ویدئو را در ابتدا قطع می‌کند.
- playsinline: درخواست می‌کند ویدئو در همان ناحیه صفحه پخش شود، نه اینکه در محیط‌هایی مانند برخی دستگاه‌های موبایل الزاماً وارد پخش تمام‌صفحه شود.
- controls: امکان مدیریت پخش را در اختیار کاربر قرار می‌دهد.
ترکیب autoplay، muted و playsinline می‌تواند امکان پخش خودکار را در محیط‌های بیشتری فراهم کند، اما همچنان تضمینی برای شروع خودکار در تمام مرورگرها و دستگاه‌ها نیست. تنظیمات کاربر و سیاست‌های مرورگر نیز بر این رفتار تأثیر دارند.
برای ویدئوهای آموزشی، بهتر است شروع پخش را به انتخاب کاربر واگذار کنیم. این کار از پخش ناخواسته محتوا جلوگیری می‌کند و به کاربر اجازه می‌دهد زمان مناسب مشاهده ویدئو را خودش تعیین کند.
در بیشتر چنین مواردی، استفاده از controls بدون autoplay انتخاب ساده‌تر و مناسب‌تری است. اگر هم از پخش خودکار برای ویدئوهای تزئینی یا تکرارشونده استفاده می‌کنیم، باید تأثیر حرکت مداوم بر تجربه کاربر و امکان توقف آن را در نظر بگیریم.
برای بررسی نتیجه تمرین، صفحه index.html را در مرورگر باز کنید و مطمئن شوید پخش‌کننده نمایش داده می‌شود. سپس پخش را آغاز کنید و تصویر و صدای ویدئو را بررسی کنید. اگر از poster استفاده کرده‌اید، پیش از شروع پخش نیز تصویر پیش‌نمایش را کنترل کنید.
اگر پخش‌کننده دیده می‌شود اما ویدئو اجرا نمی‌شود، ابتدا مسیر فایل، سپس وجود و سالم‌بودن آن و در نهایت سازگاری فرمت و کدک را بررسی کنید. صرف نمایش کنترل‌های پخش به معنی درست‌بودن منبع ویدئو نیست.
چگونه برای ویدئو زیرنویس اضافه کنیم؟
برای اضافه‌کردن زیرنویس به ویدئو در HTML از تگ track استفاده می‌کنیم. این تگ به ما اجازه می‌دهد فایل زیرنویس را به عنصر video متصل کنیم تا متن‌های مربوط به گفتار، در زمان مناسب و هماهنگ با پخش ویدئو نمایش داده شوند.
مزیت این روش آن است که زیرنویس بخشی از تصویر ویدئو نمی‌شود؛ بلکه به‌صورت یک مسیر متنی جداگانه در اختیار پخش‌کننده قرار می‌گیرد و کاربر می‌تواند بسته به امکانات مرورگر، آن را فعال یا غیرفعال کند.
ساختار فایل زیرنویس VTT
فایل WebVTT یک فایل متنی ساده است که متن زیرنویس و زمان نمایش هر بخش را در خود نگه می‌دارد.
برای مثال، فرض کنید می‌خواهیم برای فایل intro.mp4 که در بخش قبل استفاده کردیم، زیرنویس فارسی تهیه کنیم. ابتدا داخل پوشه media یک پوشه جدید با نام subtitles می‌سازیم و فایلی به نام intro-fa.vtt در آن قرار می‌دهیم.
مسیر فایل جدید به این شکل خواهد بود:
media/subtitles/intro-fa.vtt
سپس فایل را در ویرایشگر متن باز می‌کنیم و محتوای زیر را داخل آن می‌نویسیم:
WEBVTT
00:00:00.000 --> 00:00:03.000
به آموزش HTML خوش آمدید.
00:00:03.000 --> 00:00:06.000
در این ویدئو نحوه افزودن رسانه را می‌بینیم.
برای درک ساختار فایل، به این نکات توجه کنید:
- WEBVTT: مشخص می‌کند فایل از فرمت WebVTT استفاده می‌کند و باید در ابتدای آن قرار بگیرد.
- زمان شروع و پایان: تعیین می‌کند هر متن از چه زمانی تا چه زمانی نمایش داده شود. دو زمان با علامت –> از یکدیگر جدا می‌شوند.
- متن زیرنویس: در خط بعد از زمان‌بندی نوشته می‌شود و محتوایی است که هنگام پخش به کاربر نشان داده خواهد شد.
- خط خالی: بخش‌های مختلف زیرنویس را از یکدیگر جدا می‌کند.
در این قالب، زمان‌ها را می‌توان به‌شکل hh:mm:ss.mmm نوشت؛ یعنی ساعت، دقیقه، ثانیه و میلی‌ثانیه. برای ویدئوهای کوتاه، قالب mm:ss.mmm نیز معتبر است.
متن و زمان‌بندی مثال بالا فرضی هستند. هنگام تهیه زیرنویس واقعی، باید آن‌ها را با گفتار و زمان دقیق ویدئوی خودتان هماهنگ کنید. همچنین فایل را با پسوند .vtt و رمزگذاری UTF-8 ذخیره کنید تا نویسه‌های فارسی به‌درستی خوانده شوند.
اتصال track به ویدئو
پس از آماده‌کردن فایل زیرنویس، باید آن را به عنصر video متصل کنیم. برای این کار، تگ track را داخل عنصر video قرار می‌دهیم.
با استفاده از همان مسیرهای پروژه، کد به شکل زیر خواهد بود:
<video
src="media/video/intro.mp4"
controls
width="640"
>
<track
src="media/subtitles/intro-fa.vtt"
kind="subtitles"
srclang="fa"
label="فارسی"
default
>
</video>
اتریبیوت‌های استفاده‌شده در track وظایف زیر را دارند:
- src: مسیر فایل زیرنویس WebVTT را مشخص می‌کند.
- kind=”subtitles”: نوع مسیر متنی را زیرنویس تعیین می‌کند؛ برای مثال، متن گفتار یا ترجمه آن.
- srclang=”fa”: زبان محتوای زیرنویس را فارسی معرفی می‌کند.
- label=”فارسی”: عنوان قابل‌فهمی برای انتخاب زیرنویس در رابط پخش‌کننده مشخص می‌کند.
- default: این مسیر زیرنویس را به‌عنوان گزینه پیش‌فرض معرفی می‌کند، مگر اینکه ترجیحات کاربر یا مرورگر انتخاب دیگری را تعیین کنند.
تگ track مانند img و source از نوع عناصر بدون تگ پایانی است؛ بنابراین نیازی به نوشتن </track> نداریم.
هنگام پخش ویدئو، مرورگر می‌تواند متن‌های فایل VTT را براساس زمان‌بندی آن‌ها نمایش دهد. در بسیاری از پخش‌کننده‌ها نیز گزینه‌ای برای مدیریت زیرنویس وجود دارد که ممکن است با نمادی مانند CC مشخص شده باشد.
وجود اتریبیوت default به معنی تضمین نمایش خودکار زیرنویس در تمام مرورگرها نیست. اگر زیرنویس را مشاهده نکردید، ابتدا تنظیمات زیرنویس پخش‌کننده را بررسی کنید.
برای بررسی نتیجه تمرین، بهتر است پروژه را از طریق یک سرور توسعه محلی با آدرس HTTP باز کنید. بازکردن مستقیم فایل index.html با آدرس file:// ممکن است در برخی مرورگرها به‌دلیل محدودیت‌های امنیتی، مانع بارگذاری فایل VTT شود.
پس از بازکردن صفحه، ویدئو را پخش کنید و در صورت نیاز، زیرنویس فارسی را از کنترل‌های پخش‌کننده فعال کنید. اگر متن زیرنویس در زمان‌های مورد انتظار ظاهر نشد، مسیر فایل .vtt، ساختار زمان‌بندی، وجود خط‌های خالی و هماهنگی متن با ویدئو را بررسی کنید.
تمرین عملی: یک صفحه HTML چندرسانه‌ای بسازیم
هدف این تمرین، ساخت یک صفحه ساده با عنوان «گالری رسانه‌ای من» است که شامل یک تصویر با توضیح، یک پخش‌کننده صوتی و یک ویدئو با زیرنویس فارسی باشد. برای انجام آن به CSS یا جاوااسکریپت نیازی نداریم و تمام ساختار را با HTML ایجاد می‌کنیم.
فایل‌ها و کد یکپارچه پروژه
ابتدا فایل‌های پروژه را آماده می‌کنیم. از همان ساختار پوشه‌ای بخش اول استفاده می‌کنیم، با این تفاوت که فایل تصویر مخصوص موبایل، تصویر پیش‌نمایش ویدئو و زیرنویس فارسی را نیز به آن اضافه کرده‌ایم:
media-demo/
│
├── index.html
│
└── media/
├── images/
│ ├── photo.jpg
│ ├── photo-mobile.jpg
│ └── video-cover.jpg
│
├── audio/
│ └── intro.mp3
│
├── video/
│ └── intro.mp4
│
└── subtitles/
└── intro-fa.vtt
فایل photo.jpg تصویر اصلی ماست و photo-mobile.jpg نسخه‌ای از همان تصویر با کادربندی مناسب‌تر برای صفحه‌های کوچک است. فایل video-cover.jpg نیز به‌عنوان تصویر پیش‌نمایش ویدئو استفاده می‌شود.
برای فایل intro-fa.vtt می‌توانید از ساختاری که در بخش قبل یاد گرفتیم استفاده کنید؛ فقط متن و زمان‌بندی زیرنویس باید با گفتار واقعی ویدئوی انتخاب‌شده هماهنگ باشد.
این نام‌ها برای تمرین انتخاب شده‌اند. لازم است فایل‌های رسانه‌ای واقعی را در مسیرهای مشخص‌شده قرار دهید یا نام و مسیر آن‌ها را متناسب با فایل‌های خود تغییر دهید.
حالا فایل index.html را باز کنید و کد زیر را در آن قرار دهید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>گالری رسانه‌ای من</title>
</head>
<body>
<main>
<h1>گالری رسانه‌ای من</h1>
<section>
<h2>تصویر</h2>
<figure>
<picture>
<source
media="(max-width: 600px)"
data-lazy-srcset="media/images/photo-mobile.jpg"
>
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="کوهستان در کنار دریاچه"
data-lazy-src="http://media/images/photo.jpg" ><noscript><img decoding="async"
src="media/images/photo.jpg"
alt="کوهستان در کنار دریاچه"
></noscript>
</picture>
<figcaption>
نمایی از کوهستان در کنار دریاچه
</figcaption>
</figure>
</section>
<section>
<h2>فایل صوتی</h2>
<p>برای شنیدن توضیحات، فایل صوتی زیر را پخش کنید.</p>
<audio
src="media/audio/intro.mp3"
controls
>
<a href="media/audio/intro.mp3">
دریافت فایل صوتی
</a>
</audio>
</section>
<section>
<h2>ویدئوی آموزشی</h2>
<p>ویدئوی زیر را با زیرنویس فارسی مشاهده کنید.</p>
<video
controls
width="480"
poster="media/images/video-cover.jpg"
preload="metadata"
>
<source
src="media/video/intro.mp4"
type="video/mp4"
>
<track
src="media/subtitles/intro-fa.vtt"
kind="subtitles"
srclang="fa"
label="فارسی"
default
>
<p>
مرورگر شما از عنصر ویدئو پشتیبانی نمی‌کند.
<a href="media/video/intro.mp4">
دریافت فایل ویدئو
</a>
</p>
</video>
</section>
</main>
</body>
</html>
در این کد، هر بخش از صفحه وظیفه مشخصی دارد. ابتدا با picture و source امکان انتخاب تصویر مناسب برای عرض‌های مختلف را فراهم کرده‌ایم و با figure و figcaption تصویر را همراه با توضیح آن در یک گروه معنایی قرار داده‌ایم.
در بخش بعدی، عنصر audio یک پخش‌کننده صوتی با کنترل‌های پیش‌فرض مرورگر ایجاد می‌کند. سپس عنصر video فایل ویدئویی را با استفاده از source معرفی می‌کند و از طریق track، فایل زیرنویس فارسی را به آن متصل می‌سازد.
برای مرتب‌کردن محتوای صفحه نیز از یک عنصر main و چند عنصر section استفاده کرده‌ایم تا هر قسمت موضوع مشخصی داشته باشد. این عناصر فقط به سازمان‌دهی معنایی محتوا کمک می‌کنند و به‌تنهایی طراحی ظاهری خاصی ایجاد نمی‌کنند.
مشاهده نتیجه در مرورگر
پس از ذخیره فایل‌ها، پروژه را از طریق یک سرور توسعه محلی با آدرس HTTP باز کنید. این روش به‌ویژه برای بررسی زیرنویس مناسب است؛ زیرا بارگذاری فایل WebVTT هنگام بازکردن مستقیم سند با آدرس file:// ممکن است در برخی مرورگرها محدود شود.
اگر فایل‌های رسانه‌ای در مسیر درست قرار گرفته باشند و مرورگر از فرمت و کدک آن‌ها پشتیبانی کند، صفحه باید شامل قسمت‌های زیر باشد:
- بخش تصویر: تصویر کوهستان همراه با توضیح زیر آن نمایش داده می‌شود. اگر عرض محیط نمایش حداکثر ۶۰۰ پیکسل باشد، مرورگر منبع تصویری مخصوص صفحه کوچک را انتخاب می‌کند.
- بخش فایل صوتی: یک پخش‌کننده با کنترل‌های مدیریت صدا ظاهر می‌شود و کاربر می‌تواند فایل intro.mp3 را پخش کند.
- بخش ویدئو: تصویر پیش‌نمایش ویدئو، کنترل‌های پخش و امکان انتخاب زیرنویس فارسی در پخش‌کننده در دسترس قرار می‌گیرند؛ البته نمایش و فعال‌سازی زیرنویس به پشتیبانی، تنظیمات و ترجیحات مرورگر نیز بستگی دارد.
این موارد نتیجه مورد انتظار تمرین هستند، نه خروجی آزمایش‌شده روی فایل‌های پروژه شما.
ظاهر کنترل‌های صوت و ویدئو ممکن است در مرورگرهای مختلف متفاوت باشد. همچنین چون در این تمرین از CSS استفاده نکرده‌ایم، فاصله‌ها، اندازه‌ها و چیدمان ظاهری عناصر تا حد زیادی به سبک پیش‌فرض مرورگر وابسته است. برای نمونه، عرض ثابت ویدئو ممکن است در نمایشگرهای باریک مناسب نباشد؛ تنظیم نمایش واکنش‌گرا را می‌توان در مرحله طراحی با CSS انجام داد.
بررسی تکمیل تمرین
برای اطمینان از اینکه پروژه را درست ساخته‌اید، فقط به نمایش عنوان‌ها و کنترل‌های پخش اکتفا نکنید. لازم است عملکرد هر بخش را نیز بررسی کنید.
- تصویر را بررسی کنید: مطمئن شوید فایل تصویری نمایش داده می‌شود. سپس عرض پنجره مرورگر را به کمتر از ۶۰۰ پیکسل برسانید و بررسی کنید آیا نسخه مخصوص صفحه کوچک انتخاب می‌شود.
- پخش صوت را آزمایش کنید: دکمه پخش را بزنید و بررسی کنید فایل صوتی واقعاً اجرا می‌شود و می‌توانید آن را متوقف کنید.
- پخش ویدئو را بررسی کنید: ابتدا تصویر پیش‌نمایش را مشاهده کنید، سپس ویدئو را پخش کنید و از نمایش تصویر و صدای مورد انتظار مطمئن شوید.
- زیرنویس را فعال کنید: در صورت نیاز از تنظیمات پخش‌کننده، زیرنویس فارسی را انتخاب کنید و بررسی کنید متن‌ها در زمان درست نمایش داده می‌شوند.
- مسیر فایل‌ها را کنترل کنید: اگر رسانه‌ای بارگذاری نشد، نام فایل، پسوند و آدرس نوشته‌شده در کد HTML را با ساختار واقعی پروژه مقایسه کنید.
اگر تمام این بررسی‌ها موفق باشند، بخش عملی این تمرین را انجام داده‌اید و می‌توانید تصویر، صوت و ویدئو را در یک صفحه HTML به کار ببرید.
برای تمرین بیشتر، می‌توانید تصویر دیگری به صفحه اضافه کنید، متن جایگزین آن را متناسب با محتوایش بنویسید یا یک فایل صوتی جدید را جایگزین فایل فعلی کنید. هدف این است که بتوانید بدون وابستگی به نام فایل‌های مثال، مسیر رسانه‌های خودتان را مشخص کنید.
چرا تصویر، صوت یا ویدئو در HTML نمایش داده نمی‌شود؟
گاهی پس از اضافه‌کردن تصویر، صوت یا ویدئو به صفحه HTML، نتیجه‌ای که انتظار داریم نمایش داده نمی‌شود. ممکن است به‌جای تصویر یک نماد خطا ببینیم، پخش‌کننده صوتی ظاهر شود اما صدا پخش نشود یا ویدئو و زیرنویس آن به‌درستی کار نکنند.
این مشکلات می‌توانند دلایل مختلفی داشته باشند؛ از اشتباه در مسیر فایل گرفته تا پشتیبانی‌نشدن فرمت رسانه در مرورگر. برای برطرف‌کردن آن‌ها، بهتر است به‌جای تغییر تصادفی کدها، ابتدا نشانه مشکل را شناسایی کنیم و سپس با چند بررسی ساده، علت احتمالی را محدود کنیم.
نشانه مشکل را دقیق تشخیص دهیم
جدول زیر چند نشانه و بررسی اولیه مرتبط با آن‌ها را نشان می‌دهد:
| نشانه مشکل | بررسی اولیه |
|---|---|
| تصویر نمایش داده نمی‌شود یا نماد تصویر خراب دیده می‌شود. | مسیر src یا srcset، وجود فایل و فرمت تصویر را بررسی کنید. |
| پخش‌کننده صوتی نمایش داده می‌شود اما صدا اجرا نمی‌شود. | بارگذاری فایل، فرمت و کدک صوتی و تنظیمات صدا را بررسی کنید. |
| ویدئو نمایش داده نمی‌شود یا پخش آن آغاز نمی‌شود. | آدرس فایل، قابلیت پخش فرمت و کدک و محدودیت‌های پخش خودکار را بررسی کنید. |
| تصویر یا ویدئو نمایش داده می‌شود، اما زیرنویس دیده نمی‌شود. | مسیر فایل VTT، ساختار زمان‌بندی و تنظیمات زیرنویس پخش‌کننده را بررسی کنید. |
این موارد تشخیص قطعی نیستند؛ فقط مشخص می‌کنند بررسی را از کجا آغاز کنیم. برای مثال، اگر کنترل‌های ویدئو نمایش داده می‌شوند، هنوز نمی‌توان نتیجه گرفت که مرورگر فایل ویدئویی را با موفقیت دریافت کرده یا قادر به رمزگشایی آن است.
بررسی‌های لازم: از مسیر فایل تا مرورگر
۱. مسیر و نام فایل را بررسی کنید.
فرض کنید در پروژه قبلی، تصویر با مسیر زیر معرفی شده است:
<img decoding="async"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
alt="کوهستان در کنار دریاچه"
data-lazy-src="http://media/images/photo.jpg"
><noscript><img decoding="async"
src="media/images/photo.jpg"
alt="کوهستان در کنار دریاچه"
></noscript>
برای بررسی این مسیر، مطمئن شوید پوشه media کنار فایل index.html قرار دارد، پوشه images داخل آن ساخته شده و فایلی با نام دقیق photo.jpg در آن موجود است.
به تفاوت حروف بزرگ و کوچک نیز توجه کنید. برای مثال، نام‌های Photo.jpg و photo.jpg در برخی سیستم‌ها به دو فایل متفاوت اشاره می‌کنند. اگر مسیر را اصلاح کردید، صفحه را دوباره بارگذاری کنید و نتیجه را ببینید.
اگر از picture استفاده می‌کنید، فقط src عنصر img را بررسی نکنید؛ ممکن است مرورگر براساس شرط media، فایلی را انتخاب کرده باشد که در srcset یکی از عناصر source معرفی شده است.
۲. بررسی کنید مرورگر فایل را دریافت می‌کند یا نه.
اگر نام و مسیر فایل درست به نظر می‌رسند اما رسانه همچنان بارگذاری نمی‌شود، می‌توانید از ابزار توسعه‌دهندگان مرورگر (DevTools) کمک بگیرید.
در مرورگری مانند Chrome، ابزار DevTools را باز کنید، به زبانه Network بروید و صفحه را دوباره بارگذاری کنید. سپس درخواست مربوط به فایل رسانه‌ای را پیدا کنید.
در ستون Status معمولاً کدهای وضعیت HTTP مانند 200 و 404 را بررسی می‌کنیم. خطاهای مربوط به CORS را می‌توان در Console یا بخش Issues مرورگر نیز پیگیری کرد:
- وضعیت 404 نشان می‌دهد سرور منبع درخواست‌شده را در آن آدرس پیدا نکرده است. در این حالت، مسیر فایل و محل قرارگیری آن را بررسی کنید.
- وضعیت 200 به معنی پاسخ موفق HTTP است، اما به‌تنهایی تضمین نمی‌کند محتوای دریافت‌شده یک فایل رسانه‌ای سالم و قابل پخش باشد.
- اگر پیام CORS دریافت کردید، مبدأ درخواست، آدرس منبع و تنظیمات مرتبط سرور را بررسی کنید؛ CORS یک کد وضعیت HTTP نیست و صرفاً از روی ستون Status نمی‌توان آن را تشخیص داد.
در صورت نیاز، زبانه Console را نیز بررسی کنید تا پیام‌های مرتبط با بارگذاری یا پخش رسانه را ببینید. توجه داشته باشید که متن خطاها در مرورگرهای مختلف ممکن است متفاوت باشد.
۳. فرمت و قابلیت پخش فایل را بررسی کنید.
اگر تصویر دریافت می‌شود اما نمایش داده نمی‌شود، نوع و سلامت فایل را بررسی کنید. اگر صوت یا ویدئو دریافت می‌شود ولی پخش نمی‌شود، ناسازگاری فرمت یا کدک با مرورگر یکی از فرضیه‌های قابل بررسی است.
برای مثال، پسوند .mp4 به‌تنهایی مشخص نمی‌کند ویدئو حتماً قابل پخش است؛ زیرا فایل‌های MP4 می‌توانند از کدک‌های متفاوتی استفاده کنند.
برای بررسی این احتمال، فایل را در یک پخش‌کننده مناسب باز کنید و مشخصات فرمت و کدک آن را بررسی کنید. سپس پشتیبانی مرورگر موردنظر از آن ترکیب را کنترل کنید. اگر ناسازگاری مشخص شد، می‌توانید نسخه‌ای با فرمت و کدک مناسب تهیه کنید.
اگر ویدئو فقط به‌صورت خودکار پخش نمی‌شود، ابتدا با دکمه پخش آن را به‌صورت دستی اجرا کنید. پخش موفق پس از تعامل کاربر می‌تواند نشان دهد که باید محدودیت‌های autoplay را بررسی کنید، نه اینکه فوراً فایل ویدئویی را خراب فرض کنید.
۴. فایل و تنظیمات زیرنویس را کنترل کنید.
اگر ویدئو پخش می‌شود اما زیرنویس فارسی دیده نمی‌شود، ابتدا مطمئن شوید فایل intro-fa.vtt در مسیر media/subtitles قرار دارد و مقدار src در تگ track به همان فایل اشاره می‌کند.
سپس بررسی کنید که فایل با عبارت WEBVTT شروع شده باشد، زمان‌بندی‌ها قالب معتبر داشته باشند و متن زیرنویس در بازه زمانی مربوط به ویدئو قرار گرفته باشد.
اگر صفحه را مستقیماً با آدرس file:// باز کرده‌اید، آن را از طریق یک سرور توسعه محلی با آدرس HTTP اجرا کنید؛ زیرا محدودیت‌های امنیتی مرورگر می‌توانند بر بارگذاری فایل زیرنویس اثر بگذارند.
در پایان، کنترل‌های پخش‌کننده را بررسی کنید تا مطمئن شوید مسیر زیرنویس فارسی انتخاب و فعال شده است. وجود default در تگ track تضمین نمی‌کند که زیرنویس در تمام مرورگرها به‌صورت خودکار نمایش داده شود.
اقدام اصلاحی و اطمینان از رفع مشکل
بعد از اینکه بررسی‌ها به یک مشکل مشخص اشاره کردند، فقط همان قسمت را اصلاح کنید. برای مثال، اگر مشخص شد مسیر تصویر اشتباه است، ابتدا آدرس فایل را درست کنید و پیش از تغییر اتریبیوت‌های دیگر، صفحه را دوباره بررسی کنید.
اگر فایل رسانه‌ای ناسازگار است، نسخه مناسب‌تری از همان محتوا تهیه کنید. اگر زیرنویس بارگذاری می‌شود اما متن آن در زمان صحیح ظاهر نمی‌شود، زمان‌بندی فایل VTT را با ویدئو هماهنگ کنید.
بهتر است هر بار فقط یک تغییر اصلی انجام دهید تا بتوانید اثر آن را تشخیص دهید. پس از اصلاح، همان عملی را که قبلاً با مشکل روبه‌رو بود تکرار کنید و مطمئن شوید رسانه اکنون مطابق انتظار نمایش داده یا پخش می‌شود.
همچنین بررسی کنید که تغییر انجام‌شده بخش‌های دیگر صفحه را دچار مشکل نکرده باشد؛ مثلاً اصلاح منبع تصویر دسکتاپ نباید باعث خراب‌شدن تصویر مخصوص موبایل شود.
اگر مشکل همچنان باقی بود، پیام خطای دقیق، آدرس درخواست، وضعیت پاسخ و مرورگری را که در آن مشکل رخ می‌دهد بررسی کنید. تا زمانی که شواهد کافی در اختیار نداریم، نباید یک مورد احتمالی را علت قطعی خطا بدانیم.
جمع‌بندی
برای کار با تصاویر و چندرسانه‌ای در HTML، فقط نوشتن تگ مناسب کافی نیست؛ باید فایل رسانه‌ای را از مسیر صحیح معرفی کنیم، عنصر مناسب را براساس کاربرد آن انتخاب کنیم و در نهایت مطمئن شویم محتوا در مرورگر به‌درستی نمایش داده یا پخش می‌شود.
حالا می‌توانید با استفاده از آموخته‌های این مقاله، صفحه «گالری رسانه‌ای من» را با فایل‌های واقعی خودتان بسازید و عملکرد تصویر، صوت، ویدئو و زیرنویس را بررسی کنید. هنگام بروز مشکل نیز به‌جای تغییر تصادفی کدها، مسیر فایل، سازگاری رسانه و تنظیمات پخش را به‌ترتیب کنترل کنید.
اگر می‌خواهید پس از این تمرین، یادگیری HTML را در موضوعات دیگر نیز ادامه دهید، می‌توانید دوره مستر HTML را به‌عنوان یکی از مسیرهای بعدی بررسی کنید.
هنوز دیدگاهی ثبت نشده است.