بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - کار با فیلم (Video)

راه های مختلفی برای پخش ویدیوها در صفحه وب هست.

تعبیه ویدیو در سندِ HTML

گذاشتن ویدیو در صفحه وب زیاد راحت نیست، چون مرورگرها برای تعریف فایل های چندرسانه ای استانداردی رسمی ندارن.

در این فصل به شما تعدادی از را ه های اضافه کردن ویدیوها را در صفحه های وب از آخرین عنصر HTML5 <video> گرفته تا ویدیوهای محبوب YouTube، نشان میدیم.

استفاده از عنصر HTML5 video

عنصر جدیدِ HTML5 <video> راهی استاندارد برای تعبیه ویدیو در صفحه های وب فراهم می کنه. با این که عنصر ویدیو نسبتاً جدیده، ولی در بیش تر مرورگرهای وبِ جدید کار می کنه. مثال زیر به سادگی یک ویدیو را با استفاده از مجموعه کنترل های پیش فرض مرورگر به همراه یک منبع به سند HTML5 اضافه می کنه.

مثال

<video controls="controls" src="shuttle.mp4">
    Your browser does not support the HTML5 Video element.
</video>

ویدیو از مجموعه کنترل های پیش فرضِ مرورگر به همراه منابع جایگزین استفاده می کنه.

مثال

<video controls="controls">
    <source src="shuttle.mp4" type="video/mp4">
    <source src="shuttle.ogv" type="video/ogg">
    Your browser does not support the HTML5 Video element.
</video>

استفاده از عنصر object

عنصر <object> برای تعبیه کردن انواع مختلفی از فایل های رسانه ای در سند HTML استفاده میشه. قبلاً، از این عنصر برای اضافه کردن کنترل های ActiveX استفاده میشد، ولی بر اساس اعتبارنامه ها، یک شیء می تواند هر نوع شیء چندرسانه ای مثل ویدیو، صوت، اپلت های جاوا، ActivX، سند(HTML، PDF، Word و...)، انیمیشن های فلش یا حتی عکس باشه.

قطعه کد زیر یک فایل ویدیوییِ فلش را در صفحه وب تعبیه می کنه.

مثال

<object data="blur.swf" width="400px" height="200px"></object>

فقط مرورگرها و برنامه های کاربردی که از فِلش پشتیبانی کنن این فایل را پخش می کنن.

اخطار: عنصر <object> بصورت گسترده پشتیبانی نمیشه و به نوع شی ای که تعبیه میشه خیلی بستگی داره. روش های دیگه در بسیاری از موارد می توانند انتخاب بهتری باشن.iPad و iPhone نمی توانند فایل های فلشِ ویدیویی را نشان بدن.

استفاده از عنصر embed

عنصر <embed> برای تعبیه کردن محتوای چند رسانه ای در سند HTML استفاده میشه.

قطعه کد زیر فایل ویدیوییِ فلش را در صفحه وب تعبیه میکنه.

مثال

<embed src="blur.swf" width="400px" height="200px">

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

تعبیه ویدیوهای یوتیوب YouTube))

این راه، راحت ترین و محبوب ترین روش برای تعبیه فایل های ویدیویی در صفحه های وبِه. فقط ویدیو را در یوتیوب آپلود کنین و کد HTML را برای نمایش ویدیو در صفحه ی وب تان اضافه کنین.

در ادامه مثالی واقعی بهمراه توضیحات کاملی از همه ی مراحل آورده شده:

مرحله ی 1: آپلود ویدیو

به صفحه ی آپلود ویدیو در یوتیوب (YouTube) برید و برای آپلود ویدیوتان از دستورات پیروی کنین.

مرحله ی 2: ایجاد کد HTML برای تعبیه ویدیو

زمانی که ویدیو آپلود شده تان را در یوتیوب باز کنین، چیزی شبیه به این، پایینِ ویدیو خواهید دید. جستجو کنین (Brows) و ویدیو آپلود شده تان را در یوتیوب باز کنین. حالا دکمه share را پیدا کنین؛ مثل شکل زیر، پایین ویدیو قرار گرفته.

share panel

وقتی روی دکمه share کلیک کنین، پنلِ share باز میشه و دکمه های بیشتری را نمایش میده. حالا روی دکمه ی Embed کلیک کنین، این دکمه کدِ HTMLای را برای تعبیه مستقیم ویدیو در صفحه های وب، تولید می کنه. فقط کد را در سندِ HTMLتان، جایی که می خواهید ویدیو را نمایش بدین، کپی و الصاق (copy and paste) کنین، حالا همه چیز آماده ست. بصورت پیش فرض ویدیو داخل یک iframe تعبیه میشه.

embed code

می توانید بعداً کد تعبیه شده را تغییر بدین، مثلاً با انتخاب گزینه ی customization، که پایین جعبه ورودیِ کد تعبیه شده قرار داره، اندازه ی ویدیو را تغییر بدین.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>YouTube Video</title>
</head>
<body>
    <iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</body>
</html>

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد