آموزش HTML5: تگ Video در HTML5 (قسمت دوازدهم)

آموزش قسمت دوازدهم آموزش HTML5

🎯سلامی به سادگی HTML5 و درودی به تازگی فیلم و صوت، تقدیم به شما همراهان هدفمند🎯

با دوازدهمین قسمت از آموزش HTML5 از سری ویدیوهای برنامه نویسی تحت وب در خدمت شما هستیم و این بار محل بحث ما آموزش تگ Video در HTML است.

تگ های Audio و Video که در HTML نسخه 5 معرفی شدند، انقلابی بزرگ در وب ایجاد نمودند و عملاً بسیاری از طراحان وب که پروژه های خود را با استاندارد HTML 4.0 طراحی می کردند، به سرعت، وب سایت هایشان را به نسخه HTML 5.0 ارتقا دادند.

در این آموزش به شما یاد می دهیم که چگونه می توان با دستان پرتوان خود💪، در وب سایت زشتی که با HTML ساخته ایم😓، هر نوع صوت و ویدئویی را منتشر نماییم.

🌟نگران ظاهر زشت وب سایت تان نباشید، در آینده با CSS3 و Boostrap4 آن را زیبا خواهیم نمود🌟

خب به رسم همیشه، مقدمه چینی را کنار می گذاریم و به سراغ اصلِ ماجرا می رویم. این شما و این هم:

👇👇👇 فیلم آموزشی تگ Video در HTML 👇👇👇

 

 

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

با استفاده از تگ <Video> قادر خواهیم بود، یک فایل ویدئویی دلخواه را در سایت خود قرار دهیم. اما تگ باز و بسته <Video> به تنهایی هیچ اتفاق مهمی را برای ما رقم نخواهد زد و نیاز است که حداقل Attribute هایی تحت عناوین Controls و Src در آن وجود داشته باشد.

خاصیت Src دقیقاً همان کاری را انجام می دهد که در قسمت های قبل در تگ <img> شاهد آن بودیم. در واقع آدرس فایلی که قصد نمایش آن را داریم، در این قسمت قرار داده می شود. خاصیت Control هم نیازی که هیچ مقداری ندارد و صرفاً با درج این کلمه، دکمه های پخش، کم و زیاد کردن صدا، قابلیت تمام صفحه و غیره را به صورت خودکار به ویدئو ما اضافه خواهد نمود. در تصویر زیر کاملاً مشخص است که این قطعات کوچک کد، چه کارهای بزرگی را برای ما انجام خواهند داد:

تغییر اندازه ویدئو در HTML5

خیلی وقت ها شاید لازم باشد که اندازه ویدئوهایی که در سایت قرار می دهیم را به صورت دلخواه، تنظیم نماییم. برای این کار می توان از خواص Width و Height در تگ Video در HTML استفاده نمود. همانطور که در تصویر زیر قابل مشاهده است، با بهره گیری از این دو خاصیت، ارتفاع 450px و عرض 650px را به کلیپ مورد نظر، اختصاص داده ایم.

آموزش خاصیت Preload تگ Video در HTML5

تگ Video در HTML یک خاصیت مهم دارد که اگر به درستی تنظیم نشود، می تواند ظاهر ویدئوها را زشت و بدمنظر سازد. صفت Preload تعیین می کند که قبل از پخش ویدئو، اولین ثانیه به صورت پوستر ابتدایی نمایش داده شود یا خیر. اگر مقدار آن برابر Auto باشد، به صورت اتوماتیک اولین تصویرِ ویدئو شما را به عنوان پوستر روی کلیپ شما قرار خواهد داد. اما اگر مقدار آن را برابر None قرار دهیم، مانند تصویر زیر هیچ چیز نمایش داده نخواهد شد و فقط رنگ پس زمینه به نمایش در خواهد آمد.

پخش خودکار ویدیو در HTML

دو Attribute دیگر تگ Video در HTML که در سایت های اشتراک ویدیو بسیار مورد استفاده قرار می گیرد، Autoplay و Loop هستند که در ادامه هر کدام را به طور خلاصه تعریف خواهیم نمود:

🔵Autoplay: این خاصیت تعیین می کند، پس از لود شدن صفحه سایت به صورت خودکار، ویدئو مورد نظر برای کاربر پخش شود و کاربر نیازی به فشردن دکمه Play ندارد.

🔵Loop: این ویژگی مشخص می کند، پس از اتمام ویدئو به شکل اتوماتیک، فیلم مورد نظر مجدداً پخش شود.

🎓در صورتی که از خاصیت Autoplay استفاده شود، خاصیت Preload عمل نخواهد کرد🎓

قرار دادن فرمت های مختلف ویدئو در HTML

مهمترین نکته ای که یک برنامه نویس باید همواره حواسش به آن باشد، Cross Browser بودن کدهای پروژه اش است. با استفاده از تگ <Source> می توان فرمت های مختلفی از ویدئوها را در وب سایت قرار داد تا به عنوان مثال اگر کاربران شما از مرورگر Internet Explorer استفاده کردند (خدا این روز رو نیاره😇)، بتوانند ویدئوهای شما را مشاهده نمایند. به طور کلی کدها باید طوری نوشته شود که تمامی مرورگرها از آن به درستی پشتیبانی کنند.

