ویدئو در HTML
مثال فیلم HTML با احترام از Big Buck Bunny.
پخش ویدیوها در HTML
پیش از HTML5، یک ویدیو تنها با استفاده از پلاگین می‌توانست پخش شود (مانند flash).[۱]
عنصر <video> در HTML5 یک روش استاندارد برای تعبیه کردن ویدیو در صفحه وب است.
پشتیبانی مرورگر
اعداد در جدول زیر اولین نسخه مرورگر را که بطور کامل عنصر <video> را پشتیبانی می‌کنند نشان می‌دهد.
| Element |  |
 |
 |
 |
|
| <video> | ۴٫۰ | ۹٫۰ | ۳٫۵ | ۴٫۰ | ۱۰٫۵ |
عنصر <video> در HTML
برای نمایش ویدیو در HTML از عنصر <video> استفاده کنید:
مثال
<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>
چگونه کار می‌کند؟
ویژگی controls کنترل‌های ویدیو مانند پخش، توقف و میزان صدا را اضافه می‌کند.
همیشه اضافه‌کردن ویژگی‌های width و height ایده خوبی به نظر می‌رسد. اگر عرض و ارتفاع تنظیم نشوند، صفحه هنگام بارگذاری ویدیو دچار لرزش می‌شود.
عنصر <source> به شما این اجازه را می‌دهد که فایل‌های ویدیویی جایگزینی مشخص کنید که مرورگر ممکن است از میان آنها انتخاب کند. مرورگر از اولین فرمت شناخته شده استفاده خواهد کرد.
متن بین تگ‌های <video> و </video> تنها در مرورگرهایی نمایش داده می‌شود که عنصر <video> را پشتیبانی نمی‌کنند.
ویژگی پخش خودکار (Autoplay) ویدیو در HTML
ویژگی autoplay برای شروع پخش خودکار ویدیو استفاده می‌شود:
مثال
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
ویژگی autoplay در دستگاه‌های موبایل مانند iPadها و iPhoneها اجرا نمی‌شود.
پشتیبانی مرورگر
در HTML5، سه فرمت ویدیو پشتیبانی می‌شود: MP4 ،WebM و Ogg.
مرورگر از قالب بندی‌های متفاوتی برای ویدیو پشتیبانی می‌کند مانند:
|
|
|
|
| |
| MP4 | بله | بله | بله | بله | بله (از Opera نسخهٔ ۲۵) |
| WebM | بله | خیر | بله | خیر | بله |
| Ogg | بله | خیر | بله | خیر | بله |
ویدیو HTML - انواع Media
| قالب بندی فایل | نوع Media |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
ویدیو HTML - متدها، خصوصیت ها و رویدادها (Events)
HTML5 متدهای DOM، خصوصیت‌ها و رویدادها را برای عنصر <video> تعریف کرده‌است.
این امر امکان بارگذاری، پخش و توقف ویدیو را به همراه تنظیمات مدت زمان و میزان صدا را می‌دهد.
همچنین رویدادهای DOM ای وجود دارند که می‌توانند هنگام پخش یک ویدیو، توقف و غیره را به شما اعلام کنند.
مثال: استفاده از جاوا اسکریپت
برای دسترسی به مرجع کامل DOM، به مرجع DOM صدا / ویدیو HTML5 ما مراجعه کنید.
تگ های ویدیویی HTML5
| تگ | تعریف |
|---|---|
| <video> | یک ویدیو یا فیلم را تعریف می‌کند |
| <source> | منبع چند media را برای عنصرهای media مانند <video> و <audio> مشخص می‌کند |
| <track> | Trackهای متنی را در پخش‌کننده‌های media مشخص می‌کند |
منابع آموزشی