آنچه یک طراح سایت باید از ویدئو HTML5 بداند

خانه / آموزشی / آنچه یک طراح سایت باید از ویدئو HTML5 بداند

آنچه یک طراح سایت باید از ویدئو HTML5 بداند

von طراحی سایت منسیکس Facebook Google+
در آموزشی
0

HTML5

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

در سال های گذشته مدیا پلیرهای بر پایه فلش برای جریان در وب کافی بودند. و این تکنولوژی هنوز هم برای پشتیبانی از مرورگرهای قدیمی ضروری است. اما خوشبتانه استانداردهای جدید پیشرفت کرده اند. و ظرفیت های ویدئو در HTML5 درها را برای ده ها فرصت جدید برای طراحی وب سایت خلاق باز می کند.
در این مقاله به بیان چند نکته اساسی درباره ویدئوها در HTML5 که دانستنش برای طراحان سایت لازم است می پردازیم:

1.انواع رسانه

وقتی برای طراحی سایت با فلش پلیر کار می کنید معمولا همه فرمت های ویدئویی که می توانید استفاده کنید. به فرمت flv. منحصر می شود. در حالیکه بیشتر فایل های flv نمی توانند کیفیت فایل را در حد فرمت های پیشرفته تر حفظ کنند. 3 فرمت مهم فایل ویدئویی که توسط HTML5 پشتیبانی می شوند عبارتند از: MP4, WebM, Ogg/Ogv
فایل های MPEG-4 عموما به صورت H.264 کد می شوند. تا امکان اجرا در بخش سوم فلش پلیر را داشته باشند. به این معنی که نیازی به ایجاد و نگهداری فرمت flv فایل مورد نظر درفلش پلیر نیست و به نوعی با یک آدرس دهی غیر مستقیم می توان این فایل ها را در فلش پلیر اجرا کرد.

H.264 یا AVC (کدگذاری پیشرفته ویدئو) یک استاندارد برای فشرده سازی فایل های ویدئو است. که در حال حاضر رایج ترین فرمت برای ضبط ، فشرده سازی و پخش فایل های ویدئویی با کیفیت بالا می باشد.

WebM و Ogg دو تا از جدیدترین انواع فایل مرتبط با ویدئو در HTML5 هستند. Ogg از یکی دیگر از استانداردهای کدگذاری به نام Theora استفاده می کند. که بر اساس استانداردهای متن باز فرمت فایل های صوتی می باشد. فایل های Ogg می توانند با پسوندهای .ogg یا .ogv ذخیره شوند.

WebM پروژه ای است که توسط گوگل ایجاد شده است . این فرمت در اپرا ، گوگل کروم و فایرفاکس 4+ و اخیرا در اینترنت اکسپلورر9 پشتیبانی می شود. WebM هنوز در بین بیشتر طراحان وب حرفه ای ناشناخته است ولی پیشتاز فرمت های ویدئویی در آینده ویدئو های وب می باشد.

2.پشتیبانی از مرورگر

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

  •  فایرفاکس – WebM, Ogg
  •  گوگل کروم – WebM, Ogg
  •  اپرا WebM, Ogg
  •  سافاری – MP4
  •  اینترنت اکسپلورر 9 – MP4
  •  اینترنت اکسپلورر 6 تا 8 – HTML5 را پشتیبانی نمی کنند ، فقط فلش !

همانطور که قبلا هم ذکر شد اکثر فلش پلیرها، فایل های MP4 را که به صورت H.246 کد می شوند را پشتیبانی می کنند. به این ترتیب،هر کدام از این مرورگرها MP4+Flash را به عنوان یک گزینه دارند. بنابراین شما فقط نیاز به ایجاد 2 فرمت ویدئویی متفاوت برای پشتیبانی تمام مرورگرها دارید. MP4 برای IE9 و سافاری و یکی از فرمت های WebM یا Ogg برای سایر مرورگرها.

به عنوان یک پیشنهاد از نظر گروه منسیکس، استفاده از فرمت WebM سیار منطقی تر به نظر می رسد. چرا که در پشت این پروژه اسامی بزرگی مثل گوگل حضور دارند و محبوبیت و کشش بسیاری در اجتماع HTML5 به دست آورده است. درست است که از فرمت های  Ogg/Ogv نیز پشتیبانی می شود. اما احتمالا این فرمت محبوبیتش را به خاطر حجم کمتر فایل های WEbM از دست خواهد داد.

3. قرار دادن ویدئوهای HTML5 در طراحی سایت شما

خب حالا بهتر است نگاهی به قواعد مورد نیاز برای قرار دادن یک کد ساده بیاندازیم . تمام چیزی که لازم داریم تگ HTM5 video برای ارجاع آدرس فیلم می باشد.
<video width=”320″ height=”240″ controls autoplay poster=”/img/scene-preview.jpg”>
<source src=”/mov/scene.mp4″ type=”video/mp4″>
<source src=”/mov/scene.webm” type=”video/webm”>
Sorry, your browser doesn’t support HTML5 video.
</video>

توجه کنید که ویژگی های controls و autoplay نیاز به مقداردهی ندارند و ویژگی poster باعث می شود عکسی را روی پخش کننده ویدئو قبل از بارگذاری فایل ویدئویی به عنوان پیش نمایش فایل قرار دهد.
توصیه می شود از هر دو فرمت WebM و MP4 را در کد استفاده کنید ولی اگر هیچ کدام از آنها لود نشد خطایی مبنی بر بروزرسانی مرورگر برای کاربر نمایش داده شود.

4. ارائه جانشین فلش (Offering A Flash Fallback)

مثال بالا برای تمام مرورگرهای منطبق بر استانداردهای وب عالی است. ولی باید این موضوع را نیز در نظر بگیریم که دنیا همیشه همگام با تکنولوژی نیست. ما باید به کاربرانی که از نسخه های قدیمی تر مرورگر ها به ویژه اینترنت اکسپلورر استفاده می کنند نیز حمایت کنیم. بهترین راه برای رسیدن به این هدف در طراحی سایت کرج خود استفاده از یک فلش پلیر یدکی است که می تواند با تگ embed یا تگ object اضافه شود و به یک فایل .swf ارجاع داده شود. JW Player و Flowplayer دو نمونه متن باز هستند که می توانید از آنها استفاده کنید.

اگر بخواهیم کد بالا را به نحوی تغییر دهیم که شامل یک فلش پلیر یدکی هم باشد تا از مرورگرهای نسخه های پایین تر هم پشتیبانی کند ، به صورت زیر می شود:

<video width=”320″ height=”240″ controls autoplay poster=”/img/scene-preview.jpg”>
<source src=”/mov/scene.mp4″ type=”video/mp4″>
<source src=”/mov/scene.webm” type=”video/webm”>
    <object type=”application/x-shockwave-flash” data=”/mov/player.swf”
    width=”320″ height=”240″>
     <param name="allowfullscreen" value="true"> 
     <param name="allowscriptaccess" value="always">  
     <param name="flashvars" value="file=/mov/scene.mp4">  
     <!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]-->  
     <img src="/img/scene-preview.jpg" width="320" height="240" alt="Video">
     <p>Sorry but your browser doesn't support HTML5 video.</p>  
}
. </object>  
</video>

5. پشتیبانی از تلفن های همراه

این موضوع از زمانیکه صنعت موبایل بسیار جوان بود تا کنون بسیار مورد بحث بوده است. اپل با پشتیبانی از MP4 در Mac و دستگاه های iOS خود پیش آمد. در واقع شما میتوانید متناسب با دستگاه فایل های ویدئویی .MP4 را روی ipad، iphone یا Ipod خود با یک رابط گرافیکی استاندارد اجرا کنید و این مسئله سهم زیادی از بازار را پوشش می دهد.

اخیرا دستگاه های آندروید برای رسیدن به سطح مشابهی از پشتیبانی ، دوره سختی را داشته اند. اگرچه گوگل در نهایت فرمت .mp4 را که در حال حاضر تقریبا روی دستگاه تمام کاربران تلفن همراه وجود دارد، پذیرفته است و از آنجا که در تلفن های همراه فلش به عنوان یک گزینه در نظر گرفته نمی شو، MP4 بهترین راه حل ممکن است. به همین دلیل شما باید اول فایل .MP4 را در کد قرار دهید چون دستگاه های iOS  می توانند فایل را فورا تشخیص دهند.

6. مدیریت کنترل های پلیر

روش هایی در طراحی سایت با html5 وجود دارد که شما می توانید از آنها برای مدیریت کنترل های پخش کننده ویدئو HTML5 استفاده کنید. تمام این روش ها می تواند در javaScript با استفاده از فراخوانی مجموعه ای متدها انجام شود.

شما می توانید ویژگی های خاص رسانه های ویدئویی مثل muted یا currentTime را فراخوانی کنید و اقداماتی مانند تاریک کردن پس زمینه یا نمایش تبلیغات را بر اساس این معیارها با دستکاری DOM در jQuery انجام دهید. امکان سفارشی کردن رابط کاربری کنترل ویدئو یک امتیاز عالی است که ودئوهای HTML5 را قدرتمندتر می کند.

7. تبدیل فرمت ویدئو

این هم موضوع مهم دیگری است که به احتمال زیاد افرادی که با تکنولوژی آشنایی بیشتری دارند کمتر به مشکل بر می خورند و گیج می شوند. وقتی می خواهید وب سایت خود را به روز رسانی کنید و باید فایل ویدئویی خود را به فرمت مورد نظر تبدیل کنید شاید کمی مشکل به نظر بیاید ولی در واقع این اصلا سخت نیست.
برایMP4 که بزرگترین اولویت شما است، می توانید از HandBrake استفاده کنید که یک راه حل رایگان و متن باز می باشد.

و قابل اجرا بر روی هر 3 سیستم عامل بزرگ است. پشتیبانی از H.264 و تعدادی از کدک های دیگر این وب سایت را به بهترین گزینه برای کاربران طرفدار ابزارهای رایگان است. در صورتی که به دنبال ابزارهای غیر رایگان هستید ، توصیه می شود از Xilisoft converter برای Mac استفاده کنید. همچنین Miro Video Converter ابزاری رایگان برای windows و OS X است که فایل های WebM را با کیفیتی بالا تولید میکند. همچنین می تواند فایل Ogg را با کیفیتی عالی انجام دهد.

8. ساخت پخش کننده تحت وب

فرمت های ویدیویی با مشخصات HTML5 هنوز برای توسعه دهندگان جدید است. پروتکل های بازی وجود دارند که فقط منتظر هستند که با اجازه کنترل های سفارشی، اسلایدر ها، آیکن های play/pause، اجرا شوند. علاوه بر راه نوشتن کد برای یک پلیر که ممکن است کمی برای تازه کارها سخت باشد فریم ورک هایی وجود دارد که شما می توانید به سادگی پلیر خود را در آن طراحی کرده و بسازید. مانند فریم ورک slideshare که ابزار خوبی برای ایجاد یک پلیر HTML5 است.

9.کتابخانه VideoJS

VideoJS یک راه حل محبوب برای پخش ویدئو HTML5 است. تمام آنچه که نیاز دارید یک فایل جاوا اسکریپت و یک فایل CSS است که در صفحه قرار داده می شود. سپس کد استاندارد HTML5 را با تعدادی کلاس های اضافه برای ظاهر پلیر مینویسید. یک نمونه کد را در زیر مشاهده می کنید:

<video class=”video-js vjs-default-skin” controls preload=”auto”
width=”640″ height=”264″ poster=”my_video_poster.png” data-setup=”{}”>
<source src=”my_video.mp4″ type=”video/mp4″>
 <source src=”my_video.webm” type=”video/webm”>
</video>

