در این قسمت از فیلم آموزش HTML نحوه بارگذاری یا پخش فایل های ویدیویی ( تگ ویدئو ) در صفحات وب آموزش داده شده است که فیلم آموزش نحوه قرار دادن فیلم در html را می توانید در ادامه مشاهده بفرمایید :
در ادامه این پست شما می توانید بصورت متنی نحوه استفاده از تگ video را مشاهده بکنید و یاد بگیرید .
قبل از HTML 5 از تگ های object و embed برای نمایش فایل های ویدیویی استفاده می شود ولی در HTML 5 از تگ ویدئو استقاده می کنیم . در سورس زیر نحوه استفاده از تگ های object و embed را می توانید مشاهده بفرمایید .
<html> <head> <title>Web30ty</title> </head> <body> <object data="film.mp4" /> <embed src="movie.mp4" /> </body> </html>
تگ Video ( تگ ویدئو )
این تگ یک نوع تگ فرزند دار است و برای آدرس دادن سورس فیلم از تگ Source داخل تگ ویدئو استفاده می کنیم . تگ Video دارای شناسه های مختلفی است که در ادمه آن ها را مشاهده خواهید کرد :
شناسه Controls :
با استفاده از این شناسه در تگ ویدئو می توان در هنگام پخش فیلم ابزار کنترلی رو فعال کرد ابزارهایی مانند کم و زیاد کردن صدا ، مدت زمان فیلم ، دکمه پخش و … اگر از این شناسه استفاده نکنید این ابزار فعال نحواهد شد .
شناسه autoplay :
این در تگ ویدئو شناسه باعث می شود که در هنگام لود شدن صفحه فیلم به صورت خودکار پخش شود .
شناسه Width و Height :
برای اینکه اندازه فیلم رو تعیین کنیم از این شناسه ها استفاده می کنیم و طول و عرض فیلم را مشخص می کنیم .
شناسه muted :
اگر از این شناسه در تگ video استفاده بکنید فیلم رو بصورت mute در می آورد یا این شناسه فیلم رو به صورت حالت بی صدا در می آورد .
شناسه Poster :
با استفاد از این شناسه می توانیم یک عکسی را به عنوان پوستر قبل از پخش شدن فیلم انتخاب کنیم .
شناسه های Loop و Preload را هم در پست قبلی آموزش دادم .
سورس کد HTML :
<html> <head> <title>Web30ty</title> </head> <body> <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> </body> </html>
سلام من با اسکرچ یک انیمیشن ساختم که فرمت فایلش sb3 هست. میتونم اونو به html تبدیل و بعد به mp4 تبدیل کنم؟
با سلام
میتونید از سایت زیر برای تبدیل فایل sb3 به HTML استفاده بکنید :
https://sheeptester.github.io/words-go-here/htmlifier/large-file-editor/
لام من این کد را در نرم افزار atoom وارد میکنم کار نمیکنه ولی در نوت پد پلاس پلاس کار میکنه نرم افزار اتوم خیلی بهتره و بقیه ی کد ها روش اجرا میشه ولی این کد نه
سلام
کل کدهارو سلکت بکنید و کنترل + شیفت سمت چپ رو بزنید شاید از بخاطر اینه که باید چپ چین بکنید .
اگر درست نشد مشکلش رو کامل بگید تا راهنمایتون بکنم
من با این آموزش شما یه فایل ویدیو داخل سایت قرار دادم
این ویدیو رو PC درست لود میشه ولی رو گوشی اندازش بزرگ تر از صفحه است
مثل سایت شما درست نیست
ابعاد : 600 در 375
لطفاً بگید چطور ابعاد داخل گوشی رو جداگانه تنظیم کنم
ممنون
سلام برای ابعاد گوشی از این کد استفاده بکنید و ابعاد مورد نظر خودتون رو جای width و height قرار بدید :
@media screen and (max-width: 992px) {
video {
width: 300px ; height:400px; }
}