ویدئو در HTML
Main Page Tutorial | |
---|---|
![]() | |
موارد آموزشی | |
فرمهای HTML | |
گرافیک در HTML | |
رسانه در HTML | |
۱ | رسانه |
۲ | ویدئو |
۳ | صدا |
۴ | پلاگین |
۵ | یوتیوب |
APIها در HTML | |
مثالها | |
مرجع HTML |
محتویات
- ۱ مثال فیلم HTML با احترام از Big Buck Bunny.
- ۲ پخش ویدیوها در HTML
- ۳ پشتیبانی مرورگر
- ۴ عنصر <video> در HTML
- ۵ چگونه کار میکند؟
- ۶ ویژگی پخش خودکار (به انگلیسی: Autoplay) ویدیو در HTML
- ۷ پشتیبانی مرورگر
- ۸ ویدیو HTML - انواع Media
- ۹ ویدیو HTML - متدها، خصوصیت ها و رویدادها (به انگلیسی: Events)
- ۱۰ تگ های ویدیویی HTML5
- ۱۱ منابع آموزشی
مثال فیلم HTML با احترام از Big Buck Bunny.[ویرایش | ویرایش]
پخش ویدیوها در HTML[ویرایش | ویرایش]
پیش از HTML5، یک ویدیو تنها با استفاده از پلاگین میتوانست پخش شود (مانند flash).[۱]
عنصر <video>
در HTML5 یک روش استاندارد برای تعبیه کردن ویدیو در صفحه وب است.
پشتیبانی مرورگر[ویرایش | ویرایش]
اعداد در جدول زیر اولین نسخه مرورگر را که بطور کامل عنصر <video>
را پشتیبانی میکنند نشان میدهد.
Element | ![]() |
![]() |
![]() |
![]() |
![]() |
<video> | ۴٫۰ | ۹٫۰ | ۳٫۵ | ۴٫۰ | ۱۰٫۵ |
عنصر <video> در HTML[ویرایش | ویرایش]
برای نمایش ویدیو در HTML از عنصر <video>
استفاده کنید:
مثال[ویرایش | ویرایش]
1 <video width="320" height="240" controls>
2 <source src="movie.mp4" type="video/mp4">
3 <source src="movie.ogg" type="video/ogg">
4 Your browser does not support the video tag.
5 </video>
چگونه کار میکند؟[ویرایش | ویرایش]
ویژگی controls
کنترلهای ویدیو مانند پخش، توقف و میزان صدا را اضافه میکند.
همیشه اضافهکردن ویژگیهای width
و height
ایده خوبی به نظر میرسد. اگر عرض و ارتفاع تنظیم نشوند، صفحه هنگام بارگذاری ویدیو دچار لرزش میشود.
عنصر <source>
به شما این اجازه را میدهد که فایلهای ویدیویی جایگزینی مشخص کنید که مرورگر ممکن است از میان آنها انتخاب کند. مرورگر از اولین فرمت شناخته شده استفاده خواهد کرد.
متن بین تگهای <video>
و </video>
تنها در مرورگرهایی نمایش داده میشود که عنصر <video>
را پشتیبانی نمیکنند.
ویژگی پخش خودکار (به انگلیسی: Autoplay) ویدیو در HTML[ویرایش | ویرایش]
ویژگی autoplay
برای شروع پخش خودکار ویدیو استفاده میشود:
مثال[ویرایش | ویرایش]
1 <video width="320" height="240" autoplay>
2 <source src="movie.mp4" type="video/mp4">
3 <source src="movie.ogg" type="video/ogg">
4 Your browser does not support the video tag.
5 </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 مشخص میکند |
منابع آموزشی[ویرایش | ویرایش]