پخش فیلم با استفاده تگ video در html5 - کد پخش فیلم

پخش فیلم با استفاده تگ video در html5 - کد پخش فیلم

در این پست سعی داریم آموزش پخش فیلم با استفاده تگ video در html5 را برای شما عزیزان آماده کنیم. با استفاده از این تگ شما می توانید به راحتی و آسانی هرچه تمام تر فیلم و کلیپ های مورد نظر خودتان را داخل سایت خود قرار بدهید. با ما همراه باشید.

خب طبق معمول ابتدا ساختار کلی کد را برای تان  می نویسیم و سپس به توضیح آن می پردازیم :

<video width="640" height="480" poster="img.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

اگر توجه داشته باشید به راحتی متوجه می شوید که در کد بالا تگ video را نوشتیم و سپس با استفاده از width و height به ترتیب عرض و طول فایل ویدیویی را نیز مشخص نمودیم، بعد از این کار با استفاده از مقدار poster آدرس تصویری که به عنوان کاور فیلم یا ویدیو می باشد را دادیم (کاور همان تصویری است که قبل از شروع و پخش فیلم نمایان می شود)، سپس با controls قسمت کنترل برای پلیر خودمان را فراخوانی کردیم.

اگر خواستیم پلیر ما بدون پوستر پیش فرض باشد از کدهای زیر استفاده می کنیم که در این صورت نیازی به درج آدرس تصویر در داخل کد نیست :

<video width="640" height="480" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
 Your browser does not support the video element.
​</video>

توجه داشته باشید که سطر چهارم را برای این اضافه کردیم که اگر مرورگری این فرمت ویدئو را ساپورت نکرد برای او این متن نمایش داده شود، شما می توانید بجای آن از هر عبارت دیگری استفاده نمایید.

خب اکنون برای اینکه فایل مد نظر در تمام مرورگرها پخش شود باید از دو فرمت MP4 و OGG استفاده کنیم و در src هم آدرس فایل (همان فیلم یا کلیپ مورد نظر) خودمان را قرار می دهیم.