#47 Embedded Youtube player

25 000 ₮ | 2020-02-29 | Төлөв: Дууссан

HTML + Javascript

Энд дарж API doc үзнэ үү!

Form

  • Input: Video url гэсэн input байна
  • Button: Load player гэсэн button байна
  • Span: Одоогийн цагийг харуулах <span id="current_time"></span> байна.
  • Text1: <div id="text1" data-seconds="3">lorem ipsum</div> анхнаасаа нуугдсан байна.
  • Text2: <div id="text2" data-seconds="5">foo bar</div> анхнаасаа нуугдсан байна.

Ажиллагаа:

  1. Input дээр youtube video url оруулна. Жишээ нь https://youtu.be/bHQqvYy5KYo
  2. Button дээр дарахад player нь embed хийж харагдана. Видео автоматаар эхлэхгүй.
  3. Player дээр дарж play хийж эхлэхэд span дээр одоогийн тоглуулагчийн цаг 120ms тутамд шинэчлэгдэн харагдана.
  4. Player-ийн цаг 3 секунд болсон бол text-үүдээс data-seconds нь 3 байх элементийг харуулна.
  5. Player-ийн цаг 5 секунд болсон бол text-үүдээс data-seconds нь 5 байх элементийг харуулна.
  6. Маш олон text div үүсгэсэн ч data-seconds нь тохирч байвал тухайн элемент харагдана.
  7. data-seconds заагдсан элемент дээр click event ажиллахад player-г тухайн секундээс тоглуулна.
« буцах