فایل های صوتی، پلاگین ها و ویدیو های یوتیوب و آپارات

پخش فایل های صوتی

قبل از HTML5 فایل های صوتی تنها با پلاگین های خاص مانند flash قابلیت پخش در مرورگرها را داشتند اما با معرفی HTML5 عنصر <audio> ارائه شد که راهی برای پخش عناصر صوتی در مرورگرها تلقی می شود. وضعیت پشتیبانی از این عنصر در مرورگرهای مختلف به این شرح است:

کروم	فایرفاکس	اینترنت اکسپلورر/Edge	سافاری	اپرا
4.0	3.5	9.0	4.0	10.5

به طور مثال به کد زیر دقت کنید:

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

مشاهده ی خروجی در JSBin

توضیح این کد بدین شرح است که controls برای اضافه کردن کنترل های پخش (play)، توقف (pause) و تنظیم صدا به مرورگر است تا کاربر راحت تر با فایل کار کند. <source> نیز به شما اجازه می دهد که چند فایل صوتی مشخص کنید تا در صورتی که یکی از آن ها در مرورگر کاربر قابل پخش نبود، فایل بعدی یا فرمت بعدی جایگزین شود. همچنین متن موجود بین تگ های آغازین و پایانی <audio> تنها در صورتی نمایش داده می شوند که مرورگر کاربر از عنصر <audio> پشتیبانی نکند.

فرمت های مجاز

در HTML5 سه فرمت صوتی مجاز وجود دارد: MP3, WAV و OGG

نحوه ی پشتیبانی مرورگر ها از این سه فرمت بدین صورت است:

مرورگر	OGG	WAV	MP3
Internet Explorer	پشتیبانی نمی‌کند.	پشتیبانی نمی‌کند.	پشتیبانی می‌کند.
Chrome	پشتیبانی می‌کند.	پشتیبانی می‌کند.	پشتیبانی می‌کند.
Firefox	پشتیبانی می‌کند.	پشتیبانی می‌کند.	پشتیبانی می‌کند.
Safari	پشتیبانی نمی‌کند.	پشتیبانی می‌کند.	پشتیبانی می‌کند.
Opera	پشتیبانی می‌کند.	پشتیبانی می‌کند.	پشتیبانی می‌کند.

از طرفی HTML5 برای کار با <audio> متد ها و خصوصیات و رویداد های مختلفی را در DOM تعریف کرده است بنابراین به شما اجازه می دهد که صوت را نگه داشته، پخش کرده و یا مدت زمان و صدای آن را تنظیم کنید.

پلاگین های HTML

هدف پلاگین های HTML افزایش کارایی و پشتیبانی مرورگر های مختلف از قابلیت های بیشتر است. پلاگین ها به زبان ساده تر برنامه های کمکی هستند که کارایی مرورگر را از سطح استاندارد خود افزایش می دهند. یکی از مشهور ترین پلاگین ها Java applet است.

برای اضافه کردن پلاگین ها به صفحات وب باید از <object> یا <embed> استفاده کنیم. به طور کل می توان گفت پلاگین ها استفاده های خاصی دارند، به طور مثال نمایش نقشه ها، اسکن کردن ویروس ها، تایید کردن id بانکی شما و ... .

اول از همه به سراغ <object> میرویم که توسط تمام مروگر ها پشتیبانی می شود. عنصر <object> یک شیء را درون خودش دارد و برای اضافه کردن پلاگین هایی مانند Java applet و PDF خوان ها و Flash Player ها استفاده می شود:

<!DOCTYPE html>
<html>
<body>

<object width="400" height="50" data="bookmark.swf"></object>
 
</body>
</html>

مشاهده ی خروجی

البته شما می توانید داخل این عنصر از کد های HTML نیز استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<object width="100%" height="500px" data="https://www.w3schools.com/html/snippet.html"></object>
 
</body>
</html>

مشاهده ی خروجی

و یا حتی تصاویر:

<!DOCTYPE html>
<html>
<body>

<object data="audi.jpeg"></object>
 
</body>
</html>

مشاهده ی خروجی

عنصر دیگر ما عنصر <embed> بود که در تمام مرورگر های اصلی پشتیبانی می شود؛ در واقع <embed> خیلی وقت است که توسط مرورگر ها پشتیبانی می شود اما تا قبل از HTML5 جزئی از specification (توضیحات رسمی HTML) نبوده است. کار <embed> دقیقا مشابه با عنصر قبلی ماست و یک شیء را درون خودش تعریف می کند. مثال های بالا را می توانیم به این صورت در embed پیاده کنیم:

<!DOCTYPE html>
<html>
<body>

<embed width="400" height="50" src="bookmark.swf">

</body>
</html>

مشاهده ی خروجی

نکته: <embed> دارای تگ پایانی نیست بنابراین نمی تواند متن جایگزینی را به خود بگیرد.

مانند objet می توانیم از <embed> نیز برای قرار دادن کدهای HTML استفاده کنیم:

<!DOCTYPE html>
<html>
<body>

<embed width="100%" height="500px" src="snippet.html">

</body>
</html>

مشاهده ی خروجی

و همچنین تصاویر:

<!DOCTYPE html>
<html>
<body>

<embed src="audi.jpeg">

</body>
</html>

مشاهده ی خروجی

ویدیوهای یوتیوب

از آنجا که یوتیوب در ایران فیلتر است زیاد روی آن مانور نمی دهیم اما آشنایی با کار آن به یادگیری دیگر سرویس های ویدیویی مانند آپارات نیز کمک می کند. در جلسه ی قبل توضیح دادیم که مرورگر های دنیای وب (حتی بهترین هایشان) تمام فرمت های ویدیویی خوب را پشتیبانی نمی کنند بنابراین باید ویدیو هایتان را convert کنید تا آن ها را به صورت فرمت مورد تایید مرورگر ها در بیاورید. این فرآیند علاوه بر درگیری منابع سیستمی، بسیار وقت گیر است و نمی شود هر ویدیویی که در سایتمان گذاشتیم را convert کنیم.

یکی از بهترین راه حل ها استفاده از وب سایت های اشتراک گذاری ویدیو (مانند یوتیوب و آپارات) است. در این مقاله یوتیوب را توضیح خواهیم داد؛ هر ویدیویی در یوتیوب دارای یک id است (مثلا tgbNymZ7vqY) شما می توانید با همین id از آن در صفحات وب خود استفاده کنید. مراحل این کار بدین صورت است:

ویدیو خود را در یوتیوب آپلود کنید.
id مربوط به آن ویدیو را بردارید.
یک <iframe> در صفحه وب خود بسازید.
به src آدرس اینترنتی ویدیو را بدهید.
با استفاده از width و height ابعاد پخش کننده ی ویدیو را مشخص کنید.
هر پارامتر دیگری که خواستید به URL اضافه کنید.

مثال:

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

</body>
</html>

یکی از پارامتر های قابل اضافه به این کد قابلیت Autoplay است؛ یعنی زمانی که کاربر صفحه ی اینترنتی شما را باز می کند، ویدیوی شما به طور خودکار پخش شود. البته حواستان باشد که از این قابلیت فقط در موقعیت های خاصی استفاده کنید چرا که معمولا باعث آزار دیدن مخاطب و در نتیجه ترک صفحه ی وب شما می شود!

برای اضافه کردن پخش خودکار باید autoplay=1 را به همراه یک علامت سوال به انتهای آدرس اینترنتی ویدیو بچسبانید:

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>

</body>
</html>

یکی دیگر از پارامتر های مجاز اضافه کردن loop=1 است؛ با اضافه کردن این پارامتر به ویدیو می گویید که پشت سر هم پخش شود و اگر تمام شد دوباره پخش شود! مثال:

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

</body>
</html>

اگر به loop مقدار 0 بدهید یعنی پس از پایان دوباره پخش نشود و اگر 1 بدهید یعنی دوباره پخش شود.

یکی دیگر از پارامتر ها controls است. در صورتی که به آن 0 بدهید کنترل های پخش کننده (توقف ویدیو، سرعت پخش ویدیو، صدا، و ....) نمایش داده نمی شود و اگر به آن 1 دهید این کنترل ها در اختیار کاربر قرار خواهد گرفت:

<!DOCTYPE html>
<html>
<body>

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

</body>
</html>

نکته: عناصر <object> و <embed> از سال 2015 برای یوتیوب منسوخ شده اند بنابراین باید از <iframe> استفاده کنید. مثال های زیر نحوه ی غلط استفاده از یوتیوب است:

<!DOCTYPE html>
<html>
<body>

<object width="420" height="315"
data="https://www.youtube.com/v/tgbNymZ7vqY">
</object>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<embed width="420" height="315"
src="https://www.youtube.com/v/tgbNymZ7vqY">

</body>
</html>

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