مقدمه
سلام پی وی لرنی های عزیز!
به دوره آموزش تگ های HTML خوش آمدید!
HTML یا Hypertext Markup Language یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات اینترنت و وب محسوب می شود.
می توان ادعا کرد که HTML دروازه ورود و پیشرفت برای یادگیری سایر زبان های برنامه نویسی هم چون CSS و جاوا اسکریپت است.
HTML ساختار و اسکلت صفحات وب را تشکیل می دهد و بدون آن نمی توان هیچ صفحه وبی را ساخت.
دوست دارید طراح وب شوید؟
خب باید HTML را بیاموزید!
نگران نشوید! یادگیری HTML کار دشواری نیست و با کمی تلاش خیلی زود در آن استاد می شوید.
در جلسه قبل از این دوره با تگ var آشنا شدیم و آموختیم که این تگ به تعریف متغیر یا variable می پردازد.
در این جلسه اما شما را به آموزش کار با تگ video در HTML دعوت می نماییم.
آموزش کار با تگ video در HTML
به مثال زیر توجه نمایید.
در این قطعه کد یک ویدیو گنجانده شده است.
مثال :
| <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> |
تعریف و کاربرد
تگ video به مشخص کردن ویدیوها نظیر کلیپ ها یا سایر جریان های ویدیویی می پردازد.
در حال حاضر ، ۳ قالب ویدیوی پشتیبانی شده برای تگ video وجود دارد که عبارتند از : MP4 ، WebM و Ogg.
| مرورگر | MP4 | WebM | Ogg |
|---|
| Internet Explorer | پشتبانی می شود | پشتیبانی نمی شود | پشتیبانی نمی شود |
| Chrome | پشتبانی می شود | پشتبانی می شود | پشتبانی می شود |
| Firefox | پشتبانی می شود | پشتبانی می شود | پشتبانی می شود |
| Safari | پشتبانی می شود | پشتیبانی نمی شود | پشتیبانی نمی شود |
| Opera | پشتبانی می شود | پشتبانی می شود | پشتبانی می شود |
- MP4 = MPEG 4 پرونده با کدگذاری ویدیویی H264 و کدگذاری صوتی AAC
- WebM = پرونده های WebM با کدگذاری ویدیویی VP8 و کدگذاری صوتی Vorbis
- Ogg = پرونده های Ogg با کدگذاری ویدیوی Theora و کدگذاری صوتی Vorbis
انواع MIME برای فرمت های ویدئویی
| Format | MIME-type |
|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
پشتبانی مرورگرها
در جدول زیر می توانید ببینید که آیا تگ video در مرورگرهای مختلف پشتیبانی می شود یا خیر.
| عنصر |  |  |  |  |  |
| <video> | بله | بله | بله | بله | بله |
تفاوت بین HTML 4.01 و HTML5
تگ video در HTML5 تگ جدیدی محسوب می شود.
نکات و توصیه ها
هر متنی بین تگ های <video> و </video> در مرورگرهایی نمایش داده می شود که از تگ <video> پشتیبانی نمی کنند.
خصیصه های اختیاری
| خصیصه | مقدار | توضیحات |
|---|
| autoplay | autoplay | این خصیصه موحب می شود که ویدیو بصورت خودکار و با بالا اومدن صفحه پخش شود. |
| controls | controls | این خصیصه مشخص می کند که کنترل های ویدیویی باید نمایش داده شوند (مانند دکمه پخش / مکث و غیره). |
| height | pixels | ارتفاع پخش کننده ویدیو را تنظیم می کند. |
| loop | loop | باعث می شود ویدیو به محض تمام شدن دوباره پخش شود. |
| muted | muted | این خصیصه به قطع کردن صدای ویدئو می پردازد. |
| poster | URL | یک تصویر را برای ویدئو مشخص می کند و این تصویر تا هنگام ظاهر شدن دکمه پخش قابل مشاهده است. |
| preload | auto
metadata
none | نحوه بارگذاری ویدیو را در هنگام لود شدن صفحه تعیین می کند. |
| src | URL | آدرس یا مسیر فایل ویدویی را مشخص می نماید. |
| width | pixels | این خصیصه عرض پخش کننده ویدیو را تنظیم می کند |
خصیصه های سراسری Global Attributes
تگ <video> از خصیصه های سراسری در HTML پشتیبانی می کند.
خصیصه رویداد Event Attributes
تگ <video> از خصیصه رویداد در HTML پشتیبانی می کند.
تنظیمات پیش فرض CSS
ندارد.
کلام آخر
در این جلسه به آموزش کار با تگ video در HTML پرداختیم؛ تگ video به مشخص کردن ویدیوها نظیر کلیپ ها یا سایر جریان های ویدیویی می پردازد.
در جلسه بعدی به عنوان آخرین جلسه از این دوره آموزشی به کار با تگ wbr خواهیم پرداخت.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
رضا
سلام خسته نباشید. من میخوام یک سایت طراحی کنم تماشای آنلاین فیلم و… حالا میخوام مثلا وقتی ی فیلم شروع به نمایش میشه. میخوام زیرنویسم بهش وصل کنم از طریق کدنویسی. باید چیکار کنم؟
پی وی لرن
سلام می توانید از تگ track استفاده کنید .
این جلسه را مشاهده کنید جلسه ۱۱۳ : آموزش کار با تگ track در HTML