آموزش نحوه قرار دادن ویدئو در صفحات وب

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

آموزش نحوه قرار دادن ویدئو در صفحات وب

Free-Learn

ویدئو در صفحات وب

در بخش قبلی ما با فایل های صوتی و نحوه قرار دادن آنها در صفحات وب آشنا شدیم، حال در این بخش میخواهیم با فایل های تصویری و نحوه قرار دادن آنها در صفحات وب آشنا شویم. لطفا در ادامه با من همراه باشید.

اگر در جریان باشید از بین فرمت های ویدئویی تنها فرمت های MP4 و WebM و Ogg توسط HTML5 پشتیبانی می شود، لذا فایل ویدئویی شما باید از این فرمت ها ایجاد شده باشد.

در جدول زیر مشاهده خواهید نمود که چه مرورگرهایی از ۳ فرمت MP4 و WebM و Ogg پشتیبانی خواهند کرد.

تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد.

نام مرورگر MP4 WebM Ogg
Internet Explorer بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود) خیر (پشتیبانی نمی شود)
Chrome بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Firefox بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)
Safari بله (پشتیبانی می شود) خیر (پشتیبانی نمی شود) خیر (پشتیبانی نمی شود)
Opera بله (پشتیبانی می شود) بله (پشتیبانی می شود) بله (پشتیبانی می شود)

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

Free-Learn

جدول نوع رسانه ویدئویی در HTML

فرمت فایل نوع رسانه
MP4 video/mp4
WebM video/webm
Ogg video/ogg

در این وبسایت میتوانید نوع رسانه تمامی فایل های همچون تصویری / صوتی / متنی و.. را مشاهده نمایید.

Free-Learn

نحوه قرار دادن ویدئو در صفحات وب

ما در HTML5 به راحتی و با استفاده از تگ <video> میتوانیم یک ویدئو را در یک صفحه ی وب قرار دهیم، که شکل کلی برای استفاده از این تگ را میتوانید بصورت زیر مشاهده نمایید.

برای مثال من الان یه کلیپ در اینجا قرار دادم :

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

امتحان کنید

که با استفاده از صفت src ما باید آدرس دقیق فایل ویدئومان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل ویدئویی ما از چه نوعی است (طبق جدول نوع رسانه ویدئویی در HTML).

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

Free-Learn

صفت controls برای نمایش دکمه پخش ویدئو

حال اگر صفت controls رو درون تگ <video> قرار دهیم، کنترل ها یا همون دکمه های پخش،تنظیم صدا و.. را میتوانیم مشاهده نماییم و در واقع میتوان گفت وجود این صفت در تگ <video> برای نمایش و پخش یک ویدئو ضروری می باشد.

امتحان کنید

Free-Learn

پیغام عدم پشتیبانی مرورگر از تگ <video>

ما میتوانیم یک پیغام به دلخواه درون تگ <video> قرار دهیم تا اگر مرورگر کاربر از تگ <video> پشتیبانی نکرد آن پیغام نمایش داده شود و کاربر بداند که دلیل پخش نشدن ویدئو چه بوده است.

امتحان کنید

Free-Learn

تنظیم اندازه عرض و ارتفاع ویدئو

ما با استفاده از صفات width و height درون تگ <video> میتوانیم اندازه عرض و ارتفاع ویدئو را به دلخواه تنظیم نماییم.

امتحان کنید

Free-Learn

تنظیم پخش خودکار ویدئو در HTML

شاید شماهم تا به الان براتون پیش اومده باشه که وارد یک وبسایت می شوید و بطور خودکار و بدون اینکه متوجه شوید یک ویدئو برای شما پخش می شود، که البته اینکار زیاد به میل کاربران خوش نمیاد و اینکار میتونه باعث فرار کاربر از یک وبسایت شود.

با استفاده از صفت autoplay در تگ <video> ، میتوان کاری کرد که ویدئو بطور خودکار به محض بالا آمدن پخش شود.

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

قابلیت پخش خودکار یک ویدئو ممکن است بروی برخی از گوشی های موبایل کار نکند.


امتحان کنید

Free-Learn

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

با قرار دادن صفت loop درون تگ <video> میتوان حالت تکرار پخش یک ویدئو را فعال کرد و در اینصورت به محض اتمام یک ویدئو ،دوباره همان ویدئو بطور خودکار پخش خواهد شد.

امتحان کنید

Free-Learn

قطع صدای ویدئو در HTML

با قرار دادن صفت muted درون تگ <video> میتوان بطور پیش فرض صدای ویدئو را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از ویدئو پخش نخواهد شد و فقط تصویر پخش خواهد شد.

امتحان کنید

Free-Learn

نحوه تنظیم تصویر شاخص برای ویدئو

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

برای قرار دادن یک پوستر یا تصویر شاخص برای ویدئو باید از صفت poster درون تگ <video> استفاده کرد.

امتحان کنید

Free-Learn

نحوه اضافه کردن زیرنویس به ویدئو در HTML

حتما تا به الان ویدئوهایی را دیده اید که زیرنویس دارند، مثلا وقتی ما میخواهیم یک فیلم با زبان اصلی (خارجی) را مشاهده نماییم باید از زیرنویس با زبان فارسی استفاده نماییم. در HTML5 هم ما میتوانیم فایل زیرنویس به ویدئوهایمان اضافه نماییم تا کاربر بتواند بصورت آنلاین یک زیرنویس با زبان فارسی یا هر زبانی دیگر را مشاهده نماید.

حال لطفا به مثال زیر توجه نمایید و همچنین بروی دکمه امتحان کنید برای مشاهده خروجی بصورت آنلاین کلیک نمایید.

  • صفت src : محل فایل زیرنویس را مشخص میکند (یک فایل زیرنویس با فرمت (vtt.))
  • صفت kind : برای فعال کردن فایل زیرنویس
  • صفت srclang : برای مشخص کردن کد زبان فایل زیرنویس (اگر مقدار صفت kind برابر باشد با subtitles وجود این صفت ضروری می باشد)
  • صفت label : برای ایجاد یک نام جهت نمایش در ویدئوی در حال پخش
  • صفت default : اگر وجود داشته باشد فایل زیرنویس بطور خودکار با پخش ویدئو نمایش داده خواهد شد

توجه داشته باشید که فایل زیرنویس شما باید حتما از نوع vtt باشد نه srt یا دیگر فرمت ها.

با استفاده از این وبسایت میتوانید یک زیرنویس که از نوع srt است را به یک زیرنویس از نوع vtt تبدیل نمایید.

برای مشاهده کد زبان های کشورها لطفا اینجا کلیک نمایید.


امتحان کنید

به پایان بخش (آموزش نحوه قرار دادن ویدئو در صفحات وب) رسیدیم ,امیدوارم که در این بخش هیچ مشکلی نداشته باشید. اگرهم سوالی مشکلی در رابطه با این بخش دارید از اینجا مشکل تان را ارسال نمایید تا بتونم پاسخ بدم.

Free-Learn