درس هشتم: مالتیمدیا (افزودن ویدیو و صوت)
درس هشتم: مالتیمدیا (افزودن ویدیو و صوت)
یک وبسایت مدرن بدون محتوای چندرسانهای ناقص است. در این درس یاد میگیریم چطور ویدیوهای آموزشی و پادکستها را با استفاده از استانداردهای HTML5 در سایت CSLearn نمایش دهیم.
🎬 ۱. پخش ویدیو با تگ <video>
تگ <video> به شما اجازه میدهد فایلهای تصویری (معمولاً با فرمت MP4) را پخش کنید. ویژگی controls بسیار مهم است چون دکمههای پخش و توقف را به کاربر نشان میدهد.
<video width="100%" controls poster="cover.jpg"> <source src="lesson.mp4" type="video/mp4"> مرورگر شما از ویدیو پشتیبانی نمیکند. </video>
* ویژگی poster عکسی را نشان میدهد که قبل از پخش ویدیو به عنوان کاور دیده میشود.
🎧 ۲. پخش صوت با تگ <audio>
برای پادکستها یا فایلهای صوتی از تگ <audio> استفاده میکنیم. ساختار آن دقیقاً مشابه تگ ویدیو است.
<audio controls> <source src="podcast.mp3" type="audio/mpeg"> مرورگر شما از پخش صوت پشتیبانی نمیکند. </audio>
🔗 ۳. استفاده از آپارات و یوتیوب (Iframe)
اگر نمیخواهید فضای هاست شما پر شود، بهتر است ویدیو را در آپارات آپلود کرده و از کد iframe استفاده کنید. این تگ یک “پنجره” به سایت دیگر باز میکند:
<iframe src="https://www.aparat.com/video/embed/..."
width="100%" height="360" allowfullscreen>
</iframe>یک فایل صوتی کوتاه تهیه کنید و آن را با تگ <audio> در صفحه قرار دهید. سعی کنید ویژگی autoplay را هم به آن اضافه کنید و ببینید چه اتفاقی میافتد! (نکته: اکثر مرورگرها برای جلوگیری از مزاحمت، جلوی پخش خودکار صدا را میگیرند).