amuzeshtak
کاربر تازه وارد
در این مقاله میخوایم نحوه قرار دادن ویدیو و صدا و اتریبیوت های هر یک رو باهم دیگه بررسی کنیم .
با اضافه شدن تگ <video> و <audio> به HTML5 قرار دادن ویدوها و صداها در صفحات وب بسیار تسهیل شده که در زیر ابتدا تگ ویدیو رو بررسی میکنیم :
برای قرار دادن یک ویدیو به این صورت عمل میکنیم :
خب الان به بررسی قسمت های مختلف این کد بپردازیم:
1- ویژگی controls که در تگ ویدیو قرار داده شده کنترل های مختلف یک پلیر مانند play & pause رو اضافه میکند.
2- ویژگی های width و height ، عرض و ارتفاع ویدیو را مشخص میکند.
3-تگ source که داخل تگ ویدیو قرار داده شده آدرس ویدیو رو با اتریبیوت src دریافت میکند.
4- اتریبیوت type که در تگ source قرار دارد نوع ویدیو رو مشخص میکند که میتواند سه نوع داشته باشد :
یک سری از اتریبیوت های دیگه برای تگ ویدیو :
برای قرار دادن یک صدا در HTML5 به این صورت عمل میکنیم :
تمامی قسمتهای تگ audio مشابه تگ video است فقط در قسمت type تگ source میتوان انواع زیر رو قرار داد :
موفق باشید.
با اضافه شدن تگ <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
یک سری از اتریبیوت های دیگه برای تگ ویدیو :
- muted : ویدیو را به صورت پیش فرض بی صدا میکند
- autoplay: در صورتی که این صفت قرار داده شود ویدئو به محض اینکه صفحه لود شود، خود به خود پخش می شود.
- loop: در صورت وجود پس از اتمام نمایش ویدئو، پخش آن دوباره شروع می شود.
- poster : با این اتریبیوت میتوان یک تصویر را به عنوان پوستر برای ویدیو قرار داد.
برای قرار دادن یک صدا در 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
موفق باشید.