در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا

تا قبل از اچ تی ام ال 5 هیچ استاندارد کلی و خاص برای وارد کردن رسانه هایی از جمله ویدیو و صدا به صفحات وب نبود. البته راههای دیگری از جمله استفاده از فلش بود، اما این در بطن اچ تی ام ال نیست. با ظهور اچ تی ام ال 5 خیلی چیزها تغییر کرد یکی از مهمترین تغییرات وجود رسانه های صوتی و تصویری متعدد در وب بود.

تگ video:

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

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video> 

یکی از خصوصیات مهم تگ video خاصیت autoplay است، این خاصیت بدون آنکه کاربر از کاربر اجازه بگیرد باعث می شود ویدیو پخش شود. عرض و طول ویدیو را نیز می توانید با خواص width و height مشخص کنید. البته این خواص متغیر است بعدا با جاوااسکریپت به شما یاد می دهیم که چگونه این کار را انجام بدهید.

تگ source:

همانطور که گفته شد منابع فیلم را می توانید توسط این تگ فرخوانی کنید. خاصیت src این تگ در واقع دریافت کننده آدرس منبع می باشد. (فایل ویدیویی) و خاصیت type هم باید براساس فرمت ویدیو انتخاب شود مثلا اگر فرمت فیلم .mp4 است نوع آن باید video/mp4 باشد.

اجزای کنترلی یک ویدیو:

همانطور که گفتیم عناصری چون طول و عرض دارای مقادیر متغیری هستند، یعنی می توانند در طول اجرای برنامه تغییر پیدا کنند. برای اینکار کافی است کمی با جاوااسکریپت کار کنید. البته این قسمت از درس را صرفا جهت آشنایی با جاوااسکریپت ذکر می کنم.

برای ایجاد کنترل در صفحات وب از دکمه های استفاده می شود:

دکمه 1 (Play/Pause): می خواهیم شروع و توقف فیلم را با یک دکمه انجام دهیم برای این کار باید کلیه اجزای فیلم و دکمه را داخل یک div قرار دهیم. بعد از آن برنامه نویسی دکمه را شروع می کنیم:

  <button onclick="playPause()">Play/Pause</button>

خب در این مثال پس از کلیک روی دکمه تابع playpause() اجرا می شود. برای تعریف تابع در بین دو تگ script کدهای جاوا اسکریپت مربوطه را می نویسیم:

var myVideo = document.getElementById("video1"); 
function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
}

دکمه های بزرگ و کوچک کردن را نیز می توانید مطابق با همین اصول طراحی کنید فقط بجای مقادیر تابع بالا مقدار عرض یا طول متغیر myVideo را برابر اعداد مد نظر قرار می دهید.

تگ Audio:

یکی دیگر از فایلهای چندرسانه ای صوت می باشد، تگ های این فایل تفاوت آنچنانی با قواعد بالا ندارد، تنها فرق آن بجای تگ video از تگ audio استفاده می کنیم. به مثال زیر توجه کنید:

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
</audio> 

خاصیت controls باعث می شود دکمه های پیش فرض مربوط به یک فایل صوتی که از قبل آماده شده ظاهر می شود. دکمه های از قبیل توقف و شروع، فریم زمانی فیلم و سطح صدا. مطابق تگ بالا تگ source با خاصیت src منابع فایل را مشخص می کند.

_حرف پایانی: تا حالا در 22 قسمت آموزش سعی کرده ام به طور تقریبا کامل HTML را آموزش دهم. امیدوارم که موفق بوده باشم.

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_قدم_به_قدم_html #آموزش_تگ_ها_در_html #html_چیست #آموزش_html #آموزش_گام_به_گام_html #شیوه_درج_ویدیو_در_html #ویدیو_در_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....