آموزش جامع تگ ویدئو

تگ گذاشتن فیلم در HTML

علاوه بر تصاویر ، HTML از نمایش فیلم‌ها نیز پشتیبانی می‌کند. تگ گذاشتن فیلم در html، تگ video است. مانند تگ img ، تگ video به یک ویژگی src با مقدار منبع ویدیو نیاز دارد. با این حال برخلاف تگ img ، تگ video به یک تگ باز و بسته شونده نیاز دارد. به مثال زیر توجه کنید. برای نمایش ویدئو می‌بایست این‌گونه عمل کنیم. در ادامه به بررسی هر عبارت در قطعه کد زیر می‌پردازیم.

<video src="myVideo.mp4" width="320" height="240" controls>
    Video not supported
</video>

در این مثال ، منبع یا «source» ویدئو ما myVideo.mp4 است . منبع می‌تواند یک فایل ویدئویی باشد که در صفحه وب شما قرار دارد یا Url فایل ویدئویی که در جایی آپلود شده است.

ویژگی‌های مورد استفاده در تگ ویدئو چیست؟

• ویژگی Width
• ویژگی Height
• ویژگی Controls
• ویژگی poster
• ویژگی autoplay
• ویژگی loop
• ویژگی muted
• ویژگی preload

از ویژگی Width برای تنظیم عرض ویدئو در مرورگر استفاده می‌شود. واحد مقدار نوشته شده به‌عنوان value برای این ویژگی «پیکسل» است.

از ویژگی Height برای تنظیم ارتفاع ویدئو در مرورگر استفاده می‌شود. واحد مقدار نوشته شده به‌عنوان value برای این ویژگی «پیکسل» است.

در مورد ویژگی Controls باید گفت که همه ما وقتی فیلمی در کامپیوتر باز می‌کنیم، توسط نرم‌افزار یک سری دکمه برای ما در نظر گرفته شده است که به‌وسیله آن‌ها می‌توانیم فیلم را متوقف کنیم یا اینکه بخواهیم آن فیلم را از ابتدا شروع کنیم.با نوشتن ویژگی Controls در تگ شروع تگ Video این کنترل‌ها به کاربری که می‌خواهد فیلم را ببیند داده می‌شود.

با افزودن ویژگی loop به تگ ویدئو در Html وقتی ویدئو به انتهایش رسید، پخش کننده ویدئو خود به خود و به صورت اتوماتیک به ابتدای فیلم بر میگردد و فیلم از ابتدا آغاز می شود.

با افزودن ویژگی muted به ویدئو فیلم شما در پخش کننده ویدئو به صورت کاملا بی صدا پخش می شود. توجه داشته باشید که خود فیلم شما تغییری نخواهد کرد و فقط در پخش کننده ویدئو به صورت بی صدا پخش خواهد شد.

با افزودن ویژگی Controls دکمه‌های Volume، Play، Stop، Download، Full Screen و تصویر در تصویر به ویدئو اضافه می‌شوند. نوشتن این ویژگی نیاز به مقدار ندارد.

تصویری از نمایش یک ویدئو به‌وسیله تگ Video در HTML5 به همراه کنترل‌‌ها را مشاهده می‌کنید.

ویژگی Preload در تگ ویدئو

این ویژگی مشخص می کند که چه مقدار از ویدئو بعد از بارگذاری صفحه توسط مرورگر کاربر دانلود شود. در واقع توسط نویسنده سایت در نظر گرفته می شود که در چه حالتی بهترین تجربه کاربری را برای کاربر دارد. برای ویژگی preload چهر مقدار در نظر گرفته می شود.

• مقدار none در ویژگی preload
• مقدار metadata در ویژگی preload
• مقدار auto در ویژگی preload
• مقدار خالی (یک رشته خالی) در ویژگی preload

وقتی مقدار none برای preload در نظر گرفته شود هیچ قسمت از ویدئو قبل از کلیک شروع ویدئو توسط کاربر دانلود نمی شود. وقتی مقدار metadata برای preload در نظر گرفته شود فقط اطلاعات متای ویدئو مثل (طول ویدئو) بارگذاری می شود. در حالت auto که به نظر ما بدترین حالت است کل ویدئو بعد از بارگذاری صفحه توسط کاربر دانلود (download) می شود! اگر برای مقدار preload چیزی را در نظر نگیرید یا اصطلاخا یک رشته خالی قرار دهید رفتار نگ ویدئو مثل مقدار auto خواهد بود. به قطعه کد زیر دقت بفرمایید. هر چهار حالت بررسی شده است.

پیشنهاد ما استفاده از metadata preload است!

<video preload="auto" controls  src="./1.mp4"></video>
<video preload="metadata" controls src="./1.mp4"></video>
<video preload="none" controls src="./1.mp4"></video>
<video preload controls src="./1.mp4"></video>

نوشتن محتوای متنی در تگ ویدئو

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

<video width="320" height="240" controls src="https://example.com/video.mp4">
    این ویدئو در مرورگر شما پشتیبانی نمی‌شود
</video>

چگونه به‌محض باز شدن صفحه ویدئو پخش شود؟

برای این درخواست می‌توانید از ویژگی autoplay استفاده کنید. نوشتن این ویژگی نیاز به مقدار ندارد. به مثال زیر دقت کنید:

<video src="video.mkv"  width="720 " height="480"  autoplay>
    این ویدئو در مرورگر شما پشتیبانی نمی‌شود
</video>

نحوه نمایش تصویر آغازین در تگ ویدئو

شاید بخواهید برای فیلم موردنظر یک پوستر، بنر یا تصویر آغازین در نظر بگیرید برای این کار باید از ویژگی poster استفاده کنید.برای مقدار در ویژگی poster باید آدرس تصویر مورد نظر را بدهید. به‌عنوان مثال در اینجا نام تصویر ما image.jpeg است و در همین فولدر قرار دارد که فایل index.html در حال اجرا است. به نمونه کد زیر دقت کنید:

<video src="video.mkv"  width="720 " height="480" poster="image.jpeg">
    این ویدئو در مرورگر شما پشتیبانی نمی‌شود
</video>

خروجی به شکل زیر خواهد بود:

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

بعضی از مرورگرها از بعضی از فرمت‌ها پشتیبانی نمی‌کنند. اگر بخواهید یک ویدئو را با فرمت‌های مختلف مثل mp4 و ogg نمایش دهید می‌توانید از تگ source استفاده کنید. قبلاً در تگ picture این تگ را آموزش دادیم.  در تگ source می‌بایست از ویژگی type استفاده کنید تا به مرورگر اعلام کنیم چه نوع  فایلی با چه فرمتی در حال پخش خواهد بود. به مثال زیر توجه کنید:

<video width="320" height="240" autoplay>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    مرورگر شما ویدئو پشتیبانی نمی‌کند 
</video>

در این مثال مرورگری که از فایل با فرمت mp4 پشتیبانی می‌کند، ویدئو با فرمت mp4 نمایش داده می‌شود و  در مرورگر که از فرمت ogg پشتیبانی می‌کند، ویدئو با فرمت ogg نمایش داده می‌شود.

نحوه پشتیبانی مرورگرها از فرمت‌های ویدئویی چگونه است؟

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

نوع فرمت فایل‌ها برای ویدئو چگونه است؟

برای نوشتن نوع فرمت فایل‌ها در ویژگی type باید به شکل زیر عمل کنیم:

به این نوع عبارت‌ها «مثل video/mp4» اصطلاحاً mimeType گفته می‌شود. در واقع مرورگر به‌وسیله این عبارت متوجه می‌شود چه نوع فایلی را باید پردازش کند.

امیدوارم این مطلب مفید بوده باشد. اگر سؤال یا نظری دارید می‌توانید در قسمت نظرات مطرح کنید حتماً پاسخ می‌دهیم.