این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش نحوه قرار دادن ویدئو در صفحات وب
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن ویدئو در صفحات وب با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 ویدئو در صفحات وب
- 2 جدول نوع رسانه ویدئویی در HTML
- 3 نحوه قرار دادن ویدئو در صفحات وب
- 4 صفت controls برای نمایش دکمه پخش ویدئو
- 5 پیغام عدم پشتیبانی مرورگر از تگ <video>
- 6 تنظیم اندازه عرض و ارتفاع ویدئو
- 7 تنظیم پخش خودکار ویدئو در HTML
- 8 تکرار پخش ویدئو در HTML
- 9 قطع صدای ویدئو در HTML
- 10 نحوه تنظیم تصویر شاخص برای ویدئو
- 11 نحوه اضافه کردن زیرنویس به ویدئو در HTML
- 12 مثال های بیشتر از تگ video
ویدئو در صفحات وب
در جلسه قبلی ما با فایل های صوتی و نحوه قرار دادن آنها در صفحات وب آشنا شدیم، ( مشاهده جلسه قبلی ) حال در این جلسه میخواهیم با فایل های تصویری و نحوه قرار دادن آنها در صفحات وب آشنا شویم.
اگه یادتون باشه از بین فرمت های ویدئویی تنها فرمت های MP4 و WebM و Ogg توسط HTML5 پشتیبانی می شود، لذا فایل ویدئویی شما باید از این فرمت ها ایجاد شده باشد.
در جدول زیر مشاهده خواهید نمود که چه مرورگرهایی از ۳ فرمت MP4 و WebM و Ogg پشتیبانی خواهند کرد.
تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP4 می باشد.
| نام مرورگر | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | بله | بله | بله |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
همانطور که در جدول مشاهده مینمایید تنها فرمت MP4 است که تمامی مرورگرها از آن بخوبی پشتیبانی می کنند لذا من هم پیشنهاد میکنم شما نیز از این فرمت ویدئویی برای ویدئوهایتان استفاده نمایید، وقتی mp4 باشه اون ۲ فرمت دیگه نیاز نیست.
Free-Learn
جدول نوع رسانه ویدئویی در HTML
| فرمت فایل | نوع رسانه |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Free-Learn
نحوه قرار دادن ویدئو در صفحات وب
ما در HTML به راحتی و با استفاده از تگ <video> میتوانیم یک ویدئو را در یک صفحه ی وب قرار دهیم، که شکل کلی برای استفاده از این تگ بصورت زیر می باشد :
|
1 2 3 |
<video> <source src="آدرس فایل ویدئو" type="نوع رسانه"> </video> |
که با استفاده از صفت src ما باید آدرس دقیق فایل ویدئومان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل ویدئویی ما از چه نوعی است ( طبق جدول نوع رسانه ویدئویی که کمی پایین تر هستش )
برای مثال من الان یه کلیپ در اینجا قرار دادم :
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
شاید شماهم تا به الان براتون پیش اومده باشه که وارد یک وبسایت می شوید و بطور خودکار و بدون اینکه متوجه شوید یک ویدئو برای شما پخش می شود، که البته اینکار زیاد جالب نیست و میتونه به تجربه کاربری ( یا همون UX ) ضربه بزنه.
با استفاده از صفت 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="images/my-poster.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 controls width="400" height="230"> <source src="files/demo.mp4" type="video/mp4"> <track src="files/subtitle.vtt" kind="subtitles" srclang="fa" label="فارسی" default> </video> |
Free-Learn
مثال های بیشتر از تگ video
مثال شماره ۱ : تمام صفحه کردن ویدئو
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> video.MyVideo{ position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; max-width:100%; } </style> |
مثال شماره ۲ : پخش شدن ویدئو در پس زمینه صفحه ( یعنی پلیر مخفیه ولی خوده ویدئو پخش میشه )
|
1 2 3 4 5 6 7 |
<body> <video controls autoplay style="display:none;"> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
مثال شماره ۳ : ویدئو در گوشه سمت چپ صفحه بصورت ثابت + پخش خودکار ( autoplay )
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .MyVideo{ position:fixed; left:10px; bottom:5px; width:230px; height:140px; } </style> |
خب دوستان محترم به پایان آموزش نحوه قرار دادن ویدئو در صفحات وب رسیدیم، امیدوارم که نهایت استفاده رو برده باشید و مشکل خاصی در این جلسه نداشته باشید.
