این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ video در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ video در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Video در HTML
تگ video که دیگه از اسمش مشخصه چیه! تگی است که با استفاده از آن میتوان یک ویدئو ( کلیپ ، فیلم ) را در یک صفحه وب قرار داد.
اگه یادتون باشه تو آموزش نحوه قرار دادن ویدئو در صفحات وب گفتم که از بین فرمت های ویدئویی تنها فرمت های MP4 و WebM و Ogg توسط HTML5 پشتیبانی می شود، لذا فایل ویدئویی شما باید از این فرمت ها ایجاد شده باشد.
در جدول زیر مشاهده خواهید نمود که چه مرورگرهایی از ۳ فرمت MP4 و WebM و Ogg پشتیبانی خواهند کرد.
| نام مرورگر | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | بله | بله | بله |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
همانطور که در جدول مشاهده مینمایید تنها فرمت MP4 است که تمامی مرورگرها از آن بخوبی پشتیبانی می کنند لذا من هم پیشنهاد میکنم شما نیز از این فرمت ویدئویی برای ویدئوهایتان استفاده نمایید، وقتی mp4 باشه اون ۲ فرمت دیگه نیاز نیست.
- MP4 > فایل های MPEG4 با کدک های ویدئویی H264 و کدک های صوتی AAC
- WebM > فایل های WebM با کدک ویدیو VP8 و کدک صوتی Vorbis
- Ogg > فایل های Ogg با کدک Video Theora و کدک صوتی Vorbis
Free-Learn
جدول نوع رسانه ویدئویی در HTML
هر یک از فرمت های موجود در جدول بالا دارای یک نوع متن یا یک نوع رسانه ای می باشند که ما باید نوع رسانه مون رو با استفاده از مقادیر جدول زیر مشخص نماییم.
| فرمت فایل | نوع رسانه |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Free-Learn
مثال از تگ video در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ video در حالت عادی
|
1 2 3 4 5 6 7 |
<body> <video controls> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
مثال شماره ۲ : پخش خودکار ویدئو
|
1 2 3 4 5 6 7 |
<body> <video controls autoplay> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
مثال شماره ۳ : تنظیم تصویر شاخص ویدئو
|
1 2 3 4 5 6 7 |
<body> <video controls poster="images/my-poster.jpg"> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
مثال شماره ۴ : تکرار پخش ویدئو ( دوباره پخش شدن ویدئو به محض تمام شدن )
|
1 2 3 4 5 6 7 |
<body> <video controls loop> <source src="files/demo.mp4" type="video/mp4"> </video> </body> |
مثال شماره ۵ : تمام صفحه کردن ویدئو
|
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> |
مثال شماره ۶ : ویدئو در گوشه سمت چپ صفحه بصورت ثابت + پخش خودکار ( 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> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ video در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ video در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| autoplay | autoplay | پخش خودکار ویدئو |
| controls | controls | جهت نمایش دکمه های کنترل ( دکمه پخش ، تنظیم صدا و … ) |
| height | pixels | اندازه ارتفاع ویدئو را مشخص میکند |
| loop | loop | تکرار پخش ویدئو |
| muted | muted | قطع صدای ویدئو |
| poster | URL | یک تصویر شاخص را برای ویدئو مشخص میکند |
| preload | auto metadata none |
نحوه بارگذاری ویدئو را در هنگام بارگذاری صفحه مشخص میکند |
| src | URL | آدرس URL فایل ویدئویی را مشخص میکند |
| width | pixels | اندازه عرض ویدئو را مشخص میکند |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ video از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- ما میتونیم یک متن دلخواه رو درون تگ video قرار بدیم تا اگر مرورگر کاربر حالا به هردلیلی از این تگ پشتیبانی نکرد، اون متن به کاربر نشون داده بشه و کاربر دلیل پخش نشدن ویدئو رو متوجه شه. ( مثال )
