برگزیده های پرشین تولز

قرار دادن ویدیو و صدا در HTML5

amuzeshtak

کاربر تازه وارد
تاریخ عضویت
2 دسامبر 2017
نوشته‌ها
10
لایک‌ها
2
محل سکونت
ایران
در این مقاله میخوایم نحوه قرار دادن ویدیو و صدا و اتریبیوت های هر یک رو باهم دیگه بررسی کنیم .

با اضافه شدن تگ <video> و <audio> به HTML5 قرار دادن ویدوها و صداها در صفحات وب بسیار تسهیل شده که در زیر ابتدا تگ ویدیو رو بررسی میکنیم :

برای قرار دادن یک ویدیو به این صورت عمل میکنیم :

HTML:
<video width="320" height="240" controls>
  <source src="/movie.mp4" type="video/mp4">
  <source src="/movie.ogg" type="video/ogg">
مرور گر شما تگ ویدیو را پشتیبانی نمیکند
</video>

خب الان به بررسی قسمت های مختلف این کد بپردازیم:
1- ویژگی controls که در تگ ویدیو قرار داده شده کنترل های مختلف یک پلیر مانند play & pause رو اضافه میکند.
2- ویژگی های width و height ، عرض و ارتفاع ویدیو را مشخص میکند.
3-تگ source که داخل تگ ویدیو قرار داده شده آدرس ویدیو رو با اتریبیوت src دریافت میکند.
4- اتریبیوت type که در تگ source قرار دارد نوع ویدیو رو مشخص میکند که میتواند سه نوع داشته باشد :
  • MP4 : video/mp4
  • WebM : video/webm
  • Ogg : video/ogg
5- در صورتی که مرورگر کاربر از تگ ویدیو پشتیبانی نکند پیغامی که بعد از تگ source قرار داده شده به کاربر نشان داده میشود

یک سری از اتریبیوت های دیگه برای تگ ویدیو :
  • muted : ویدیو را به صورت پیش فرض بی صدا میکند
  • autoplay: در صورتی که این صفت قرار داده شود ویدئو به محض اینکه صفحه لود شود، خود به خود پخش می شود.
  • loop: در صورت وجود پس از اتمام نمایش ویدئو، پخش آن دوباره شروع می شود.
  • poster : با این اتریبیوت میتوان یک تصویر را به عنوان پوستر برای ویدیو قرار داد.
خب این از تگ ویدیو الان بپردازیم به قرار دادن صدا در HTML5 که میتونیم بگیم کاملا شبیه به تگ ویدیو عملیات انجام میشود:

برای قرار دادن یک صدا در HTML5 به این صورت عمل میکنیم :

HTML:
<audio controls>
  <source src="/horse.ogg" type="audio/ogg">
  <source src="/horse.mp3" type="audio/mpeg">
مرورگر شما از تگ audio پشتیبانی نمیکند
</audio>

تمامی قسمتهای تگ audio مشابه تگ video است فقط در قسمت type تگ source میتوان انواع زیر رو قرار داد :

  • MP3 : audio/mpeg
  • Ogg : audio/ogg
  • Wav : audio/wav
برای دیدن آموزش ویدیویی این مقاله میتونید به سایت آموزش تک مراجعه کنید.

موفق باشید.
 
بالا