دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۰
  • مهر

جلسه ۴۶ : اضافه کردن ویدئو در HTML

  • دسته‌بندی‌ها :
جلسه ۴۶ : اضافه کردن ویدئو در HTML
    • جزئیات
    • نوع مطلبآموزشی تصویری

      مقدمه

      با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی اضافه کردن یک فایل ویدئو در html بپردازیم. در html 5 این قابلیت وجو دارد که شما می توانید یک فایل ویدئو، با فرمت هایی که توسط html 5 پشتیبانی می شود را در صفحه وب خود قرار دهید. html 5 از فایل های چند رسانه ای با فرمت های : .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi. پشتیبانی می کند. فرمت ویدوئی که عموما استفاده می شود و توصیه شده است فرمت MP4 است.

      در پست های آموزشی قبلی html، ما به آموزش مباحث چگونگی کار با تگ های Table , Div ، تگ img ، تعریف رنگ ها در html و تعریف فرم ها در html پرداختیم. در ادامه این پست به چگونگی کار با ویدئو در html خواهیم پرداخت.

       

      VideoHTML1- فایل ویدئو در html

      VideoHTML1- فایل ویدئو در html

       

      play کردن ویدئو در html

      مثال کامل از ویدئو در html:

      مثال : مثال کامل از ویدئو در html
      خودتان امتحان کنید »

      قبل از HTML5، یک فایل ویدئو در html ، فقط می توانست در یک مرورگر با یک افزونه (مانند فلش) پخش شود. تگ <video> یک روش استاندارد برای جاسازی ویدیو در یک صفحه وب را مشخص می کند. برای نمایش ویدئو در html از تگ <video> استفاده کنید.

      مثال:

      مثال : مثال-2
      خودتان امتحان کنید »

      تشریح عملکرد مثال فوق:

      ویژگی control در تگ <video>، دکمه های کنترلی ویدئو را نظیر :  play, pause, and volume را اضافه می کند. ایده خوبی است که همیشه ویدئو شامل ویژگی های عرض (width) و ارتفاع (height) باشد.چراکه اگر ارتفاع و عرض تنظیم نشود، ممکن است صفحه هنگام بارگیری ویدیو، سوسو زده شود. تگ <source> به شما این امکان را می دهد که نام ویدئو و فرمت آن را برای مرورگر مشخص کنید.

       Auotoplay کردن فایل ویدئو در html

      ipad

      ipad

      در html 5 شما می توانید. فایل ویدئو را با استفاده از ویژگی autoplay، به حالت پخش خودکار تبدیل کنید.

      مثال:

      مثال : پخش خودکار ویدئو
      خودتان امتحان کنید »

      نکته : ویژگی Autoplay در دستگاه های تلفن همراه مانند iPad و iPhone کار نمی کند.

      پشتیبانی مرورگرها از ویدئوهای html

      در HTML5، ۳ فرمت ویدئو هایی که پشتیبانی می شود شامل: MP4، WebM، و Ogg می باشد.

      پشتیبانی مرورگر برای فرمت های مختلف:

      مرورگرMP4WebMOgg
      Internet ExplorerYESNONO
      ChromeYESYESYES
      FirefoxYESYESYES
      SafariYESNONO
      OperaYES (from Opera 25)YESYES

      انواع فرمت چند رسانه ای

      فرمت فایلنوع چندرسانه ای
      MP4video/mp4
      WebMvideo/webm
      Oggvideo/ogg

      متدها، خصوصیات و رویدادها در ویدئوهای html

      HTML5 متدهای DOM، خواص ها و وقایع را برای عنصر <video> تعریف می کند.

      این اجازه می دهد تا فیلم ها را بارگیری، پخش و مکث کنید، همچنین مدت زمان و حجم را نیز تنظیم کنید.

      همچنین رویدادهای DOM وجود دارد که می توانند به شما اطلاع دهند هنگامیکه یک ویدیو شروع به پخش میکند، متوقف شده است و…

      مثال : کنترل پخش،توقف و ... در ویدئوها
      خودتان امتحان کنید »

      تگ های ویدئو در HTML5

      تگتوضیحات
      <video>یک ویدئو یا فیلم را تعریف می کند.
      <source>منابع رسانه چندگانه را برای عناصر رسانه ای تعریف می کند، مانند <video> و <audio>
      <track>آهنگ های متن را در پخش کننده های رسانه تعریف می کند.

      کلام آخر

      امروزه در میان محتوای چندرسانه ای در وب سایت ها، ویدئو ها و فیلم ها به عنوان یکی از پرکاربردترین محتواها در وب سایت های جهان استفاده می شوند. که کاربردهای مختلفی از جمله آموزشی، علمی، سرگرمی و… دارند. که برای این منظور باید با چگونگی اضافه کردن ویدئو در HTML مطابق مباحث فوق آشنایی داشته باشید.

      QR:  جلسه ۴۶ : اضافه کردن ویدئو در HTML
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر
        • تصویر کاربر
      2. تصویر کاربر
        • تصویر کاربر
      3. تصویر کاربر
      4. تصویر کاربر