محتوای آموزشی

آموزش بارگذاری فایل های ویدئویی در صفحات وب

آموزش بارگذاری فایل های ویدئویی در صفحات وب

در ادامه سلسله مقالات آموزش html در این جلسه در مورد قرار دادن فایل های ویدئویی در صفحات وب صحبت خواهیم کرد.

قطعا تا به حال صفحات وبی را مشاهده کرده اید که دارای فایل های ویدئویی می باشند. تا قبل از ارائه HTML 5 ، استانداردی برای نمایش فایل های ویدویی در صفحات وب تعریف نشده بود و طراحان وب برای نمایش اینگونه فایل ها از پلاگین ها و ابزارهای جانبی مثل falsh player استفاده می کردند .

این روش چندین مشکل اساسی داشت که مهمترین آن این بود که باید plugin فلش پلیر بر روی مرورگر کاربر حتما نصب می بود تا فایل ویدویی را نمایش دهد .

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

استانداردی که در HTML5 تعریف شد استفاده از تگ جدید video ، برای نمایش فایل های ویدویی در صفحات وب می باشد.

شکل کلی استفاده از این تگ به صورت زیر است :

<video  src="آدرس فایل مدنظر" >

تگ video یک سری ویژگی های (attribute) اختصاصی دارد که در ادامه به معرفی انها می پردازیم و سپس یک مثال عملی را پیاده سازی می کنیم.

به طور کلی ویژگی های تگ video را می توان به دو دسته تفسیم کرد: 1- اجباری 2- اختیاری

ویژگی های اجباری تگ video

Src

مقداری که این پارامتر می گیرد آدرس فایلی می باشد که می خواهیم در تگ ویدئو نمایش دهیم.چنانچه با بحث آدرس دهی ها در صفحات وب آشنایی ندارید می توانید مقاله " انواع آدرسی دهی در صفحات وب " را مطالعه کنید.

این ویژگی تنهای ویژگی اجباری تگ video می باشد که استفاده از ان در تگ video لازم و ضروری می باشد،بقیه ویژگی هایی که معرفی می کنیم،جزو ویژگی های اختیاری این تگ به حساب می آیند که عدم استفاده از انها نیز مشکلی در نمایش فایل های ویدئویی مدنظر شما ایجاد نخواهد کرد.

ویژگی های اختیاری تگ video

autoplay

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

نکته : در مقالات قبلی در مورد خواص Boolean صحبت کردیم و گفتیم که این خواص نیازی به مقدار ندارند و صرفا ذکر انها به عنوان یک خاصیت کافی می باشد.

controls

خاصیت controls نیز از نوع خواص Boolean می باشد و در صورتی که برای یک تگ videoتعیین شود، باعث می شود تا دکمه های کنترلی مانند دکمه های پخش، توقف و ... برای فایل تصویری بر روی صفحه نمایش داده شوند .

loop

این ویژگی نیز جزو ویژگی های Boolean است و اگر آن را برای یک تگ video به کار ببرید، باعث اجرای مجدد فایل تصویری، پس از هر بار پایان یافتن آن می شود .

muted

این ویژگی هم یک مقدار Boolean است و در صورتی که برای یک تگ video استفاده شود، باعث می شود تا فایل تصویری در ابتدای اجرا ، بدون صدا باشد.

poster

مقداری که در این ویژگی استفاده می شود باید آدرس یک عکس باشد.زمانی که ویدیو به طور کامل بارگذاری نشده و یا کاربر دکمه play را نزده باشد، به جای ویدیو این تصویر نمایش داده می شود .

مثال زیر نمونه ای از نحوه قرار دادن یک ویدئو در صفحه وب می باشد.

<video src='http://pzof.ir/Portals/0/multiMedia/myVid.mp4' poster="/Portals/0/2210872.jpg" controls></video>

به منظور آنکه مثال های این بخش را بهتر درک کنید این مثال ها را عینا در کد قرار می دهیم تا خروجی کدها را مشاهده کنید.

