آموزش تگهای video و audio
آموزش تگهای video و audio
فهرست موضوعات در این آموزش
در این قسمت از آموزش فیلم HTML5 و CSS3 نحوه بارگذاری یا پخش فایل های ویدیویی ( تگ ویدئو ) و صوتی در صفحات وب را خدمت شما آموزش خواهیم داد.
قبل از HTML 5 از تگ های object و embed برای نمایش فایل های ویدیویی استفاده می شود ولی در HTML 5 از تگ ویدئو استقاده می کنیم .
تگهای video و audio
به مثال زیر دقت نمایید:
|
1 2 |
<object data="film.mp4" /> <embed src="movie.mp4" /> |
تگ Video
این تگ یک نوع تگ فرزند دار است و برای آدرس دادن سورس فیلم از تگ Source داخل تگ ویدئو استفاده می کنیم .
تگ Video دارای شناسه های مختلفی است که در ادمه آن ها را مشاهده خواهید کرد :
شناسه Controls :
با استفاده از این شناسه در تگ ویدئو می توان در هنگام پخش فیلم ابزار کنترلی رو فعال کرد ابزارهایی مانند کم و زیاد کردن صدا ، مدت زمان فیلم ، دکمه پخش و … اگر از این شناسه استفاده نکنید این ابزار فعال نحواهد شد .
شناسه autoplay :
این در تگ ویدئو شناسه باعث می شود که در هنگام لود شدن صفحه فیلم به صورت خودکار پخش شود .
شناسه muted :
این شناسه فیلم رو به صورت حالت بی صدا در می آورد .
شناسه Poster :
با استفاد از این شناسه می توانیم یک عکسی را به عنوان پوستر قبل از پخش شدن فیلم انتخاب کنیم .
شناسه Loop :
این شناسه باعث می شود اگر فیلم تمام شد دوباره پخش شود .
نکته :
تمام شناسه های گفته شده میتوانید داخل تگ Audio هم قابل استفاده است
شناسه Width و Height :
برای اینکه اندازه فیلم رو تعیین کنیم از این شناسه ها استفاده می کنیم و طول و عرض فیلم را مشخص می کنیم .
سورس کد HTML Video:
|
1 2 3 4 5 |
<video width="400px" height="300px" controls autoplay muted poster="image.jpg"> <source src="film.mp4" type="video/mp4" /> <source src="film.ogg" type="video/ogg" /> مرورگر شما این تگ را ساپورت نمی کند . </video> |
فقط دقت کنید به جایfilm.mp4 آدرس فایل خودتون رو فرار بدید و در قسمت Type هم نوع و فرمت فایل صوتی را مشخص می کنیم و اگر از فرمت های دیگری استفاده کردید حتما در قسمت type هم نوع آن را مشخص کنید در ضمن از فرمت های دیگر همان فایل می توانید به صورت همزمان استفاده کنید .
تگ Audio
سورس کد HTML audio:
|
1 2 3 4 5 |
<audio controls autoplay loop > <source src="music.mp3" type="audio/mp3" /> <source src="film.ogg" type="video/ogg" /> مرورگر شما این تگ را ساپورت نمی کند . </audio> |
فقط دقت کنید به جای music.mp3 آدرس فایل خودتون رو فرار بدید و در قسمت Type هم نوع و فرمت فایل صوتی را مشخص می کنیم و اگر از فرمت های دیگری استفاده کردید حتما در قسمت type هم نوع آن را مشخص کنید در ضمن از فرمت های دیگر همان فایل می توانید به صورت همزمان استفاده کنید .
خوب دوستان عزیز این جلسه از آموزش هم به پایان رسید امید وارم که مورد توجه شما قرار گرفته باشه تا یکی دیگه از جلسات آموزشی وب سایت پاسخ وردپرس خدا نگهدار
هنوز بررسی‌ای ثبت نشده است.