آموزش نحوه قرار دادن ویدئو در صفحات وب
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن ویدئو در صفحات وب با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 ویدئو در صفحات وب
- 2 جدول نوع رسانه ویدئویی در HTML
- 3 نحوه قرار دادن ویدئو در صفحات وب
- 4 صفت controls برای نمایش دکمه پخش ویدئو
- 5 پیغام عدم پشتیبانی مرورگر از تگ <video>
- 6 تنظیم اندازه عرض و ارتفاع ویدئو
- 7 تنظیم پخش خودکار ویدئو در HTML
- 8 تکرار پخش ویدئو در HTML
- 9 قطع صدای ویدئو در HTML
- 10 نحوه تنظیم تصویر شاخص برای ویدئو
- 11 نحوه اضافه کردن زیرنویس به ویدئو در HTML
ویدئو در صفحات وب
در بخش قبلی ما با فایل های صوتی و نحوه قرار دادن آنها در صفحات وب آشنا شدیم، حال در این بخش میخواهیم با فایل های تصویری و نحوه قرار دادن آنها در صفحات وب آشنا شویم. لطفا در ادامه با من همراه باشید.
اگر در جریان باشید از بین فرمت های ویدئویی تنها فرمت های 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> میتوانیم یک ویدئو را در یک صفحه ی وب قرار دهیم، که شکل کلی برای استفاده از این تگ را میتوانید بصورت زیر مشاهده نمایید.
برای مثال من الان یه کلیپ در اینجا قرار دادم :
شکل کلی برای استفاده از تگ ویدئو در یک صفحه ی وب بصورت زیر می باشد :
|
1 2 3 |
<video> <source src="demo.mp4" type="video/mp4"> </video> |
که با استفاده از صفت src ما باید آدرس دقیق فایل ویدئومان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل ویدئویی ما از چه نوعی است (طبق جدول نوع رسانه ویدئویی در HTML).
حال اگر لطف بفرمایید و بروی دکمه (امتحان کنید) کلیک نمایید میبینید که ویدئوی ما ایجاد شده ولی چیزی برای مشاهده ما نمیبینیم، یعنی چیزی به اسم فیلم که پخش شود و ما آن را مشاهده نماییم را نمی بینیم بلکه فقط یک تصویر از ویدئو را مشاهده مینماییم.
Free-Learn
صفت controls برای نمایش دکمه پخش ویدئو
حال اگر صفت controls رو درون تگ <video> قرار دهیم، کنترل ها یا همون دکمه های پخش،تنظیم صدا و.. را میتوانیم مشاهده نماییم و در واقع میتوان گفت وجود این صفت در تگ <video> برای نمایش و پخش یک ویدئو ضروری می باشد.
|
1 2 3 |
<video controls> <source src="demo.mp4" type="video/mp4"> </video> |
Free-Learn
پیغام عدم پشتیبانی مرورگر از تگ <video>
ما میتوانیم یک پیغام به دلخواه درون تگ <video> قرار دهیم تا اگر مرورگر کاربر از تگ <video> پشتیبانی نکرد آن پیغام نمایش داده شود و کاربر بداند که دلیل پخش نشدن ویدئو چه بوده است.
|
1 2 3 4 |
<video controls> <source src="demo.mp4" type="video/mp4"> شرمنده، مرورگر شما تگ ویدئو را پشتیبانی نمی کند </video> |
Free-Learn
تنظیم اندازه عرض و ارتفاع ویدئو
ما با استفاده از صفات width و height درون تگ <video> میتوانیم اندازه عرض و ارتفاع ویدئو را به دلخواه تنظیم نماییم.
|
1 2 3 |
<video controls width="400" height="230"> <source src="demo.mp4" type="video/mp4"> </video> |
Free-Learn
تنظیم پخش خودکار ویدئو در HTML
شاید شماهم تا به الان براتون پیش اومده باشه که وارد یک وبسایت می شوید و بطور خودکار و بدون اینکه متوجه شوید یک ویدئو برای شما پخش می شود، که البته اینکار زیاد به میل کاربران خوش نمیاد و اینکار میتونه باعث فرار کاربر از یک وبسایت شود.
با استفاده از صفت autoplay در تگ <video> ، میتوان کاری کرد که ویدئو بطور خودکار به محض بالا آمدن پخش شود.
در مرورگرهای مدرن (آخرین نسخه های موزیلا فایرفاکس یا گوگل کروم) ممکن است از پخش خودکار صدا جلوگیری کنند، ولی خب شما میتونید خودتون تعیین کنید که آیا اجازه بده برای پخش خودکار یا خیر. (آموزش فعالسازی پخش خودکار در مرورگرها)
قابلیت پخش خودکار یک ویدئو ممکن است بروی برخی از گوشی های موبایل کار نکند.
|
1 2 3 |
<video controls autoplay> <source src="demo.mp4" type="video/mp4"> </video> |
Free-Learn
تکرار پخش ویدئو در HTML
با قرار دادن صفت loop درون تگ <video> میتوان حالت تکرار پخش یک ویدئو را فعال کرد و در اینصورت به محض اتمام یک ویدئو ،دوباره همان ویدئو بطور خودکار پخش خواهد شد.
|
1 2 3 |
<video controls loop> <source src="demo.mp4" type="video/mp4"> </video> |
Free-Learn
قطع صدای ویدئو در HTML
با قرار دادن صفت muted درون تگ <video> میتوان بطور پیش فرض صدای ویدئو را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از ویدئو پخش نخواهد شد و فقط تصویر پخش خواهد شد.
|
1 2 3 |
<video controls muted> <source src="demo.mp4" type="video/mp4"> </video> |
Free-Learn
نحوه تنظیم تصویر شاخص برای ویدئو
اگر تا به الان براتون پیش اومده باشه باید بدانید که تصویر شاخص یک ویدئو چیست؟ به یک تصویر یا عکس یا پوستر از ویدئو که قبل از پخش ویدئو بطور پیش فرض بروی ویدئو قرار میگیرد را تصویر شاخص آن ویدئو می گوییم.
برای قرار دادن یک پوستر یا تصویر شاخص برای ویدئو باید از صفت poster درون تگ <video> استفاده کرد.
|
1 2 3 |
<video controls poster="image.jpg"> <source src="demo.mp4" type="video/mp4"> </video> |
Free-Learn
نحوه اضافه کردن زیرنویس به ویدئو در HTML
حتما تا به الان ویدئوهایی را دیده اید که زیرنویس دارند، مثلا وقتی ما میخواهیم یک فیلم با زبان اصلی (خارجی) را مشاهده نماییم باید از زیرنویس با زبان فارسی استفاده نماییم. در HTML5 هم ما میتوانیم فایل زیرنویس به ویدئوهایمان اضافه نماییم تا کاربر بتواند بصورت آنلاین یک زیرنویس با زبان فارسی یا هر زبانی دیگر را مشاهده نماید.
حال لطفا به مثال زیر توجه نمایید و همچنین بروی دکمه امتحان کنید برای مشاهده خروجی بصورت آنلاین کلیک نمایید.
- صفت src : محل فایل زیرنویس را مشخص میکند (یک فایل زیرنویس با فرمت (vtt.))
- صفت kind : برای فعال کردن فایل زیرنویس
- صفت srclang : برای مشخص کردن کد زبان فایل زیرنویس (اگر مقدار صفت kind برابر باشد با subtitles وجود این صفت ضروری می باشد)
- صفت label : برای ایجاد یک نام جهت نمایش در ویدئوی در حال پخش
- صفت default : اگر وجود داشته باشد فایل زیرنویس بطور خودکار با پخش ویدئو نمایش داده خواهد شد
توجه داشته باشید که فایل زیرنویس شما باید حتما از نوع vtt باشد نه srt یا دیگر فرمت ها.
با استفاده از این وبسایت میتوانید یک زیرنویس که از نوع srt است را به یک زیرنویس از نوع vtt تبدیل نمایید.
برای مشاهده کد زبان های کشورها لطفا اینجا کلیک نمایید.
|
1 2 3 4 |
<video width="400" height="230" controls> <source src="demo.mp4" type="video/mp4"> <track src="subtitle.vtt" kind="subtitles" srclang="fa" label="فارسی" default> </video> |
به پایان بخش (آموزش نحوه قرار دادن ویدئو در صفحات وب) رسیدیم ,امیدوارم که در این بخش هیچ مشکلی نداشته باشید. اگرهم سوالی مشکلی در رابطه با این بخش دارید از اینجا مشکل تان را ارسال نمایید تا بتونم پاسخ بدم.
