فیلم های YouTube در HTML

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

استفاده از ویدئوهای YouTube در html

آسان ترین راه ، برای نمایش ویدئوها در وب سایت ، استفاده از YouTube است.

فرمت های ویدئویی

شاید تا قبل از این آموزش ، شما برای اینکه ویدوئوهای مختلف را در مرورگر خود نمایش دهید، مجبور به تغییر دادن فرمت ویدئو ها می شدید.

تبدیل ویدئو ها به فرمت های دیگر ، مشکل و وقت گیر است.

آسانترین راه این است که اجازه بدهید YouTube ویدئو ها را اجرا کند.

id ویدئو در YouTube

YouTube با یک id (مانند tgbNymZ7vqY ) نمایش می دهد. (زمانیکه ویدئو را ذخیره یا اجر امی کنید، این اتفاق می افتد).

شما می توانید از این id ، در کد html خود برای نمایش ویدئو ها استفاده کنید.

اجرای ویدئوهای YouTube در html

برای اجرای ویدئو با استفاده از YouTube در کد html خود مراحل زیر را دنبال کنید:

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

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/test/tgbNyfd7vqY”>
</iframe>

پخش خودکار YouTube

شما می توانید ویدیوی خود را به طور خودکار شروع کنید زمانی که یک کاربر به بازدید از این صفحه با اضافه کردن یک پارامتر ساده به آدرس YouTube شما دسترسی پیدا کند.

بیشتر

طراحی نرم افزار اندرویدی با HTML و CSS و JavaScript

کافیست ، مقادیر زیر را در صفت autoplay تنظیم کنید:

Value 0 (پیش فرض) : ویدئو بصورت خودکار پخش نمی شود.

Value 1 : ویدئو زمانیکه ، player بارگزاری شود ، بصورت خودکار ، پخش می شود.

توجه: شروع خودکار یک ویدیو می تواند بازدید کننده شما را آزار دهد و در نهایت بیش از بازدید کننده به ضرر شما باشد .

Chrome در سال ۲۰۱۸ سیاست های سختگیرانه تری برای پخش خودکار اضافه کرد. مرورگرهای Chromium در همه موارد اجازه پخش خودکار را نمی دهند. با این حال ، پخش خودکار بی صدا همیشه مجاز است.

mute=1 بعد از autoplay=1 اضافه کنید تا ویدیوی شما شروع به پخش خودکار کند (اما بی صدا است).

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/tgbNymZ7vqY?controls=1&mute=1“>
</iframe>

لیست پخش (YouTube Playlis )

این قابلیت لیست کاملی از ویدیوهایی که اجرا می شود، را اضافه می کند (علاوه بر URL اولیه).

پخش مجدد ویدئو پس از اتمام (Loop)

loop=1 را اضافه کنید تا ویدیوی شما برای همیشه حلقه داشته باشد.

Value 0 (پیش فرض) : ویدئو به خودی خود، یکبار اجرا می شود.

Value 1 : زمانیکه ویدئو به انتهای پخش برسد، مجددا اجرا می شود.

مثال:

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/test/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1“>
</iframe>

کنترل های YouTube

برای نمایش کنترل ها در پخش کننده ویدئو ، controls=0 را اضافه کنید.

Value 0 : کنترل های player نمایش داده نمی شود.

Value 1 (پیش فرض) : کنترل های player نمایش داده می شود.

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/test/tgbNymZ7vqY?controls=0“>
</iframe>

بیشتر

صفات Input در Html

استفاده از عناصر <object> یا <embed>

نکته : تگ های <object> و <embed> در youtube از ژانویه ۲۰۱۵ منسوخ شده اند. شما باید به جای استفاده از تگ object و تگ embed از تگ iframe استفاده کنید.

امیدواریم این بخش از آموزش در مورد فیلم های YouTube در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .