طراحی وب

پخش ویدئو در html

پخش ویدئو در  html  به چه صورت انجام می شود؟ با چه عناصری می شود در  html  ویدئو پخش کرد؟

آموزش رسانه  html  درس دوم

پخش ویدئو در html  : قبل از  html5 ، یک ویدئو می توانست فقط با یک افزونه در مرورگر نمایش داده شود (مثل فلش ) . عنصر <video> در  html5  یک روش استاندارد برای جاسازی ویدئو در یک صفحه وب مشخص می کند.

پخش ویدئو در html
پخش ویدئو در html

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

اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از عنصر <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> 

چگونه کار می کند

ویژگی کنترل، کنترل های ویدئویی مانند play, pause, و volume را اضافه می کند.
ایده خوبی است که همیشه شامل ویژگی های عرض و ارتفاع باشد.( width and height attributes) اگر ارتفاع و عرض تنظیم نشود، ممکن است صفحه هنگام بارگیری ویدئو چشمک بزند.
عنصر  <source> به شما این امکان را می دهد که فایل های ویدئویی جایگزین را که  در مرورگر از آنها انتخاب می کنید، مشخص کند. مرورگر از اولین فرمت شناخته شده استفاده خواهد کرد.
متن بین  تگ های   <video> و  </ video> فقط در مرورگرهایی که از عنصر <video>  پشتیبانی نمی شود نمایش داده می شود.

 

HTML <video> Autoplay

برای شروع یک ویدیو به طور خودکار از ویژگی 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 کار نمی کند.

 

HTML Video –  پشتیبانی مرورگر

در HTML5، ۳ فرمت ویدئو پشتیبانی شده وجود دارد: MP4، WebM، و Ogg.
پشتیبانی مرورگر برای فرمت های مختلف:

BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaYES (from Opera 25)YESYES

 

HTML Video – Media Types

File FormatMedia Type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

 

HTML Video – Methods, Properties, and Events

HTML5  متد های DOM،   properties, و  events را برای عنصر  <video> تعریف می کند.
این اجازه می دهد تا فیلم ها را  لود ، play,  و  pause کنید، همچنین مدت زمان و volume تنظیم کنید.
همچنین رویدادهای DOM وجود دارد که میتوانند وقتی که  یک ویدیو شروع به پخش میکند، متوقف شده است و غیره به شما اطلاع دهند.

تگ های ویدئویی  html5

تگتوضیح
<video>یک ویدئو یا فیلم را تعریف می کند.
<source>برای عناصر رسانه ای مثل <video> و <audio> منابع چند رسانه ای را تعریف می کند.
<track>یک مسیر متنی را برای پخش کننده های رسانه ای تعریف می کند.
برچسب ها

دیدگاه یا سوال خود را با ما درمیان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره رایگان کسب و کار اینترنتی

10 جلسه به همراه فایل صوتی و ویدیویی
همین حالا شروع کنید
تا امروز بیش از 4000 نفر در این دوره شرکت کرده‌اند
بستن پیام
هفته‌نامه بهترین ایده

به جمع 30,000 مشترک ما بپیوندید!

اشتراک رایگان
همین حالا یک ویدیو آموزشی دریافت کنید
بستن