میرممد

آموزش برنامه نویسی همراه با تکه کد های کاربردی از زبان های مختلف برنامه نویسی
سید محمد میرعالی

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 1
  • آی پی دیروز : 11
  • بازدید امروز : 7
  • باردید دیروز : 17
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 119
  • بازدید ماه : 322
  • بازدید سال : 22,831
  • بازدید کلی : 22,831
  • آموزش استفاده از تگ video در HTML5


    در اين مطلب از سايت ميرممد نحوه ي استفاده از تگ video در HTML5 رو براتون قرار ميدم.تگ video زماني استفاده ميشه كه بخواييم يك كليپ رو به صورت آنلاين در سايت قرار بديم.حتي زيرنويس هم ميشه به اين قابليت جديد در html 5 اضافه كرد.

    كد زير يك تكه كد از تگ video در اچ تي ام ال 5 هست كه در آن از دو كيفيت تصويري mp4 و  ogg استفاده شده و همچنين دوتا زيرنويس با زبان انگليسي و نروژي رو هم اضافه كرده :

    <video width="320" height="240" controls>
      <source src="klip.mp4" type="video/mp4">
      <source src="klip.ogg" type="video/ogg">
      <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
      <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
    </video>

    فقط كافيه در كد بالا لينك كليپ خودتونه به شكل زير اضافه كنيد :

      <source src="لينك ويدئو" type="فرمت ويدئو">

    در كد اولي كه قرار دادم از دوتا كد سورس استفاده كردم كه هر كدوم از سورس ها يك فرمت خاصي از همون كليپ هستش شما ميتونيد از چند فرمت با كيفيت هاي متفاوت براي كليپتون استفاده كنيد.

     

     

    <source src="لينك ويدئو" type="فرمت ويدئو">

    <source src="لينك ويدئو با كيفيت دوم" type="فرمت ويدئو دوم">

    براي قرار دادن زيرنويس براي كليپتون فقط كافيه لينك زيرنويس رو با تگ track به كد اضافه كنيد به اين شكل :

      <track src="لينك زيرنويس" kind="subtitles" srclang="en" label="English">

    در كد بالا بخش  label متني هستش كه به كاربر براي انتخاب اين زيرنويس نشون داده ميشه چون ممكنه چند زيرنويس اضافه كنيد پس از ليبل هاي مناسب براي هر زيرنويس استفاده كنيد.در بخش srclang بايد كد زبان رو بهش بديم مثلا en براي انگليسي و fa براي زبان فارسي استفاده ميشه.

    بخش پايين نيز به ترتيب عرض و ارتفاعي هستش كه به پليرتون ميديد :

    width="320" height="240"

    يك سري قابليت ديگه هم داره كه بسيار كاربردي هستند و من به صورت موردي با مثال توضيح ميدم.

    قابليت autoplay تگ video در HTML5 :

    اگر اتريبيوت autoplay رو به تگ ويدئو اضافه كنيم بعد از لود شدن صفحه كليپ به صورت اتوماتيك شروع به پخش شدن ميكنه.نمونه كد :

    <videocontrols autoplay>
      <source src="movie.mp4" type="video/mp4">
    </video>

    قابليت controls تگ video در HTML5 :

    اگر اتريبيوت controls رو به تگ ويدئو اضافه كنيم دكمه هاي پلي توقف صدا و... به پلير اضافه ميشه .نمونه كد :

    <video controls>
      <source src="movie.mp4" type="video/mp4">
    </video>

    قابليت loop تگ video در HTML5 :

    اگر اتريبيوت loop رو به تگ ويدئو اضافه كنيم كليپ پس از تموم شدن از دوباره پخش ميشه.نمونه كد :

    <videocontrols loop>
      <source src="movie.mp4" type="video/mp4">
    </video>

    قابليت muted تگ video در HTML5 :

    اگر اتريبيوت muted رو به تگ ويدئو اضافه كنيم پلير به صورت پيشفرض بيصدا ميشود.نمونه كد :

    <video controls muted>
      <source src="movie.mp4" type="video/mp4">
    </video>

    قابليت poster تگ video در HTML5 :

    اگر اتريبيوت poster رو به تگ ويدئو اضافه كنيم يك عكس اوليه به پلير ميده.نمونه كد :

    <video controls poster="آدرس عكس">
      <source src="movie.mp4" type="video/mp4">
    </video>

    قابليت preload تگ video در HTML5 :

    اگر اتريبيوت preload رو به تگ ويدئو اضافه كنيم ويدئو در صفحه لود نميشه تا وقتي كه روي پلي كليك نكيند.به نظر من اين مهمترين اتريبيوت اين تگ هستش چون باعث كم حجم شدن صفحه و لود سريع سايت ميشه.نمونه كد :

    <video controls preload="none">
      <source src="movie.mp4" type="video/mp4">
    </video>
    از اين اتريبيوت ها ميشه همزمان استفاده كرد نمونه كد :

    <video controls preload="none" poster="آدرس عكس">
      <source src="movie.mp4" type="video/mp4">
      <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
    </video>

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش كار با تصاوير در Bootstrap 4

    بازدید : 346 دوشنبه 16 مهر 1397 : 10:46 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی