آموزش HTML5 و CSS3 تگهای video و audio | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

در این قسمت از آموزش فیلم HTML5 و CSS3 نحوه بارگذاری یا پخش فایل های ویدیویی ( تگ ویدئو ) و صوتی در صفحات وب را خدمت شما آموزش خواهیم داد.

قبل از HTML 5 از تگ های object و embed برای نمایش فایل های ویدیویی استفاده می شود ولی در HTML 5 از تگ ویدئو استقاده می کنیم .

تگهای video و audio

به مثال زیر دقت نمایید:

تگ Video 

این تگ یک نوع تگ فرزند دار است و برای آدرس دادن سورس فیلم از تگ Source داخل تگ ویدئو استفاده می کنیم .
تگ Video دارای شناسه های مختلفی است که در ادمه آن ها را مشاهده خواهید کرد :

شناسه Controls :

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

شناسه autoplay :

این در تگ ویدئو شناسه باعث می شود که در هنگام لود شدن صفحه فیلم به صورت خودکار پخش شود .

شناسه muted :

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

بیشتر بخوانید :
آموزش طراحی قالب html و css جلسه 2 طراحی header سایت | پاسخ وردپرس |

شناسه Poster :

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

شناسه Loop :

این شناسه باعث می شود اگر فیلم تمام شد دوباره پخش شود .

نکته :

تمام شناسه های گفته شده میتوانید داخل تگ Audio هم قابل استفاده است

شناسه Width و Height :

برای اینکه اندازه فیلم رو تعیین کنیم از این شناسه ها استفاده می کنیم و طول و عرض فیلم را مشخص می کنیم .

تگ ویدیو video

سورس کد HTML  Video:

فقط دقت کنید به جایfilm.mp4 آدرس فایل خودتون رو فرار بدید و در قسمت Type هم نوع و فرمت فایل صوتی را مشخص می کنیم و اگر از فرمت های دیگری استفاده کردید حتما در قسمت type هم نوع آن را مشخص کنید در ضمن از فرمت های دیگر همان فایل می توانید به صورت همزمان استفاده کنید .

بیشتر بخوانید :
آموزش HTML و CSS آموزش خاصیت position در CSS | پاسخ وردپرس |

تگ Audio

تگ Audio

سورس کد HTML audio:

فقط دقت کنید به جای music.mp3 آدرس فایل خودتون رو فرار بدید و در قسمت Type هم نوع و فرمت فایل صوتی را مشخص می کنیم و اگر از فرمت های دیگری استفاده کردید حتما در قسمت type هم نوع آن را مشخص کنید در ضمن از فرمت های دیگر همان فایل می توانید به صورت همزمان استفاده کنید .

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *