VIDEO TAG HTML5

Praktikum 3

I.            TUJUAN

Mengenal cara menyajikan file audio menggunakan HTML5

II.            ALAT DAN BAHAN

Notepad++

III.            DASAR TEORI

HTML5, CSS, Javascript
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 diakses menggunakan document.getElementById(). Setelah itu dapat menggunakan perintah play(), pause() untuk fungsi play dan pause, dan bisa menggunakan perintah currentTime=0 untuk mereset audio.
Sedangkan Cascading Style Sheet (CSS) adalah bahasa pemrograman web yang digunakan untuk memberi hiasan dan mengatur gaya tampilan / layout halaman web supaya lebih menarik..

HTML5 Video Tag

HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.

Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan source (sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung) .

 

 

IV. Hasil Praktikum


Silahkan Test 


V. Kesimpulan

Pada praktikum ini saya menggunakan <video> untuk menambahkan video kedalam sebuah web yang akan saya buat.

 

 

 

 

 

 

 

 

 

Read more »

Audio Tag dengan tambahan Slider

I. Tujuan

Mahasiswa mampu dan mengetahui cara menampilkan slider untuk mengontrol file audio yang telah ditambatkan.

II. Alat dan Bahan

• Notepad++
• Jquerry UI
• Bootstrap

III. Dasar Teori

CSS
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

BOOTSTRAP
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.

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. 

IV. Tugas

  Dibawah ini merupakan hasil praktikum yang telah saya lakukan 

TEST

Video

V. Referensi

1. http://jsbin.com/IYUxImU/4/edit?html,css,js,output 
2. http://www.w3schools.com/bootstrap/bootstrap_get_started.asp   

Read more »

Praktikum Satu Tag Audio

Laporan Praktikum 1

HTML5 Audio Tag

I.                   Tujuan

Tujuan dari praktikum ini adalah supaya mahasiswa bisa mengenal dan mengetahui cara menyajikan file audio dengan menggunakan HTML5.

II.                 Alat

Pada praktikum ini saya menggunakan notepad ++ aplikasi teks editor.

III.              Bahan

India Waale by Neeti Mohan, Vishal Dadlani, KK & Shankar Mahadevan.

IV.              Dasar Teori

1.      HTML adalah singkatan dari Hyper Text Markup Language yang merupakan sebuah format file berupa teks atau juga file yang berupa ASCII didalamnya terdapat perintah kepada web browser agar menampilkan sebuah objek atau data.

2.      HTML5 adalah versi terbaru dari HTML yang berfungsi menampilkan objek maupun data dan mampun mendukung beberapa teknologi multimedia yang baru.

3.      Tag merupakan suatu pasangan yang terdiri 2 bagian yang disebut dengan tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir ddinyatakan dalam bentuk </nama tag>.

4.      Audio Tag adalah sebuah tag yang akan menampilkan audio pada website yang akan dibuat. Dengan format <audio> dan diakhri dengan </audio>

5.      Untuk mengendalikan audio dengan menggunakan javasript pada html 5 bisa berupa play, pause, dan currentTime dengan cara, menambahkan element controls didalam tag audio. Bisa juga dengan menambahkan button dengan memberikan perintah Play(), pause() dan juga menambahkan property berupa cunrrentTime untuk mereset audio dari awal lagi.

V.                 Hasil Praktikum

1.      Percobaan 1

Hasilnya :

2.      Percobaan 2

Hasilnya :

 

VI.               Analisa

Berdasarkan praktikum satu ini saya mendapatkan pengetahuan tentang bagaimana menambahkan tag audio dengan javascript kedalam html 5, property CurrentTime dan perintah seperti Play(), Pause().

Read more »