تگ video در HTML5 از تگ های HTML

تگ video در HTML5 چیست؟

در ابتدا باید به این پرسش پاسخ دهیم که «تگ ویدیو در HTML چیست؟». به زبان ساده المان ویدیو در HTML به مجموعه کدی اشاره دارد که قابلیت پخش ویدیو در وب را برای شما فراهم می‌کند. این کار به کمک تگ video، شاخصه‌های آن و خود محتوا یا فایل ویدیویی امکان‌پذیر می‌شود. درواقع به کمک این تگ، ساختار ویدیو و عملکرد آن به صفحه وب‌سایت معرفی می‌گردد. این تگ از فرمت‌های ویدیویی مختلفی پشتیبانی می‌کند. همچنین شاخصه‌هایی برای سفارشی‌سازی بیشتر و یا مسائل مرتبط با طراحی بهتر دارد که می‌توانید از آن‌ها استفاده کنید.

تگ های رسانه‌ای در HTML کدم‌اند؟

اکنون‌ که در خصوص تگ video در HTML5 صحبت می‌کنیم، بد نیست اشاره‌ای هم به این موضوع داشته باشیم که در ساختار HTML تگ های مختلفی وجود دارند. برخی از این تگ های HTML برای کنترل و ارائه فایل‌های رسانه‌ای¹media استفاده می‌شوند. به‌صورت کلی از معروف‌ترین آن‌ها، تگ های video و audio هستند که در کد زیر مثالی برای هرکدام ارائه ‌شده است.

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

در مورد تگ audio قبلاً در مقاله «تگ Audio در HTML: اضافه‌ کردن صوت به سایت» صحبت کرده‌ایم. در این مقاله قصد داریم به معرفی بیشتر تگ ویدیو در HTML بپردازیم.

نحوه استفاده تگ ویدیو در HTML

افرادی که با زبان HTML آشنا هستند، می‌دانند که محتوای هر یک از صفحات سایت در داخل تگ body در ساختار HTML ارائه می‌شود. برای استفاده تگ video در HTML5 نیز همین قاعده صادق است. در مثال بخش قبلی مقاله نیز تا حدودی با ساختار این المان در اچ تی ام ال آشنا شدید. در اینجا نیز مثال دیگری ذکر می‌کنیم.

<video width="1920" height="1080">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

برای درک بهتر اجرای این کد، به توضیح بخش‌های مهم آن می‌پردازیم.

• برای شروع با استفاده از عبارت <video> کد خود را آغاز کرده و در پایان تگ نیز از عبارت <video/> استفاده کنید. به‌این‌ترتیب آغاز و پایان تگ video را برای مرورگر مشخص می‌کنید.
• در صورتی ‌که طول و عرض ویدیو خود را می‌دانید، با استفاده از شاخصه‌های width و height می‌توانید مقدار آن‌ها را مشخص کنید.
• به کمک ساختار و تگ source و شاخصه src آن می‌توانید محل فایل ویدیویی خود و فرمت آن را معین کنید. استفاده از چندین فرمت برای هماهنگی بیشتر و بهتر با مرورگرهای مختلف²cross-browser compatibility مفید است. زیرا تمامی مرورگرها یکسان عمل نمی‌کنند.
• بعد از معرفی منبع فایل، می‌توانید ازجمله یا عبارتی به شکل Your browser does not support the video tag استفاده کنید. این جمله زمانی به کاربر نشان داده می‌شود که سیستم یا مرورگر وی نتواند ویدیوی سایت را به‌ خوبی نمایش دهد.

مشکلات احتمالی پخش ویدیو در وب

گر چه امروزه با پیشرفت‌های سخت‌افزاری و نرم‌افزاری معمولاً مشکلی برای پخش ویدیو در وب و مرورگرها به وجود نمی‌آید، اما در ادامه برخی از محدودیت‌هایی که ممکن است بر روی پخش فایل ویدیویی شما اثرگذار باشد، توضیح می‌دهیم.

مشکل در هماهنگی با مرورگرهای مختلف

تیم های توسعه‌دهنده مختلفی در ساختن مرورگرهای گوناگون سهیم هستند. مسلماً همه آن‌ها نگاه یکسانی نسبت به مسئله پخش ویدیو در وب ندارند. یعنی هر مرورگری ممکن است از فرمت‌ها یا کدک های³codecs خاصی بهتر پشتیبانی کند. درنتیجه اگر مرورگر موردنظر از فرمت خاصی که شما برای فایل ویدیویی خود در تگ video در HTML5 در نظر گرفته‌اید، پشتیبانی نکند، ممکن است در پخش ویدیو مشکلاتی به وجود آید.

مشکلات در پخش بهینه

ممکن است ویدیوی شما از رزرولوش بالایی برخوردار باشد. درنتیجه با توجه به پهنای باند و سرعت اینترنت برخی کاربران و بسته به مرورگر مورداستفاده، در عملکرد پخش ویدیو اختلالاتی ایجاد شود. یعنی ویدیو مثلاً قطع شود یا با کیفیت مناسبی پخش نشود. اگر شما چنین مشکلاتی در پخش ویدیوی خود دارید، پیشنهاد می‌کنیم در مورد موضوع Adaptive bitrate streaming بیشتر مطالعه کنید.

مسائل مربوط به محافظت از محتوا

در صورتی‌ که محتوای ویدیویی شما نیاز به محافظت دارد و درواقع به‌ نوعی محتوای لایسنس دار است و نمی‌خواهید به‌صورت رایگان و عمومی به نمایش درآید، معمولاً نیاز خواهید داشت که از پخش‌کننده‌های ویدیویی مجهز به DRM⁴Digital Rights Management استفاده کنید چنین قابلیت‌هایی به‌ صورت پیش‌فرض در HTML5 قرار داده نشده‌اند.

