آموزش تگهای video و audio

//

آموزش تگهای video و audio

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

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

تگهای video و audio

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

تگ Video

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

شناسه Controls :

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

شناسه autoplay :

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

شناسه muted :

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

شناسه Poster :

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

شناسه Loop :

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

نکته :

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

شناسه Width و Height :

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

آموزش تگهای video و audio

سورس کد HTML  Video:

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

تگ Audio

تگ Audio

سورس کد HTML audio:

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

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

میانگین رتبه 5/5 تعداد رای : 1

نظرات

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

سبد خرید
در حال بروز رسانی