معرفی تگ های معنایی در زبان HTML5 در طراحی سایت

  • <header> and <footer>
  • <nav> برای تمامی منو ها
  • <aside> برای منوهای کناری
  • <article> برای زمانی که محتوا بصورت بلاگ باید در صفحات درج گردد
  • <section> شبیه به div می باشد اما بیشتر مبتنی بر محتواست
  • <audio> and <video> پخش فایلهای صوتی و تصویری
  • <canvas> امکان طراحی المان های گرافیکی با استفاده از یک زبان اسکریپت نویسی مجزا
  • <embed> جای گذاری محتوا یا اپلیکیشن خارجی در صفحه

ویژگی‌های HTML5

ویژگی‌های HTML5 شامل امکانات و ابزارهای متنوعی است که به توسعه‌دهندگان وب امکانات جدیدی را برای ایجاد طراحی سایت در کرج و برنامه‌های وب ارائه می‌دهد. برخی از ویژگی‌های HTML5 به شرح زیر است:

  1. تگ‌های ساختاری: HTML5 شامل تگ‌های جدیدی مانند <header>, <footer>, <nav>, <section> و <article> است که به توسعه‌دهندگان کمک می‌کند تا وب‌سایت‌ها را به طور منطقی‌تر و سازمان‌یافته‌تر طراحی کنند.
  2. پشتیبانی از ویدیو و صدا: HTML5 قابلیت پخش ویدیو و صدا را بدون نیاز به استفاده از افزونه‌های جانبی مانند Flash فراهم می‌کند. این ویژگی با افزایش امکانات وب و افزایش تعامل با کاربران همراه است.
  3. Canvas: امکان استفاده از تگ <canvas> در HTML5 به توسعه‌دهندگان این امکان را می‌دهد که گرافیک و تصاویر پویا و تعاملی را به صورت برنامه‌نویسی‌شده در مرورگر ایجاد کنند.
  4. پشتیبانی از جدول‌ها و فرم‌ها: HTML5 ویژگی‌های جدیدی برای ایجاد جدول‌ها و فرم‌ها ارائه می‌دهد که برای طراحی وب‌سایت‌های پویا و برنامه‌های وب تعاملی بسیار مفید است.
  5. تگ‌های جدید برای بهبود دسترسی: HTML5 شامل تگ‌های جدیدی مانند <figure>, <figcaption>, <time> و <progress> است که به توسعه‌دهندگان کمک می‌کند تا محتواهای خود را بهبود بخشند و دسترسی کاربران را بهبود بخشند.
  6. پشتیبانی از قابلیت‌های جدید CSS3: HTML5 با CSS3 ترکیب می‌شود تا امکانات و قابلیت‌های جدیدی مانند انیمیشن‌ها، شیب‌ها، و ترکیب‌های رنگی پیشرفته را به توسعه‌دهندگان برای طراحی وب‌سایت‌های با ظاهر جذاب و مدرن ارائه دهد.
  7. پشتیبانی از ذخیره‌سازی محلی: HTML5 قابلیت ذخیره‌سازی داده‌های محلی را با استفاده از ویژگی‌هایی مانند Web Storage و IndexedDB فراهم می‌کند که امکانات آفلاین و برنامه‌های وب بهبود می‌یابد.
  8. پشتیبانی از Responsive Web Design (طراحی واکنش‌گرا): HTML5 بهبودهایی را در خصوص سازگاری با دستگاه‌های مختلف ارائه می‌دهد، که به توسعه‌دهندگان این امکان را می‌دهد که وب‌سایت‌ها را به طور خودکار با توجه به اندازه و نوع دستگاه کاربران بهینه‌سازی کنند.

و در انتها بسیار مشتاقیم تا نظرات و پیشنهادات و ایده های خود را درباره آینده ویدئوها در وب و HTML5 با ما و سایر کاربران در میان بگذارید.

لطفا به این نوشته امتیاز دهید
[کل: 3 میانگین: 5]
برچسب‌ها:, , , , ,