رابط کاربری غیر یکسان

یکی دیگر از مشکلات استفاده از تگ ویدیو در HTML مربوط به رابط کاربری و نحوه نمایش ویدیو است. این مسئله نیز ناشی از تفاوت در مرورگرهای مختلف است. لذا ممکن است کاربران سایت شما به شکل‌های مختلفی با ویدیوهای آپلود شده در سایتتان مواجه شوند که شاید مسئله چندان خوشایندی نباشد.

فرمت‌های ویدیویی برای HTML5

همان‌طور که در کدهای بخش‌های قبلی مشاهده کردید، شما در هنگام استفاده از تگ ویدیو در HTML به کمک گزینه source می‌توانید فرمت فایل ویدیویی را مشخص کنید. به ‌وسیله تگ video در HTML5 به‌ صورت خودکار امکان پخش ویدیو در وب فراهم ‌شده است.

در حالیکه در نسخه‌های قدیمی‌تر HTML، شما به افزونه‌های خارجی مانند Flash نیاز داشتید. برای آنکه مطمئن شوید کاربران سایت به‌خوبی می‌توانند ویدیوهای شمارا تماشا کنند، بهتر است از فرمت‌های مختلفی در کد خود استفاده کنید. چون ممکن است برخی مرورگرها با برخی فرمت‌های ویدیویی در HTML5 نیز مشکل داشته باشند. نمونه‌ای از این مسئله را در کد زیر مشاهده می‌کنید.

<video width="1920" height="1080">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

به‌ طور کلی فرمت‌های ویدیویی رایج که توسط اغلب مرورگرها پشتیبانی می‌شوند، عبارت‌اند از: فرمت MP4، فرمت WebM و فرمت Ogg. شاید بتوان گفت که رایج‌تر از همه، همان فرمت MP4 است. فرمت Ogg نیز توسط مرورگرهای مهمی مانند فایرفاکس، کروم و اپرا پشتیبانی می‌شود.

در تصویر زیر نحوه پشتیبانی مرورگرهای مختلف در خصوص فرمت WebM که فرمت جدیدتری است، نمایش داده‌ شده است.

شاخصه‌های تگ video در HTML5

شاخصه‌ها در ساختار HTML کاربردهای متنوعی درزمینه نحوه نمایش و رفتار المان‌ها دارند. تگ ویدیو در HTML نیز از شاخصه‌های مختلفی استفاده می‌کند. استفاده مناسب از آن‌ها بر تجربه کاربری خوب در سایت شما تأثیر مناسب می‌گذارد. در ادامه به توضیح مختصری در مورد برخی از این شاخصه‌ها می‌پردازیم.

شاخصه عرض⁵width و ارتفاع⁶height

این دو شاخصه ابعاد ویدیو را نشان می‌دهند. برای استفاده از آن‌ها به شکلی که در مثال زیر نشان داده‌شده، اقدام کنید.

<video src="movie.mp4" width="1920" height="1080"></video>

شاخصه controls

این شاخصه برای نمایش کنترل‌های ویدیو مانند دکمه پخش، دکمه توقف و … به کار می‌رود. در صورتی ‌که استفاده نشود، این کنترل‌ها برای کاربر نشان داده نمی‌شوند.

<video src="movie.mp4" controls></video>

شاخصه src

در مثال‌های قبلی مشاهده کردید که شاخصه src درون تگ source به چه صورت استفاده شد. این شاخصه برای مشخص کردن محل فایل ویدیویی به کار می‌رود. علاوه بر تگ source، می‌توانید در خود تگ video نیز از این شاخصه استفاده کنید. اما با این کار تنها می‌توان یک نوع فرمت را در تگ video استفاده کرد.

<video src="movie.mp4"></video>

شاخصه loop

این شاخصه باعث چرخش پخش ویدیو می‌شود. یعنی اگر از آن به شکل زیر در تگ ویدیو در HTML استفاده کنید، بعد از آنکه ویدیوی شما تمام شد، دوباره از ابتدا آغاز می‌شود.

<video src="movie.mp4" loop></video>

شاخصه muted

این شاخصه باعث می‌شود که صدای ویدیوی شما به‌ صورت پیش‌فرض قطع باشد. نحوه استفاده از آن به شکل زیر است.

<video src="movie.mp4" autoplay muted></video>

شاخصه autoplay

این شاخصه باعث می‌شود که ویدیوی شما به‌ صورت خودکار در هنگام بارگذاری صفحه پخش شود. یعنی منتظر کاربر نماند تا دکمه پخش را بزند. البته ممکن است در تمامی مرورگرها به ‌درستی عمل نکند.

<video src="movie.mp4" autoplay></video>

جمع‌بندی

در این مقاله به بررسی تگ video در HTML5 پرداختیم. در ساختار HTML تگ های مختلفی وجود دارند که هر یک کاربرد خاص خودشان رادارند. تگ ویدیو نیز برای بارگذاری و نمایش و اجرای فایل‌های ویدیویی در وب‌سایت‌ها استفاده می‌شود. در مورد مشکلات پخش ویدیو در وب و فرمت‌های ویدیویی رایج نیز صحبت کردیم. در پایان نیز اشاره‌ای به برخی شاخصه‌های مهم تگ ویدیو در HTML داشتیم.

پاورقی:

• 1
  media
• 2
  cross-browser compatibility
• 3
  codecs
• 4
  Digital Rights Management
• 5
  width
• 6
  height