آموزش ویدئوهای یوتیوب در HTML

ساده ترین راه برای پخش ویدئو در HTML، استفاده از یوتیوب(YouTube) است.

مبارزه کردن با فرمت های ویدئو

تبدیل ویدئوها به فرمت های مختلف، می تواند مشکل و وقت گیر باشد. یک راه ساده تر این است که به یوتیوب امکان دهیم ویدئوها را در صفحه ی وب ما پخش کند.

id ویدئو در یوتیوب

وقتی که ما یک ویدئو را در پوتیوب save یا play کنیم، یوتیوب یک id (مانند tgbNymZ7vqY) را به ما نمایش می دهد. ما می توانیم از این id استفاده کنیم و در کدهای HTML، به این id رجوع کنیم.

پخش یک ویدئوی یوتیوب در HTML

برای پخش ویدئوی خود در یک صفحه وب، گام های زیر را انجام دهید:

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

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

پخش اتوماتیک(Autoplay) + بی صدا(Mute) در یوتیوب

ما می توانیم با اضافه کردن autoplay=1 در URL یوتیوب، وقتی که یک کاربر صفحه ی ما را مشاهده می کند، امکان دهیم تا ویدئوی ما به صورت اتوماتیک پخش شود. اما اینکه ویدئوی ما به طور اتوماتیک شروع شود، برای کاربران آزار دهنده است.

نکته: مرورگرهای کرومیوم(Chromium) در اکثر موارد، امکان استفاده از پخش اتوماتیک را نمی دهند. اما همواره امکان می دهند تا پخش اتوماتیک(autoplay) به صورت بی صدا(muted) انجام شود.

پس از autoplay=1 مقدار mute=1 را قرار دهید تا ویدئو به طور اتوماتیک اما بی صدا(muted) پخش شود.

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

لیست پخش در یوتیوب(YouTube Playlist)

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

حلقه در یوتیوب(YouTube Loop)

مقدار loop=1 را اضافه کنید تا ویدئوی شما همیشه حلقه بزند(loop). مقدار پیش فرض برای loop صفر(0) است و ویدئو تنها یک بار پخش می شود. اما اگر مقدار loop برابر با 1 باشد، ویدئو همیشه حلقه خواهد زد.

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

کنترل های یوتیوب

عبارت controls=0 را قرار دهید تا کنترل ها در ویدئو پلیر یوتیوب نمایش داده نشوند. اما اگر می خواهید کنترل ها نمایش داده شوند، (در صورت لزوم) می توانید مقدار 1 را برای ویژگی مذکور قرار دهید.

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