LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO

Transkripsi

1 LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO OLEH : LUTHFI HDIAYAT ( ) TEKNOLOGI MULTIMEDIA BROADCASTING POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015

2 Praktikum 1 Flash, Video dan AudioTujuan - Mahasiswa memahami cara menambahkan dokumen Flash ke halaman website - Mahasiswa memahami cara menambahkan video dan audio ke halaman website - Mahasiswa memahami element <video> dan <audio> pada HTML5 1. Dasar Teori A. Flash Sejak akhir tahun 90an, Flash telah menjadi software yang cukup popular untuk membuat animasi dan juga digunakan untuk memainkan video dan audio. Untuk membuat animasi pada Flash, anda memerlukan software Adobe Flash yang merupakan salah satu produk yang dijual oleh Adobe. Saat anda membuat dokumen flash, maka file tersebut akan disimpan dengan ekstensi.fla. Agar bisa anda gunakan pada website, anda perlu mengeksportnya menjadi file dengan format.swf. Apabila dokumen Flash telah di eksport kedalam format.swf, maka flash akan membuat kode yang bisa anda gunakan untuk menempelkannya ke halaman website. Biasanya kode tersebut menggunakan kode HTML <object> dan <embed>. Saat ini cara yang menggunakan javascript juga banyak ditemui Untuk menampilkan dokumen Flash, browser membutuhkan sebuah plugin bernama Flash Player. Anda bisa mendownloadnya secara gratis pada website Adobe.com. Perkembangan Flash Saat Flash pertama kali diluncurkan, sebenarnya dikembangkan untuk membuat animasi. Seiring dengan perkembangan teknologi, para pengguna mulai memanfaatkannya untuk membuat media player dan bahkan membuat keseluruhan websitenya dengan menggunakan Flash. Saat ini tidak terlalu banyak website yang menggunakan Flash, beberapa alasannya adalah: - Pada kisaran tahun mulai bermunculan kumpulan kode-kode javascript atau biasa disebut Javascript Libraries seperti misalnya script.aculo.us, Protoype, dan Jquery. Javascript library ini sangat memudahkan pengguna untuk membuat animasi dengan javascript, sehingga browser tidak tergantung pada plugin - Pada tahun 2007, Apple meluncurkan iphone yang disusul tahun 2010 mereka - mengeluarkan ipad yang pada akhirnya memutuskan untuk tidak mendukung Flash pada perangkat-perangkat Apple. - Ada semacam hukum yang dikenalkan untuk memastikan bahwa website dapat digunakan oleh mereka yang mengalami kendala pada pandangan atau cacat fisik lainnya. Pada bagian ini, Flash banyak mendapat kritikan karena isi dari dokunen Flash sering kali bermasalah terkait hal tersebut. - Pada tahun 2008, browser mulai memberi dukungan pada HTML5 yaitu salah satunya pada elemen <video> dab <audio>. Pada saat penulisan buku ini, Flash masih merupakan cara yang popular untuk memainkan video dan audio

3 pada website, akan tetapi semakin banyak pula yang mulai berpindah ke HTML5. B. HTML5 : Video Pada saat penulisan modul ini, elemen <video> merupakan salah satu elemen baru pada versi HTML5. Elemen ini hanya didukung oleh browser-browser dengan versi terbaru, sehingga apabila anda ingin video anda bisa dilihat oleh semua browser baik versi yang lama atau yang baru, anda tidak bisa hanya mengandalkan elemen ini untuk menempelkan video ke halaman website anda. Anda perlu mengkombinasikan andatar HTML5 dengan Flash Video. Tidak semua browser mendukung format yang sama, sehingga anda perlu menyiapkan video dengan beberapa format. Saat penulisan buku ini, format yang didukung oleh beberapa browser yang paling banyak dipakai oleh pengguna internet antara lain adalah H264 yang didukung oleh IE dan safari. Format berikutnya adalah WebM yang didukung oleh Android, Chrome, Firefox dan Opera. Saat sebuah video ditempelkan pada halaman website, maka browser akan menyediakan mekanisme kontrol sendiri untuk pemutarnya dan modelnya bisa jadi beragam dan berbeda pada tiap browser.

4 2. Hasil Praktikum dan Analisa - Percobaan 1: Memasukkan dokumen flash menggunakan javascript Analisa : a. Ada berbagai macam cara untuk memasukkan sebuah video pada website b. Salah satunya dengan menggunakan flash dengan bantuan javascript c. Ekstensi sebuah video harus sama dengan yang ada pada program

5 - Percobaan 2: Memasukkan dokumen flash menggunakan elemen <embed> Analisa : a. <embed src="flash/bird.swf" /> digunakan untuk meng embed sebuah file swf b. Script untuk embed tidak memerlukan script yang panjang

6 - Percobaan 3: Memasukkan file Flash Video

7 Analisa : a. Kode di atas adalah code javascript b. Code yang dipakai juga panjang sekali c. Terdapat variable variable yang digunakan untuk memanggil file swf - Percobaan 4: Memasukkan video dengan elemen <video>

8 Analisa : a) Dengan menggunakan HTML 5 kita bisa menampilkan sebuah video pada websit b) preload berguna untuk memberitahukan ke browser apa yang perlu dilakukan saat halaman dimuat atau diload. c) controls digunakan mengindikasikan bahwa browser harus menyediakan kontrol untuk memutar atau menghentikan video d) loop berguna untuk memutar kembali sesaat setelah video selesai dimainkan

9 - Percobaan 5: Memasukkan Video dengan banyak source Analisa : a) Poster digunakan untuk menggunakan sebuah gambar sebagai tampilan awal selagi menunggu file video selesai didownload b) Height digunakan untuk mengatur tinggi video c) Width digunakan untuk mengatur lebar video

10 - Percobaan 6: Memasukkan gambar dari folder lainmenambahkan Flash Mp3 Player Analisa : a) Kita juga bisa memasukkan audio pada sebuah website b) Script di atas menggunakan javascript c) Src= digunakan untuk mencari file audio yang akan kita masukkan d) Terdapat variable yang digunakan untuk memasukkan audio kita

11 - Percobaan 7 : Menambahkan Audio HTML5 Analisa : a) Src= digunakan untuk memasukkan file audio kita b) Controls autoplay digunakan untuk membuat audio kita langsung berputar jika kita mengakses website kita c) File pada percobaan ini adalah format ogg

12 - Percobaan 8 : Menambahkan Audio HTML 5 dengan Banyak tipe format Analisa : a) Ada berbgai macam format audio yang bisa kita gunakan lewat html 5 b) Yaitu ogg, mp3, wav

13 - Percobaan 9: Menggunakan iframe Analisa : a) Iframe digunakan sebagai wadah kita menempatkan video b) Kita bisa mengatur width dan height dari iframe kita

14 - Percobaan 10: Tugas Praktikum 2

15 Analisa : a) Saya menggunakan iframe dalam menempatkan video saya b) Di bagian kiri adalah sebuah link yang akan membuka video kita pada iframe c) Dengan menggunkan atribut target kita bisa menampilkan sebuah video tanpa reload keseluruhan halaman

16 KESIMPULAN - Ada berbagai cara untuk menampilkan audio dan video pada website kita - Kita bisa menggunkan javascript, embed video, html 5 - Tetapi yang paling simple menurut saya adalah dengan menggunkan html 5 - Iframe digunakan untuk membuat wadah video kita