Audio و Video در HTML5 برای طراحی سایت

۲۹ فروردین ۱۳۹۶

تگ ساده نمایش video به شکل زیر می باشد:

<video src="example.webm"></video>

برای دادن طول و ارتفاع از width و height استفاده می کنیم.

فعال کردن controls

برای نمایش کنترل ها به مثال زیر توجه کنید:

<video src="example.webm" width="375" height="280" controls></video>

فعال کردن autoplay attribute

برای نمایش ویدوئو بدون زدن دکمه play از autoplay attribute استفاده می کنیم. به مثال زیر توجه کنید:

<video src="example.webm" width="375" height="280" controls autoplay></video>

فعال کردن loop attribute

برای نمایش ویدوئو بصورت مکرر از loop attribute استفاده می کنیم. به مثال زیر توجه کنید:

<video src="example.webm" width="375" height="280" controls autoplay loop></video>

فعال کردن poster attribute

برای نمایش پوستر قبل و بعد از نمایش ویدوئو از poster attribute استفاده می کنیم. به مثال زیر توجه کنید:

<video src="example.webm" width="375" height="280" controls poster="teaser.jpg"></video>

فعال کردن muted attribute

برای خاموش کردن ویدوئو از muted attribute استفاده می کنیم. به مثال زیر توجه کنید:

<video src="example.webm" width="375" height="280" poster= "teaser.jpg" muted></video>

پشتیبانی از چندین فرمت video

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

<source src="example.mp4" type="video/mp4">
<source src="example.webm" type="video/webm"> 
<source src="example.ogv" type="video/ogg">

Source Order

برای دسته بندی استفاده از نوع container/codec به صورت زیر عمل می کنیم:

<video width="375" height="280" poster="teaser.jpg" audio="muted"> <source src="example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="example.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="example.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>

اگر مرورگر شما از HTML 5 را پشتیبانی نمی کند؟

اگر مرورگر شما از HTML 5 را پشتیبانی نمی کند به صورت زیر عمل می کنیم:

<video width="375" height="280" poster="teaser.jpg" audio="muted">
  <source src="example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="example.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="example.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <!-- fallback to Flash: -->
  <object width="375" height="280" type="application/x-shockwave-flash" data="mediaplayer-5.5/player.swf">
    <param name="movie" value="mediaplayer-5.5/player.swf">
    <param name="allowFullScreen" value="true">
    <param name="wmode" value="transparent">
    <param name="flashvars" value="controlbar=over&amp;image=images/teaser.jpg&amp;file=example.mp4">
    <!-- fallback image -->
    <img src="teaser.jpg" width="375" height="280" alt="" title="No video playback capabilities">
  </object>
</video>

نویسنده:حمید شاه محمدی

تعداد مشاهده خبر:(485)

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

میانگین امتیازات:

تعداد رای دهندگان: {{ count }}

نظرات:

نویسنده:{{ com.name }}