همانطور که مشاهده می کنید ابتدا تصویری که به عنوان پوستری تعیین کرده ایم نمایش داده می شود،همچنین از آنجا که از خاصیت controls نیز استفاده کرده ایم کلید های کنترلی مانند پخش،توقف،تنظیم صدا،تمام صفحه شدن و ... نیز نمایش داده می شود.

نکته :

اگر عرض و ارتفاع تگ video را مشخص نکنید،فایل های تصویری در سایز اصلی خود نمایش داده می شوند،به منظور کنترل ابعاد ویدئو خود می توانید از ویژگی های (attribute) عمومی width,height استفاده کنید.این کار را با استفاده از کدهای css نیز می توانید انجام دهید ولی در مورد تگ های video,img توصیه می شود که این کار را با استفاده از ویژگی های width,height انجام شود.

<video src='http://pzof.ir/Portals/0/multiMedia/myVid.mp4?ver=1396-01-24-092654-917' controls autoplay loop width="300" height="200"></video>

خروجی قطعه کد بالا را مشاهده می کنید:

همانطور که می بینید در این مثال از پوستری برای ویدئو خود استفاده نکرده ایم ،همچنین با توجه به این که از خاصیت های loop,autoplay استفاده کرده ایم به محض لود شدن فایل ویدئویی ما،پخش آن به صورت خودکار آغاز می شود،همچنین به دلیل استفاده از خاصیت loop بعد از پایان ویدئو پخش آن تکرار می شود.

مشکل : ناسازگاری مرورگرها

مشکلی که در اینجا وجود دارد این است که مرورگرهای مختلف از فرمت های خاص ویدویی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است.

مرورگر MP4 webM Ogg
اینترنت اکسپلورر
گوگول کروم
فایرفاکس
سافاری
اپرا ✔ از ورژن 25 به بالا

 

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

 

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

نحوه استفاده از این تگ به صورت زیر می باشد:

<video controls>
    <source src="myVideo.mp4" type="video/mp4" />
    <source src="myVideo.ogg" type="video/ogg" />
    <source src="myVideo.ogg" type="video/ogg" />
</video>

مشکل دیگر : مرورگرهای قدیمی

مشکل دیگری که ممکن است پیش بیاید این است که مرورگرهای قدیمی از تگ video پشتیبانی نمی کنند.برای حل این مشکل دو راه حل وجود دارد،راه حل اول استفاده از پلاگین های خارجی جاوا اسکریپت می باشد که در تمامی مرورگرها پشتیبانی می شوند،اما راه حل دوم که در HTML5 وجود دارد این است که به جای نمایش ویدئو به کاربر خود اعلام کنید که مرورگرش قدیمی است و نمی تواند فایل ویدئویی ما را نمایش دهد.

به منظور نمایش این پیام به کاربر خود می توانید پیغام خود را قبل بستن تگ video قرار دهید.به این ترتیب چنانچه کاربر با استفاده از مرورگرهای قدیمی وارد سایت شما شود به جای نمایش ویدئو،پیغام مدنظر شما نمایش داده می شود.برای درک بهتر موضوع به مثال زیر توجه کنید:

<video controls>
    <source src="myVideo.mp4" type="video/mp4" />
    <source src="myVideo.ogg" type="video/ogg" />
    <source src="myVideo.ogg" type="video/ogg" />
	متاسفانه مرورگر شما قدیمی است،برای مشاهده ویدئو لطفا مرورگر خود را بروزرسانی نمایید
</video>

به این ترتیب با نحوه اضافه کردن ویدئو به صفحات خود در HTML5 آشنا شدید.در جلسه بعدی در مورد نحوه قرار دادن فایل های صوتی در صفحات وب صحبت خواهیم کرد.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های HTML,CSS با ما همراه باشید.

کامنت جدید ...
Sort by:

مطالب پیشنهادی

'