ویدئوها و فایل های صوتی در HTML و طراحی سایت

در این مقاله شما با فرمت های قابل استفاده ویدئوها و فایل های صوتی در طراحی سایت و نحوه قرار دادن آن در صفحات وب آشنا خواهید شد.

برای اضافه کردن ویدیو به سایت خود، دو موضوع کلیدی برای فهمیدن وجود دارد: فرمت های فایل و پخش کننده های ویدئویی یا پلاگین ها.

فرمت ها

فیلم ها در فرمت های مختلف (BluRay، DVD، VHS) در دسترس هستند. برای پخش آنلاین، فرمت های بیشتری وجود دارند (مانند AVI، Flash video، MPEG، Ogg و غیره) که در صورت نیاز به ویدئو در حین طراحی سایت می توانید از آن ها استفاده کنید.

همانطور که دستگاه پخش DVD شما یک کاست VHS را پخش نمی کند، مرورگر ها نیز فرمت های ویدیویی که پشتیبانی می کنند، متفاوت است و ممکن است همه انواع فرمت ها را باز نکنند. برای اینکه کاربران بتوانند ویدیو شما را آنلاین ببینند، ممکن است لازم باشد که آن را به فرمت دیگری تبدیل کنید.

پخش کننده ها یا پلاگین ها

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

مرورگرهای که به تازگی ایجاد می شوند از المان <video> که در نسخه HTML5 معرفی شده است، پشتیبانی می کنند. البته شما نباید مطمئن شوید که تمام بازدیدکنندگان سایت شما از مرورگرهای جدید استفاده می کنند.

در زمان طراحی وب سایت، بهترین راه برای اطمینان داشتن از پخش ویدئو در صفحه سایت، استفاده از المان <video> برای مرورگرهایی که از آن پشتیبانی می کنند و استفاده از Flash video برای آن هایی که از نسخه HTML5 پشتیبانی نمی کنند، می باشد. این بدین معنی است که برای آپلود هر ویدئو شما نیاز دارید که حداقل دو فرمت مختلف WebM و MP4 را استفاده کنید.

استفاده از سرویس های میزبانی ویدئو

ساده ترین راه برای اضافه کردن یک ویدیو به سایت شما این است که ویدیو را به یک سایت مانند YouTube یا Vimeo آپلود کنید و از ویژگی های ارائه شده در سایت خود برای جاسازی ویدیو در صفحه، استفاده کنید.

مزایا

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

معایب

  • ویدئوی شما در سایت میزبان ویدئو در دسترس خواهد بود. پس اگر می خواهید ویدئوی شما به صورت انحصاری در سایت شما در دسترس باشد و در سایر سایت ها قابل مشاهده نباشد باید شما باید آن را روی هاست مربوط به وب سایت خودتان آپلود کنید و پخش کننده را به صفحه اضافه کنید.
  • برخی از خدمات میزبانی ممکن است محدودیت هایی برای ویدئوی شما ایجاد کنند. به طور مثال، اغلب استفاده از تبلیغات در ویدئوی شما را ممنوع می کنند (که این تبلیغات می توانند برای شما راه درآمدی باشند).
  • برخی از خدمات میزبانی، قبل از اینکه ویدئوی شما شروع شود، تبلیغات خود را پخش می کنند، یا اینکه حین پخش ویدئو، تبلیغات را روی صفحه ویدئوی شما می گذارند.
  • کیفیت آپلود ویدئو نیز می تواند یکی از عوامل محدود کننده باشد.
  فروشگاه ساز حرفه ای و رایگان

آماده کردن ویدئو برای صفحات وب

علیرغم اینکه عنصر  <video>بسیار جدید است، استفاده از آن بسیار گسترده است. در اینجا برخی از مسائل کلیدی مورد توجه قرار می گیرند:

پشتیبانی: قبلاً نیز عنوان شد که همه مرورگرها از این المان پشتیبانی نمی کنند، پس بهترین راه استفاده ترکیبی از این المان و Flash video به طور همزمان می باشد.

فرمت ها: همه مرورگرها از تمام فرمت های ویدئویی پشیبانی نمی کنند، بنابراین شما باید از چندین فرمت استفاده کنید. به منظور پشیبانی کردن اکثر مرورگرها از فرمت های H264 (برای اینترنت اکسپلورر و سافاری) و WebM (برای اندروید، کروم، فایرفاکس و اُپرا) استفاده کنید.

کنترل ها: هر مرورگر شیوه ای متفاوت برای نشان دادن دکمه های کنترل ویدئو دارد. که شما می توانید ظاهر این کنترل ها را با استفاده از جاوا اسکریپت تغییر دهید (البته بحث آن فراتر از این مقاله است).

افزودن ویدئو به صفحه وب

<video>

عنصر <video> تعدادی ویژگی دارد که به شما امکان کنترل پخش ویدئو را می دهد:

src

این ویژگی مسیر ویدئو را مشخص می کند.

poster

این ویژگی مربوط به یک تصویر است که قبل از دانلود فیلم برای کاربر قابل مشاهده می باشد.

width, height

این ویژگی ها اندازه پخش کننده را به پیکسل مشخص می کند.

controls

هنگامی که این ویژگی استفاده می شود، مرورگر باید دکمه های کنترل مربوط به ویدئو را نمایش دهد.

autoplay

اگر این خصوصیت بکار رود، ویدئو به طور خودکار دانلود شده و اجرا می شود.

