Praktikum 3 - Video Tag with jQuery Button and Slider

Tujuan

• Mengenal cara menyajikan file video dilengkapi control dan slider menggunakan HTML5 & jQuery UI.

Alat 

• Notepad ++

Bahan 

• Jquery UI

Dasar Teori

Jquery UI 

JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui.

Tugas Praktikum 

• Membuat dan mendesain tombol, slider video di web

Hasil Praktikum 

Praktikum 2 - HTML Audio Tag Slider

Tujuan

• Mengetahui cara membuat pemutar musik sederhana dengan dilengkapi kontrol berupa slider dengan jQuery dan CSS.

Alat

• Notepad++

Bahan

• CSS
• jQuery

Dasar Teori

jQuery

Jquery adalah libary javascript. Maksdud dari libary disini bukan perpustakaan kayak di sekolah yah. Tapi libary disini adalah kode siap pakai yang langsung bisa kita terapkan. Sehingga kita tidak perlu membuat kode dari nol lagi.

Jquery UI

Jquery UI adalah plugin dari jquery yang berguna untuk membuat efek-efek interaktif pada halaman web. Karena Jquery UI adalah bagian tambahan dari Jquery, maka kita tidak bisa menggunakan Jquery UI sendiri. Hubungannya seperti gula dan semut dah. Ibaratnya ada Jquery UI, harus ada Jquery pula.

Hasil Praktikum

Referensi

• JagoCoding

Praktikum 1 - HTML5 Audio Tag

Tujuan

• Mengenal cara menyajikan file audio menggunakan HTML5

Alat

• Atom 1.3.2

Bahan

• Stance Gives You Balance by Hogan Grip download info

Dasar Teori

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".

Kemudian untuk mengontrol audio menggunakan javascript DOM. dimulai dengan memberi ID pada tag audio 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.

Tugas Praktikum

• Tampilkan file audio yang diberikan ke dalam sebuah halaman web menggunakan HTML5 Audio Tag
• Buat screenrecord yang menunjukkan percobaan tentang manipulasi audio tag melalui Javascript. Diantaranya adalah penggunaan perintah play(), pause(), dan properti currentTime untuk button play menggunakan script perintah play()

Petunjuk Praktikum

Gunakan <audio></audio> tag untuk menyajikan file mp3 kemudian gunakan tag <source> untuk menentukan file mp3 yang ingin dimainkan untuk mengontrol audio menggunakan javascript DOM. dimulai dengan memberi ID pada tag audio 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.

Hasil Praktikum

HTML

Javascript

HTML

Kesimpulan

• untuk button play menggunakan script perintah play()
• untuk button play menggunakan script perintah pause()
• untuk button play menggunakan script perintah currentTime()

Referensi

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