❓براستی بهترین فرمت ویدئو برای وب چیست؟ مرورگرها چه فرمتی را دوست دارند؟❓
💤(در ادامه مطلب به این سوالات پاسخ خواهیم داد)💤

قرار دادن عکس اول ویدئو (پوستر)در HTML

راستی شاید باورتان نشود اما شما با دستان پرتوان خود و خاصیت Poster قادر خواهید بود، یک پوستر دلخواه برای ویدئوهای خود قرار دهید. به این معنی که کاربر پیش از پخش ویدئو، تصویر زیبا و هدفمند شما را مشاهده نماید. بسیاری از وب سایت ها مانند آپارات و یوتیوب از این طریق تبلیغات خود را انجام داده و یا ناشرانِ ویدیو این فرصت را دارند تا با انتخاب یک پوستر فوقِ جذاب، بازدید کلیپ های خود را دوچندان نمایند.

داخل پرانتز شاید بد نباشد یک خاصیت دیگر را نیز خدمت شما معرفی نماییم. ویژگی Muted به شما این امکان را می دهد که پس از فشردن دکمه پخش ویدئو توسط کاربر، صدای ویدیو در حالت پیش فرض بسته باشد. از این Attribute نیز باتوجه به استراتژی و شناخت مخاطبان تان می توانید استفاده نمایید.

قرار دادن پوستر برای ویدیو در HTML5

آموزش درج زیرنویس برای فیلم ها در HTML5

اما اگر موافق باشید، یک کار هیجان انگیز و حرفه ای را با هم یاد بگیریم. تصور کنید یک وب سایت با موضوع پخش آنلاین فیلم های سینمایی دارید که اغلب فیلم هایی که در سایت خود منتشر می کنید، زبان اصلی هستند. در این صورت برای راحتی کاربران، نیاز است تا بخش زیرنویس را هم به فیلم های خود اضافه نمایید.

این کار در HTML5 با تگِ جادوییِ <Track> انجام خواهد شد. فقط کافیست مطابق با تصویر زیر، فایل زیر نویس را در خاصیت Src قرار دهید و از این پس فیلم های خود را با زیر نویس مشاهده نمایید.

پشتیبانی مرورگرها از فرمت های ویدیویی

تصویری که در زیر مشاهده می کنید، قسمتی از سایت غول پیکر W3Schools است که به ما نشان می دهد، کدام مرورگرها از چه فرمت های ویدیویی به طور کامل پشتیبانی می کنند.

نکته جالب توجه این است که تمامی مرورگرها از فرمت MP4 به درستی پشتیبانی می کنند و یکی از دلایلی که اغلب وبمستران، فرمت MP4 را برای وب توصیه می کنند، همین موضوع است.

تگ موسیقی در HTML

اگر شما یک وب سایت موسیقی (دانلود آهنگ)داشته باشید، حتماً به تگ <Audio> نیاز خواهید داشت. چراکه یکی از امکانات جذاب برای کاربران، امکان پخش آنلاین آهنگ ها است. بنابراین با ما همراه باشید تا به سادگیِ هر چه تمام تر نحوه به کارگیری این تگ را با هم فرا گیریم.

صرفاً کافیست تگ Audio را بنویسیم و آدرس فایل صوتی خود را درون خاصیت Src قرار دهیم. ضمناً تمامی خواصی که در بخش تگ Video در HTML با هم مورد بررسی قرار دادیم، برای تگ <Audio> نیز می توان استفاده نمود. تنها تفاوت آن، در خاصیت muted است که در تگ <Audio> باید مقدار muted را به خاصیت audio انتساب دهیم.

پشتیبانی مرورگرها از فرمت های مختلف Audio

در زیر می توان، نحوه پشتیبانی مرورگرها از فرمت های مختلف Audio را مشاهده نمود. همانطور که واضح است، فرمت MP3 مناسب ترین نوع برای فایل های صوتی است که بهتر است از آن جهت انتشار در وب استفاده شود.

جمع بندی مقاله تگ Video در HTML5 از نگاه محمدرضا یعقوبی

خب به پایان آمد این مطلب اما جالب اینجاست که حکایت همچنان باقیست. تگ های <Video> و <Audio> خاصیت های دیگری نیز دارند که در این مطلب صرفاً به مهمترینِ آن ها اشاره کردیم و در صورتی که قصد دارید به طور کامل با این خواص آشنا شوید می توانید به سایت W3Schools مراجعه نمایید.

این قسمت از آموزش HTML5 بخش یک مانده به آخریِ دوره HTML5 بود و در قسمت سیزدهم که هفته ی آتی تقدیم حضورتان خواهد شد، مباحث را جمع بندی خواهیم نمود و با انرژی سرشار شما عزیزان به سراغ CSS3 خواهیم رفت.

اگر تا کنون از ظاهر وب سایت خود، ناامید شده اید، هیچ جای نگرانی نیست. در ادامه این سایتِ ساده و کریه المنظر خود را خوشگل تر خواهیم ساخت.

شما را سپاس که تا انتهای این مطلب همراه ما بودید، ما را از نظرات انرژی بخش تان بی بهره نگذارید و اگر سوال یا ابهامی در ذهن مبارک تان ایجاد شده است، ما اینجاییم تا به شما کمک کنیم.

🔥خوش منظرترین روزها را برایتان آرزومندم. ارادتمند همه شما، محمدرضایعقوبی🔥

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم