Prak 03 – HTML5 Video Tag

1. Tujuan

Mengenal cara menyajikan file video menggunakan HTML5

2. Alat

Atom 1.3.2

3. Bahan

Open Movie “Sintel” Trailer

4. Dasar Teori

Gunakan pertanyaan berikut untuk menuliskan dasar teori yang relevan

  1. Apa yang dimaksud dengan HTML5 Video Tag?
  2. Bagaimana mengendalikan audio menggunakan Javascript? (play, pause, currentTime)

5. Tugas Praktikum

  1. Tampilkan file video yang diberikan ke dalam sebuah halaman web menggunakan HTML5 Video Tag
  2. Buat screenrecord yang menunjukkan percobaan tentang manipulasi video tag melalui Javascript. Diantaranya adalah penggunaan perintah play(), pause(), dan properti currentTime
  3. Ubah tampilan video player-nya dengan custom button buatan kalian sendiri

6. Petunjuk Praktikum

gunakan <video></video> tag untuk menyajikan file mp4 atau ogg
kemudian gunakan tag <source> untuk menentukan file mp4 yang ingin dimainkan

untuk mengontrol audio menggunakan javascript DOM. dimulai dengan memberi ID pada tag video untuk bisa diaccess menggunakan document.getElementByID(). setelah DOM-nya diperoleh, dapat digunakan perintah play(), pause() untuk fungsi play dan pause. dan bisa menggunakan properti currentTime untuk menggeser slidernya.

7. Hasil Praktikum

Tampilkan screen record dari praktikum ini

8. Kesimpulan

Tuliskan hal-hal yang diperoleh dari praktikum ini

9. Referensi

W3C HTML5 Video Tag
W3C HTML Audio/Video DOM play() method
Atom Text Editor

Leave a Reply