ویدئو در HTML

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
۱رسانه
۲ویدئو
۳صدا
۴پلاگین
۵یوتیوب
APIها در HTML
مثال‌ها
مرجع HTML

مثال فیلم HTML با احترام از Big Buck Bunny.


مشاهدهٔ نتیجه


پخش ویدیوها در HTML

پیش از HTML5، یک ویدیو تنها با استفاده از پلاگین می‌توانست پخش شود (مانند flash).[۱]

عنصر <video> در HTML5 یک روش استاندارد برای تعبیه کردن ویدیو در صفحه وب است.

پشتیبانی مرورگر

اعداد در جدول زیر اولین نسخه مرورگر را که بطور کامل عنصر <video> را پشتیبانی می‌کنند نشان می‌دهد.

Element Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
<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.

مرورگر از قالب بندی‌های متفاوتی برای ویدیو پشتیبانی می‌کند مانند:


Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
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 مشخص می‌کند


منابع آموزشی