loop

در صورت استفاده از این ویژگی، هر بار که ویدئو به پایان می رسد، دوباره شروع به پخش می کند.

preload

این ویژگی به مرورگر می گوید که هنگام بارگذاری صفحه چه باید بکند. و می تواند یکی از سه مقدار زیر را داشته باشد:

  • none

تا زمانی که کاربر دکمه پخش را فشار نداده، مرورگر نباید ویدئو را بارگذاری کند.

  • auto

مرورگر باید هنگام بارگذاری صفحه، ویدیو را دانلود کند.

  • metadata

مرورگر باید فقط اطلاعاتی مانند حجم، قاب اولیه و مدت زمان را نمایش دهد.

<!DOCTYPE html>

 <html>

 <head>

  <title>Adding HTML5 Video</title>

 </head>

 <body>

  <video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300" preload   controls loop>

   <p>A video of a puppy playing in the snow</p>

  </video>

 </body>

 </html>

اگر مرورگر عنصر یا فرمت مورد استفاده را پشتیبانی نکند، هر آنچه که بین تگ آغازین و پایانی قرار دارد را نمایش می دهد (که بهتر است توضیحی در مورد محتوای ویدئو باشد).

  فرم ها در HTML قسمت دوم

طراحی سایت

منابع چندگانه ویدئو

<source>

برای تعیین محل فایل مورد نظر از عنصر <source> درون المان <video> استفاده می شود (این المان باید جایگزین ویژگی src که در تگ آغازین قرار می گیرد، شود).

شما همچنین می توانید از چندین عنصر <source> برای تعیین فرمت های مختلف ویدئو استفاده کنید.

(به دلیل مشکلی که در iPad وجود دارد، شما باید اولین فرمت را، MP4 قرار دهید، وگرنه اجرا نمی شود.)

src

این ویژگی مسیر ویدئو را تعیین می کند.

type

شما باید از این ویژگی استفاده کنید تا به مرورگر فرمت فایل را بگوئید.

<!DOCTYPE html>

 <html>

 <head>

  <title>Multiple Video Sources</title>

 </head>

 <body>

  <video poster="images/puppy.jpg" width="400" height="320" preload controls loop>

   <source src="video/puppy.mp4" type='video/mp4' />

   <source src="video/puppy.webm" type='video/webm' />

   <p>A video of a puppy playing in the snow</p>

  </video>

 </body>

 </html>

افزودن فایل صوتی به صفحه وب

<audio>

نسخه HTML5 المان <audio> را برای افزودن فایل های صوتی به صفحات، هنگام طراحی سایت معرفی کرده است. همانند ویدئو در HTML5، مرورگرها فرمت های متفاوتی برای فایل های صوتی را انتظار دارند.

المان <audio> دارای تعدادی ویژگی است که به شما امکان کنترل پخش صوتی را می دهد:

src

این ویژگی مسیر مسیر فایل صوتی را مشخص می کند.

controls

هنگامی که این ویژگی استفاده می شود، مرورگر باید دکمه های کنترل مربوط به فایل صوتی را نمایش دهد.

autoplay

اگر این خصوصیت بکار رود، صوت به طور خودکار دانلود شده و اجرا می شود.

loop

در صورت استفاده از این ویژگی، هر بار که فایل صوتی به پایان می رسد، دوباره شروع به پخش می کند.

preload

این ویژگی به مرورگر می گوید که هنگام بارگذاری صفحه چه باید بکند. و می تواند یکی از سه مقدار زیر را داشته باشد:

  • none

تا زمانی که کاربر دکمه پخش را فشار نداده، مرورگر نباید فایل صوتی را بارگذاری کند.

  • auto

مرورگر باید هنگام بارگذاری صفحه، فایل صوتی را دانلود کند.

  • metadata

مرورگر باید فقط اطلاعاتی مانند حجم، قاب اولیه و مدت زمان را نمایش دهد.

<!DOCTYPE html>

 <html>

 <head>

  <title>Adding HTML5 Audio</title>

 </head>

 <body>

  <audio src="audio/test-audio.ogg" controls autoplay>

   <p>This browser does not support our audio format. </p>

  </audio>

 </body>

 </html>

طراحی سایت

منابع چندگانه فایل های صوتی

<source>

برای تعیین محل فایل مورد نظر از عنصر <source> درون المان <audio> استفاده می شود (این المان باید جایگزین ویژگی src که در تگ آغازین قرار می گیرد، شود).

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

MP3: سافاری +5، کروم +6، IE9

Ogg Vorbis: فایرفاکس 3.6، کروم 6، اپرا 1.5 و IE9

بنابراین شما نیاز به ارائه دو فرمت برای پوشش دادن تمام مرورگرهایی که از المان <audio> پشتیبانی می کنند، دارید.

src

این ویژگی مسیر فایل صوتی را تعیین می کند.

type

شما باید از این ویژگی استفاده کنید تا به مرورگر فرمت فایل را بگوئید.

<!DOCTYPE html>

 <html>

 <head>

  <title>Multiple Audio Sources</title>

 </head>

 <body>

  <audio controls autoplay>

   <source src="audio/test-audio.ogg" />

   <source src="audio/test-audio.mp3" />

   <p>This browser does not support our audio format. </p>

  </audio>

 </body>

 </html>

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

به وبلاگ توسعه دهندگان وب خوش آمدید .

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