خصوصیات مربوط به رسانه (controls، loop، autoplay)

خصوصیات کلیدی رسانه: controls، loop، autoplay 🎛️🔁▶️

سلام دوستان! توی فصل‌های قبل با تگ‌های <video> و <audio> آشنا شدیم. اما برای اینکه این تگ‌ها واقعاً کاربردی بشن و بتونیم رفتار اون‌ها رو کنترل کنیم، نیاز به یه سری خصوصیات (Attributes) داریم. امروز می‌خوایم سه تا از مهم‌ترین این خصوصیات رو بررسی کنیم: controls، loop و autoplay.

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

۱. خصوصیت controls: دکمه‌ها در اختیار کاربر! 🕹️

اگه این خصوصیت رو به تگ <video> یا <audio> اضافه کنید، مرورگر به طور خودکار نوار کنترل مربوط به پخش رو نمایش می‌ده. این نوار شامل دکمه‌های پخش/توقف، تنظیم صدا، و در مورد ویدئو، نوار پیشرفت و دکمه تمام صفحه می‌شه.

اهمیت:

• کنترل کاربر: مهم‌ترین نکته اینه که کاربر می‌تونه خودش تصمیم بگیره که کی ویدئو یا صدا رو پخش کنه، صداش رو کم و زیاد کنه یا حتی متوقف کنه. این از مزاحمت ناخواسته جلوگیری می‌کنه.
• قابلیت استفاده: بدون این خصوصیت، کاربر هیچ کنترلی روی رسانه نداره و اگه صدا یا تصویر شروع به پخش کنه، ممکنه اذیت بشه.

نحوه استفاده (بدون نیاز به مقدار):

<!-- نمایش نوار کنترل برای ویدئو -->
<video controls src="my-movie.mp4"></video>

<!-- نمایش نوار کنترل برای صدا -->
<audio controls src="my-song.mp3"></audio>

۲. خصوصیت loop: تکرار بی‌پایان! 🔄

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

کاربردها:

• پس‌زمینه‌های ویدئویی کوتاه: برای ویدئوهایی که به صورت لوپ پخش می‌شن (مثل انیمیشن‌های کوتاه یا افکت‌های بصری).
• صدای محیطی یا جلوه‌های صوتی کوتاه: مثلاً صدای زنگ کوتاه که باید تکرار بشه.

نحوه استفاده (بدون نیاز به مقدار):

<!-- ویدئویی که به طور مداوم تکرار می‌شه -->
<video controls loop src="background-animation.mp4"></video>

<!-- صدایی که بعد از اتمام دوباره پخش می‌شه -->
<audio loop src="notification.wav"></audio>

احتیاط: استفاده بی‌رویه از loop، مخصوصاً با صدا، می‌تونه خیلی آزاردهنده باشه.

۳. خصوصیت autoplay: پخش خودکار، اما با اما و اگر! 🔊

با این خصوصیت، ویدئو یا صدا به محض اینکه صفحه بارگذاری شد، شروع به پخش می‌کنه.

نکته مهم:

• محدودیت مرورگرها: امروزه اکثر مرورگرها برای جلوگیری از تجربه کاربری بد (مثل پخش ناگهانی صدا)، پخش خودکار صدا رو بلاک می‌کنن، مگر اینکه ویدئو یا صدا muted (بی‌صدا) باشه.
• کاربرد اصلی: معمولاً برای ویدئوهای بدون صدا (مثل انیمیشن‌های پس‌زمینه) که خصوصیت muted رو هم دارن، استفاده می‌شه.

نحوه استفاده (بدون نیاز به مقدار):

<!-- ویدیویی که خودکار پخش می‌شه (بدون صدا) -->
<video autoplay muted src="ambient-video.mp4"></video>

<!-- صدایی که ممکن است پخش خودکار نشود -->
<audio autoplay src="intro-music.mp3"></audio>

توصیه: اگر نیاز به پخش خودکار دارید، حتماً از muted هم در کنارش استفاده کنید و یا فقط برای ویدئوهای بدون صدا این کار رو انجام بدید.

ترکیب این خصوصیات می‌تونه نتایج جالبی ایجاد کنه. مثلاً یک ویدئوی پس‌زمینه بدون صدا که به طور مداوم تکرار می‌شه: <video autoplay muted loop src=”…”></video>

با درک درست این سه خصوصیت، می‌تونید کنترل بیشتری روی نحوه نمایش و پخش رسانه‌ها در وب‌سایتتون داشته باشید و تجربه بهتری رو برای کاربران خودتون رقم بزنید. پس خلاق باشید و درست ازشون استفاده کنید! 👍