آموزش قرار دادن تگ video در HTML5

دوران طراحی قسمت اول

در اولین قسمت از سری آموزش های دوران طراحی قصد داریم که به معرفی و نحوه استفاده از تگ Video در HTML5 بپردازیم .

در ابتدا بهتره که بگیم تگ video در نسخه های قبلی از HTML یعنی نسخه HTML4 به پایین وجود نداشت ! و این تگ در زبان HTML ورژن پنجم نمایان شد  و تا قبل از آن کاربران برای نمایش ویدیو در سایت خود از برنامه های جانبی از جمله Flash و silverlight استفاده می کردند که جالب است بدانید برنامه های فلش و سیلورلایت به زودی با سفر را از دنیای وب خواهند بست و جای خود را به تکنولوزی های جدید صنعت وب مانند این تگ Video خواهند داد .

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

Browser MP4 WebM Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ NO YES YES
Safari 5+ YES NO NO
Opera 10.6+ NO YES YES

اما نحوه استفاده از تگ ویدیو در میان کد های وب سایت به صورت زیر می باشد

تگ video رو با صورت زیر می نویسیم :

[html]

<video width=”320″ height=”240″ poster=”img1.jpg”  controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
</video>

[/html]
این قطعه کد باعث ایجاد یک پلیر و فیلم ویدیویی در سایت شما می شود . خصوصیت width , height تگ video طول و عرض پلیر ویدیو را مشخص خواهد کرد .

خصوصیت poster درون این تگ نیز مشخص کردن تصویر ابتدایی یا شروع ویدیو قبل از پخش آن نمایش داده می شود را تعیین می کند که به آدرس عکس مورد نظر شاره خواهد کرد که در اینجا عکس img1.jpg انتخاب شده است

خصوصیت بعدی این تگ نیز controls می باشد که تعیین کننده این است که ویدیو نمایش داده شده دارای تنظیماتی از قبیل محور زمان و یا میزان صدا و … باشد یا خیر

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

جواب آن بسیار ساده می باشد چون ما نمی دانیم که کاربر مورد نظر ما با کدام یک از مرورگر ها وارد سایت ما می شود مجبور هستیم که هر ۳ فرمت استاندارد را ایجاد کرده و از طریق تگ source به تگ video اضافه کنیم , اما اضافه کردن این ۳ تگ به این منظور نیست که مرورگر هر ۳ ویدیو را بارگذاری کند که سرعت بارگذاری سایت شما کاهش یابد بلکه مرورگر ها با توجه به نوع فرمتی که پشتیبانی می کنند ویدیو مورد نظر را بارگذاری خواهند کرد .

اما برسیم به خصوصیات تگ source :
خصوصیت src تگ source اشاره به آدرس فایل ویدیو مورد نظر می کند که در اینجا ما در تگ اولین source آدرس movie.mp4 را قرار داده ایم و قسمت بعدی نیز خاصیت type این تگ می باشد که بسته به نوع فایل آدرس دهی شده مشخص می گردد که ما video/mp4 را وارد کرده ایم

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

به پایان قسمت اول از دوران طراحی وب رسیدیم , امیدوارم از این سری آموزش ها لذت کافی رو ببرید و در آخر هم ما رو از نظر های خوبتون آگاه کنید .


دیدگاه ها برای آموزش قرار دادن تگ video در HTML5

  • خیلی عالی بود ممنونم

    مسعود تیر ۳۱, ۱۳۹۲ ۱۶:۱۶ پاسخ دادن
  • خیلی ممنون!!آقا من میتونم قالب وردپرس رو ترجمه کنم ولی نمیتونم کنترل پپنلش رو ترجمه کنم یعنی بلد نیستم ترجمش کنم!!اگه میشه یه آموزش هم در این رابطه بزارید!! 🙂

    Mohsen تیر ۳۱, ۱۳۹۲ ۱۷:۲۱ پاسخ دادن
    • خواهش می کنم . چشم حتما در قسمت های بعدی که آموزش های php شروع میشه این کار رو هم انجام میدیم

      mohammad rohany تیر ۳۱, ۱۳۹۲ ۲۳:۲۳ پاسخ دادن
      • واقعا سایت عالی دارید!!خیلی من از مطالبتون استفاده می کنم!!!:))

        موفق باشدید!!درضمن قالب سایتتون خیلی قشنگه!:)

        Mohsen مرداد ۱, ۱۳۹۲ ۱۳:۰۳ پاسخ دادن
        • ممنون دوست عزیز لطف دارید.

          تمپ ها مرداد ۱, ۱۳۹۲ ۱۳:۲۵ پاسخ دادن
          • ببخشید جناب!!میدونم اینجا جاش نیست!ولی یه سوال دارم اون هم اینه :
            اگه ما قالب طراحی و کدنویسی کنیم!چه برای وردپرس چه وبلاگ!شما برای فروش میزارید؟؟و در ازا درصدی از فروش قالب رو بردارید؟؟

            Mohsen مرداد ۱, ۱۳۹۲ ۱۹:۲۹ پاسخ دادن
  • قسمت اول خوب بود، البته من با مطالب گفته شده آشنایی داشتم ولی خوب برای شروع خوبه

    سید مهدی شاه امیریان مرداد ۶, ۱۳۹۲ ۰۱:۵۲ پاسخ دادن
  • Pingback: آموزش تگ audio در HTML5 | تمپ ها

  • سلام دوست عزیز ممون از مطلب خوبتون!
    من یک مطلب نوشتم در مورد استایل دهی به تگ video گفتم کاربران عزیز از اون استفاده کنند:
    http://bein.ir/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%AA%DA%AF-video-%D9%88-%D8%B7%D8%B1%D8%B2-%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84-%D8%AF%D9%87%DB%8C-%D8%A8%D9%87-%D8%A7%D9%86/

    دانیال سعیدی دی ۲۵, ۱۳۹۲ ۰۱:۳۹ پاسخ دادن
  • دوست عزیز بسیار بسیار سپاسگزارم. دو روزه اساسی درگیر این ماجرام. آخرش با روش شما حل شد.

    انصار رضائی مهر ۲۵, ۱۳۹۳ ۰۴:۴۴ پاسخ دادن
  • سلام دوست من موفق باشید عالی بود .

    mojtaba آبان ۳۰, ۱۳۹۳ ۲۲:۰۱ پاسخ دادن
  • سلام . سایت بدرد بخوری دارید . موفق باشید

    کتابیم دی ۲۴, ۱۳۹۳ ۰۱:۲۱ پاسخ دادن
  • اره درسته کار میکنه

    احمد خرداد ۱۲, ۱۳۹۴ ۱۰:۰۲ پاسخ دادن
  • سلام
    با تشکر از سایت خوبتون از مطالبتون استفاده زیادی کردم.
    ممنون از از این آموزش خیلی به دردم خورد.
    موفق باشید.

    ali خرداد ۲۱, ۱۳۹۴ ۰۹:۴۷ پاسخ دادن
  • Pingback: آموزش تگ audio در HTML5 | وبلاگ Wonderco

  • سلام، ممنون از مطلب مفیدتون. ولی یه مشکل بزرگی داریم ما، ویدیو ها روی ویندوز با سرعت استاندارد پخش میشن ولی روی گوشی موبایل کند پخش میشن. بیشتر بازدید کننده های وب ما با گوشی موبایل ویدیو ها رو تماشا میکنن. راه حلی هست که ویدیو روی گوشی موبایل با سرعت استاندارد پخش بشه ؟

    کامران فروردین ۷, ۱۳۹۵ ۱۹:۰۴ پاسخ دادن
    • سلام کامران عزیز ، این مشکل چندتا دلیل داره ،
      دلیل اول احتمال داره بخاطر ضعیف بودن سرور شما باشه ، اما با توجه به اینکه فرمودی سرعت توی سیستم دستکاپ خوبه ، درصد این احتمال پایینه.
      نکته دوم : در نظر داشته باش که قدرت وای فای گوشی خیلی ضعیف تر از سیستم دسکتاپ هست و کمتر میتونه دیتا دریافت کنه.
      شما این افت سرعت رو حتی در سایت های یوتیوب ، ویمئو و آپارات هم تجربه می کنید ،
      نکته سوم : احتمال داره بخاطر عدم load balancing روی سرور شما در کد backend و عدم بهینه بودن کد ، این مشکل بوجود اومده باشه که باید بررسی بشه.

      سعید سلطانی فروردین ۲۲, ۱۳۹۵ ۱۸:۱۰ پاسخ دادن
  • سلام با تشکر از سایت مفید و پر محتوای شما
    من یه قالب طراحی کردم برای وردپرس ولی فایل های ویدئویی و صوتی رو پشتیبانی نمی کنه مشکل کجاست ؟ در واقع من فایل رو در پست وارد می کنم ولی نمایش داده نمی شود.

    مصطفی تیر ۱۲, ۱۳۹۵ ۱۰:۴۳ پاسخ دادن
    • چه کمکی از دست ما ساخته است؟

      مهرداد ضهراب بیک تیر ۱۴, ۱۳۹۵ ۱۷:۵۰ پاسخ دادن
  • بسیار عالی بود.

    طراحی سایت تیر ۲۷, ۱۳۹۶ ۱۲:۳۲ پاسخ دادن

با نظرات و پیشنهادات خود تمپ ها را همراهی کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *