maryamsitedar
عضو جدید
قرار دادن ویدئو در صفحه توسط html5 بسیار آسان است و از قرار دادن تصویر در صفحه سخت تر نیست. در این مقاله مزایای استفاده از ابزار اجرا کننده داخلی ویدئو مرورگر بحث خواهد شد. به راحتی می توانیم با استفاده از تگ <video> و بدون استفاده از هیچ پلاگین خارجی ویدئو را اجرا نماییم.
[h=2]پیش نیازها[/h]می بایست از Chrome, Safari یا Internet Explorer 9+ استفاده نمایید. در مرورگرهای Firefox و Opera این کد به دلیل تداخل با ابزارهای داخلی مرورگر کار نمی کند. برای انجام این کار می بایست فرمت ویدئو شما .mp4 باشد.
[h=2]ایجاد فریم ورک اصلی[/h]کد زیر برای ایجاد فریم ورک ویدئو پلیر می باشد. این کد یک لایه بندی ساده برای ویدئو می سازد. کد 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>
[h=2]استفاده از تگ video برای اضافه نمودن ویدئو به صفحه[/h]کد اضافه نمودن ویدئو به صفحه وب سایت کمی پیچیده تر از اضافه کردن تصویر به وب سایت می باشد برای اضافه کردن ویدئو به صفحه سایت می بایست از تگ <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>
[h=2]نتیجه[/h]به طوری که می بیند وب در حال تغییر است و به طوری که می بینید قبلا برای نمایش ویدئو در سایت مجبور بودید از پلاگین های مختلف برای انجام این کار استفاده نمایید. ولی هم اکنون این کار توسط خود مرورگر انجام می شود. html5 به شما این قابلیت را می دهد که به آسانی ویدئو خود را در صفحه و توسط خود مرورگر نمایش دهید. البته در طراحی سایت خود در نظر داشته باشد که این کد فقط برای مرورگرهای مدرن سازگاری کامل دارد. برای آنکه ویدئو شما در تمامی مرورگرها اجرا شود می بایست از پلاگین ها به مانند فلش ویدئو پلیر استفاده نمایید.
منبع:
به اجرا درآوردن ویدئو توسط html5 در صفحات وب سایت