پخش ویدئو در html
پخش ویدئو در html به چه صورت انجام می شود؟ با چه عناصری می شود در html ویدئو پخش کرد؟
آموزش رسانه html درس دوم
پخش ویدئو در html : قبل از html5 ، یک ویدئو می توانست فقط با یک افزونه در مرورگر نمایش داده شود (مثل فلش ) . عنصر <video> در html5 یک روش استاندارد برای جاسازی ویدئو در یک صفحه وب مشخص می کند.
پشتیبانی مرورگر
اعداد در جدول اولین نسخه مرورگر را مشخص می کند که به طور کامل از عنصر <video> پشتیبانی می کند.
Element | کروم | اینترنت اکسپلورر | فایرفاکس | سافاری | آپرا |
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
عنصر <video> در html
برای نشان دادن یک ویدیو در HTML، از عنصر <video> استفاده کنید:
مثال :
[php]
<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>
[/php]
چگونه کار می کند
ویژگی کنترل، کنترل های ویدئویی مانند play, pause, و volume را اضافه می کند.
ایده خوبی است که همیشه شامل ویژگی های عرض و ارتفاع باشد.( width and height attributes) اگر ارتفاع و عرض تنظیم نشود، ممکن است صفحه هنگام بارگیری ویدئو چشمک بزند.
عنصر <source> به شما این امکان را می دهد که فایل های ویدئویی جایگزین را که در مرورگر از آنها انتخاب می کنید، مشخص کند. مرورگر از اولین فرمت شناخته شده استفاده خواهد کرد.
متن بین تگ های <video> و </ video> فقط در مرورگرهایی که از عنصر <video> پشتیبانی نمی شود نمایش داده می شود.
HTML <video> Autoplay
برای شروع یک ویدیو به طور خودکار از ویژگی Autoplay استفاده کنید:
مثال :
[php]
<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>
[/php]
ویژگی Autoplay در دستگاه های تلفن همراه مانند iPad و iPhone کار نمی کند.
HTML Video – پشتیبانی مرورگر
در HTML5، 3 فرمت ویدئو پشتیبانی شده وجود دارد: MP4، WebM، و Ogg.
پشتیبانی مرورگر برای فرمت های مختلف:
Browser | MP4 | WebM | Ogg |
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (from Opera 25) | YES | YES |
HTML Video – Media Types
File Format | Media Type |
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML Video – Methods, Properties, and Events
HTML5 متد های DOM، properties, و events را برای عنصر <video> تعریف می کند.
این اجازه می دهد تا فیلم ها را لود ، play, و pause کنید، همچنین مدت زمان و volume تنظیم کنید.
همچنین رویدادهای DOM وجود دارد که میتوانند وقتی که یک ویدیو شروع به پخش میکند، متوقف شده است و غیره به شما اطلاع دهند.
تگ های ویدئویی html5
تگ | توضیح |
<video> | یک ویدئو یا فیلم را تعریف می کند. |
<source> | برای عناصر رسانه ای مثل <video> و <audio> منابع چند رسانه ای را تعریف می کند. |
<track> | یک مسیر متنی را برای پخش کننده های رسانه ای تعریف می کند. |
دیدگاهتان را بنویسید