مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در آخرین مطالب آموزشی که در ادامه آموزش های html در سایت پی وی لرن ، ارائه شد. ما وارد مباحث گرافیک در html شدیم. و به ارائه موضوعات پرکاربردی نظیر SVG در html5 ، و چگونگی نمایش و استفاده از نقشه گوگل در html ، پرداختیم. سپس وارد مبحث چند رسانه ای در html، شدیم . و به بررسی موضوع کار با Plug-ins در html ، پرداختیم. اکنون در این بخش از ادامه آموزشها، در ادامه مبحث چند رسانه ای ، قصد داریم به موضوع جالب و پرکاربرد آموزش استفاده از ویدئوهای YouTube در html یا پخش ویدیوهای یوتیوب در html ، بپردازیم.
آموزش استفاده از ویدئوهای YouTube در html
استفاده از ویدئوهای YouTube در html
آسان ترین راه ، برای نمایش ویدئوها در وب سایت ، استفاده از YouTube است.
فرمت های ویدوئویی
شاید تا قبل از این آموزش ، شما برای اینکه ویدوئوهای مختلف را در مرورگر خود نمایش دهید، مجبور به تغییر دادن فرمت ویدئو ها می شدید.
تبدیل ویدوئو ها به فرمت های دیگر ، مشکل و وقت گیر است.
آسانترین راه این است ، که اجازه بدهید، YouTube ویدئو ها را اجرا کند.
id ویدئو در YouTube
YouTube با یک id (مانند tgbNymZ7vqY ) نمایش می دهد. (زمانیکه ویدئو را ذخیره یا اجر امی کنید، این اتفاق می افتد).
شما می توانید از این id ، در کد html خود برای نمایش ویدئو ها استفاده کنید.
اجرای ویدئوهای YouTube در html
برای اجرای ویدئو با استفاده از YouTube در کد html خود مراحل زیر را دنبال کنید:
- ویدیو را به YouTube آپلود کنید.
- توجه داشته باشید از شناسه ویدیو،کپی بگیرید.
- یک عنصر <iframe> را در صفحه وب خود تعریف کنید.
- صفت src را با URL ویدئو مقدار دهی کنید.
- از ویژگی های عرض و ارتفاع برای مشخص کردن ابعاد پخش استفاده کنید.
- پارامتر های دیگر را نیز به URL اضافه کنید (زیر را ببینید).
مثال:
مثال : اجرای ویدئوهای youtube در html
| <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe> |
پخش خودکار YouTube
شما می توانید ویدیوی خود را به طور خودکار شروع کنید زمانی که یک کاربر به بازدید از این صفحه با اضافه کردن یک پارامتر ساده به آدرس YouTube شما دسترسی پیدا کند.
کافیست ، مقادیر زیر را در صفت autoplay تنظیم کنید:
- Value 0 (پیش فرض) : ویدئو بصورت خودکار پخش نمی شود.
- Value 1 : ویدئو زمانیکه ، player بارگزاری شود ، بصورت خودکار ، پخش می شود.
مثال:
مثال : ryhtml_youtubeiframe_autoplayکپخش خودکار ویدئوهای یوتیوب
| <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1"> </iframe> |
لیست پخش (YouTube Playlis )
این قابلیت لیست کاملی از ویدیوهایی که اجرا می شود، را اضافه می کند (علاوه بر URL اولیه).
پخش مجدد ویدئو پس از اتمام (Loop)
- Value 0 (پیش فرض) : ویدئو به خودی خود، یکبار اجرا می شود.
- Value 1 : زمانیکه ویدئو به انتهای پخش برسد، مجددا اجرا می شود.
مثال:
مثال : لیست پخش
| <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1"> </iframe> |
کنترل های YouTube
- Value 0 : کنترل های player نمایش داده نمی شود.
- Value 1 (پیش فرض) : کنترل های player نمایش داده می شود.
مثال:
مثال : کنترل پخش ویدئوها
| <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0"> </iframe> |
استفاده از عناصر <object> یا <embed>
نکته : تگ های <object> و <embed> در youtube از ژانویه ۲۰۱۵ منسوخ شده اند. شما باید به جای استفاده از <object> و <embed> از تگ iframe استفاده کنید.
مثال : استفاده از تگ object (منسوخ شده)
| <object width="420" height="315" data="https://www.youtube.com/embed/tgbNymZ7vqY"> </object> |
مثال : استفاده از تگ embed (منسوخ شده)
| <embed width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> |
کلام آخر
youtube به عنوان یکی از بزرگترین منابع آنلاین فیلم در جهان ، یکی از کامل ترین مجموعه های ویدئوهای مختلف آموزشی،علمی،سرگرمی و… می باشد، از آنجایی که ویدئوهای YouTube در html پخش می شود. شما می توانید به راحتی از ویدئوهای youtube را در وب سایت خود پخش کنید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
