ویدئو در HTML

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

مثال فیلم 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 ای وجود دارند که می‌توانند هنگام پخش یک ویدیو، توقف و غیره را به شما اعلام کنند.

مثال: استفاده از جاوا اسکریپت

Play/Pause Big Small Normal

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

برای دسترسی به مرجع کامل DOM، به مرجع DOM صدا / ویدیو HTML5 ما مراجعه کنید.

تگ های ویدیویی HTML5

تگ	تعریف
<video>	یک ویدیو یا فیلم را تعریف می‌کند
<source>	منبع چند media را برای عنصرهای media مانند <video> و <audio> مشخص می‌کند
<track>	Trackهای متنی را در پخش‌کننده‌های media مشخص می‌کند

صفحهٔ بعد»

«صفحهٔ قبل