آموزش HTML – پخش ویدئو در HTML

در جلسه قبلی آموزش HTML با راه های پخش صدا در html آشنا شدیم. در این بخش به پخش ویدئو در html خواهیم پرداخت.

راه های مختلفی برای قرار دادن فایل های تصویری و پخش ویدئو در HTML وجود دارد.

قرار دادن ویدیو در HTML

قرار دادن video در صفحه وب نسبتا آسان نیست. چراکه مرورگرها معمولا فرم استانداردی برای فایل های مدیا قرار داده شده ندارند.

در این بخش انواع راه های قرار دادن فایل تصویری در صفحه وب, از تگ <video> گرفته تا ویدیوهای آپارات را توضیح می دیم.

استفاده از تگ video در HTML5

تگ جدید <video> در HTML5 یک راه استاندارد را برای قرار دادن فیلم و پخش ویدئو در HTML را ارایه می دهد.

به هر حال این تگ video نسبتا جدید است, اما روی بیشتر مرورگرهای مدرن کار می کند.

مثال ساده زیر نحوه پخش ویدئو در HTML  را به همراه کنترل های پیش فرض و با یک منبع پخش را نشان می دهد.

یک ویدیو یکسان با سورس و فرمت های متفاوت :

استفاده از تگ object

تگ <object> برای قرار دادن انواع مختلف فایل های مدیا در سند HTML استفاده می شود.

این المان از کنترل های ActiveX استفاده می کرد, اما با توجه به مشخصات, یک آبجکت می تواند هر نوع آبجکت رسانه ای مثل ویدیو,  صدا, اپلت جاوا, اکتیوX , سند (HTML, PDF, Word و ..), انیمیشن فلش یا حتی تصاویر باشد.

مثال زیر نحوه قرار دادن یک فایل فلش را در صفحه وب نشان می دهد.

تنها مرورگرها یا اپلیکیشن هایی که فلش را پشتیبانی می کنند, این ویدیو را پخش خواهند کرد.

توجه: المان <object> بطور گسترده پشتیبانی نمی شود و بستگی به نوع آبجکتی که قرار دادید, دارد. بقیه روش ها می تواند در بیشتر موارد گزینه بهتری باشد. آیپد و آیفون امکان پخش فایل های ویدیویی فلش را ندارند.

استفاده از تگ embed

المان <embed> برای قرار دادن محتوای مالتی مدیا داخل سند HTML کاربرد دارد. مثلا فایل تصویری.

توجه: تگ <embed> در حال حاضر به خوبی توسط مرورگرها پشتیبانی می شود و به عنوان استاندارد در HTML5 تعریف شده است, اما فایل های ویدیو احتمالا به دلیل فرمت فایل ها که توسط مروگر پشتیبانی نمی شود یا نبودن پلاگین های آن به خوبی اجرا نشود.

قرار دادن ویدیوهای آپارات در صفحه وب

آسان ترین و محبوب ترین راه قرار دادن فایل های ویدیو در صفحه وب این است که ویدیو را در شبکه هی اشتراک گذاری مثل آپارات آپلود و بعد با کد HTML آن را در صفحه وب خود قرار بدید.

اینکار همچنین باعث می شود که پهنای باند شما هم هدر نرود و همچنین افراد با دیدین ویدیو ترغیب به مراجعه به وب سایت شما شوند.

1. ابتدا به سایت آپارات www.aparat.com بروید و فایل ویدیو خود را آپلود کنید.
2. بعد از آپلود به صفحه ویدیو بروید. حالا از گزینه های در زیر ویدیو بیشتر > ویدیو در سایت را انتخاب کنید.
3. به شما سه نوع کد را نمایش می دهد که دو نوع script و iframe مناسب سایت ما هستند.

قبلا در مورد هر دو تگ script و iframe صحبت کردیم.

حالا می توانید از هر یک را بنابر دلخواه و قالب وبسایت خود کپی و در صفحه وب در بخش body صفحه خود کپی کنید و بعد از اجرا خواهید دید ویدیو به درستی و بدون هیچ مشکل و یا هیچ نوع اختلال و عدم پشتیبانی در مرورگر نمایش داده می شود.

امیدوارم در این بخش آموزش HTML , از پخش ویدئو در html نهایت استفاده را برده باشید.

در بخش بعدی با Web Storage ها در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.