پخش ویدئو در 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

 

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

حتما بخوانید:  HTML Iframes

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

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

منبع نوشته:w3schools.com

دیدگاه‌تان را ثبت کنید:

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

17 − دوازده =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی