اجرا کردن ویدئو توسط html5 در وب سایت اجرا کردن ویدئو توسط html5 در وب سایت

رتبه این آیتم
اجرا کردن ویدئو توسط html5 در وب سایت
رتبه 3 در 12 رای از 1 تا 5

قرار دادن ویدئو در صفحه توسط html5 بسیار آسان است و از قرار دادن تصویر در صفحه سخت تر نیست. در این مقاله مزایای استفاده از ابزار اجرا کننده داخلی ویدئو مرورگر بحث خواهد شد. به راحتی می توانیم با استفاده از تگ <video> و بدون استفاده از هیچ پلاگین خارجی ویدئو را اجرا نماییم.

پیش نیازها

می بایست از Chrome, Safari یا Internet Explorer 9+ استفاده نمایید. در مرورگرهای Firefox و Opera این کد به دلیل تداخل با ابزارهای داخلی مرورگر کار نمی کند. برای انجام این کار می بایست فرمت ویدئو شما .mp4 باشد.

ایجاد فریم ورک اصلی

کد زیر برای ایجاد فریم ورک ویدئو پلیر می باشد. این کد یک لایه بندی ساده برای ویدئو می سازد. کد html چیزی است شبیه به این:

 
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">     
 <title>HTML5 Video Player</title>     
 <style>         
 body {                  font-family: sans-serif;                  border: 0;                  margin: 0;                  padding: 0;          }       
   header {                  text-align: center;          }        
  #player {                  display: table;                  width: 100%;                  padding: 4px;          }         
 #player > div {                  display: table-cell;                  vertical-align: top;          }      
</style> 
 </head>  
<body>      
<header>        
  <h1>HTML5 Video Player</h1>     
 </header>    
  <section id="player">         
 <div>                  <!-- The video will appear here-->        
  </div>      
</section>  
</body> 
 </html>

هم اکنون کادر ویدئو ایجاد گردید می بایست ویدئو به صفحه اضافه شود.

استفاده از تگ video برای اضافه نمودن ویدئو به صفحه

کد اضافه نمودن ویدئو به صفحه وب سایت کمی پیچیده تر از اضافه کردن تصویر به وب سایت می باشد برای اضافه کردن ویدئو به صفحه سایت می بایست از تگ <video> استفاده نمایید.

 
<video src="[ YOUR VIDEO ].mp4"  controls  width="720" height="480">
  
Your browser does not support the video element, please #D try <a href="videos/VID_20120122_133036.mp4">downloading the video instead</a>  
</video>

در بخش src می بایست آدرس فایل ویدئو داده شود. بخش controls اعلام می نماید که شما می خواهید ویدئو ابزارهای استاندارد کنترل ویدئو را داشته باشد. width و height نیز طول و عرض ویدئو در صفحه می باشند و در صورتی که مرورگر از المان <video> پشتیبانی ننماید متن داخل المان <video> نمایش داده می شود.

نتیجه

به طوری که می بیند وب در حال تغییر است و به طوری که می بینید قبلا برای نمایش ویدئو در سایت مجبور بودید از پلاگین های مختلف برای انجام این کار استفاده نمایید. ولی هم اکنون این کار توسط خود مرورگر انجام می شود. html5 به شما این قابلیت را می دهد که به آسانی ویدئو خود را در صفحه و توسط خود مرورگر نمایش دهید. البته در طراحی سایت خود در نظر داشته باشد که این کد فقط برای مرورگرهای مدرن سازگاری کامل دارد. برای آنکه ویدئو شما در تمامی مرورگرها اجرا شود می بایست از پلاگین ها به مانند فلش ویدئو پلیر استفاده نمایید.

13-اسفند-1392

نویسنده این مقاله می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.

شبکه اجتماعی های نویسنده اینستاگرام و لینکدین.

به اشتراک گذاری مطلب در

به اشتراک گذاری در فیس بوک به اشتراک گذاری در توئیتر به اشتراک گذاری در لینکدین

1 نظر

  • محمد حمادی پنج شنبه, 01 آذر 1397 10:34 پست شده توسط محمد حمادی

    با سلام و خسته نباشی من از کد بالا استفاده کردم و عالی بود فقط تنها چیزی که احتیاج دارم اینکه چنتا ویدیو میخوام لینک بذارم و پخش بشه یعنی کاربر هر کدوم از ویدیو های را بخواهد بزنه و پخش کنه چیزی شبیه به سایت زومجی قسمت تماشاخانه آیا امکانش هست اگر هست کدش رار برام قرار بدید ممنون میشم

يک نظر بدهيد

موارد ستاره دار الزامی هستند

طراحی سایت دارکوب | هاست دارکوب | دارکوب نام و علامت تجاری ثبت شده این مجموعه می باشد.
دارای مجوز از (سازمان نظام صنفی رایانه ای استان تهران) ، (رتبه 4 شورای عالی انفورماتیک کشور) ، (وزارت فرهنگ و ارشاد اسلامی)
آموزشگاه طراحی سایت و سئو با مجوز رسمی از سازمان فنی و حرفه ای کشور افتتاح شد
دارکوب به عنوان شرکت خلاق توسط معاونت علمی و فناوری ریاست جمهوری برگزیده شد