LAPORAN RESMI. Flash, Audio dan Video. Dosen Pembimbing : Dwi SusantoS. ST, MT. Oleh Hamidah Nur Hidayati

Transkripsi

1 LAPORAN RESMI Flash, Audio dan Video Dosen Pembimbing : Dwi SusantoS. ST, MT Oleh Hamidah Nur Hidayati PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015 Praktikum 3

2 Flash, Video dan Audio Tujuan - 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 Dasar Teori Flash merupakan teknologi yang cukup popular yang digunakan untuk menambahkan animasi, video dan audio pada website. Pada topik ini akan dibahas cara menambahkan dokumen flash ke halaman website. Pembahasan selanjutnya adalah cara menambahkan audio dan video pada website menggunakan elemen baru pada HTML5 yaitu <video> dan <audio>. 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

3 pada elemen <video> dab <audio>. Pada saat penulisan buku ini, Flash masih merupakan cara yang popular untuk memainkan video dan audio pada website, akan tetapi semakin banyak pula yang mulai berpindah ke HTML5. Menambahkan Dokumen Flash Untuk menambahkan dokumen flash ke halaman website, ada beberapa cara yang bisa digunakan, mulai dari elemen HTML5, javascript atau menggunakan eksternal source. 1. Menggunakan <embed> Elemen <embed> merupakan salah satu elemen baru pada HTML5 dan saat ini telah didukung oleh hampir semua browser yang banyak digunakan saat ini. 2. Menggunakan Javascript Cara ini merupakan cara yang paling banyak digunakan. Terdapat beberapa script yang bisa digunakan untuk menambahkan dokumen flash pada halaman website tanpa anda perlu mempelajari secara mendalam tentang Javascript. Salah satunya adalah SWFObject yang bisa anda download secara gratis dari Google. Salah satu keuntungan dari cara ini adalah anda bisa menyediakan isi yang lain sebagai alternatif saat browser pengunjung web anda belum mendukung Flash. Memahami Format Video dan Pemutarnya Untuk menambahkan video pada website anda, ada dua hal yang perlu dipahami, yaitu format video dan player yang digunakan untuk memutar video tersebut. Biasanya berupa plugin. Format Video tersedia dalam format yang cukup banyak, sebut saja BluRay, DVD, VHS dan beberapa yang lainnya. Pada kebutuhan video untuk online, terdapat lebih banyak format yang digunakan, misalnya AVI, Flash Video, H264, MPEG, Ogg, Theora, QuickTime, WebM, dan Windows Media. Seringkali sebuah browser tidak dapat memutar video yang ingin ditampilkan, hal ini biasanya karena browser tersebut tidak mendukung format file dari video yang ingin ditampilkan. Agar pengunjung dapat melihat video yang ingin anda tampilkan, anda perlu merubah format filenya ke format yang lain. Proses merubah format ini biasa disebut dengan encoding. Terdapat beberapa layanan online yang menyediakan jasa perubahan format ini, salah satunya adalah Player/plugin Browser sejatinya didesain untuk menampilkan teks dan gambar saja. Karena alasan ini, browser yang dibuat sebelum tahun 2010 biasanya membutuhkan program bernama player atau plugin yang perlu diinstall agar browser bisa menampilkan video. Player atau plugin biasanya hanya mendukung format tertentu.

4 Saat modul ini ditulis, browser baru saja mengalami evolusi yakni dukungan terhadap elemen baru pada HTML5 yakni elemen <video>. Akan tetapi kita tidak bisa mengandalkan pengunjung website kita menggunakan browser terbaru yang telah mendukung elemem baru pada HTML tersebut. Browser yang mendukung elemen baru tersebut, juga mewajibkan video dirubah pada format yang berbeda. Pendekatan Cara paling mudah untuk menambahkan video pada website anda adalah dengan menggunakan jasa layanan video seperti YouTube atau Vimeo. Akan tetapi terdapat beberapa hal yang menyebutkan bahwa penggunaan layanan ini tidaklah tepat, sehingga anda perlu menempatkan video anda pada layanan hosting anda sendiri. Pada saat penulisan modul ini, untuk memastikan sebagian besar orang bisa memainkan content video, dianjurkan bahwa sebaiknya menggunakan elemen HTML5 <video> untuk browser yang sudah mendukungnya. Bisa juga menggunakan format video Flash untuk browser yang belum mendukung elemen HTML5 <video>. Dengan cara ini, anda harus mengupload video mana saja yang ingin anda tampilkan dan setidaknya dalam 2 format yang berbeda yakni WebM dan MP4. Menggunakan Layanan Video Keuntungan Layanan upload video seperti Youtube menyediakan player yang didukung oleh sebagian besar browser yang banyak digunakan oleh para pengunjung web. Anda tidak perlu mengkhawatirkan tentang format video yang anda gunakan, karena layanan seperti Youtube memperbolehkan kita untuk mengupload video dalam beberapa format. Saat selesai upload, layanan tersebut akan secara otomatis merubah formatnya menjadi beberapa jenis format yang diperlukan untuk berbagai jenis browser yang berbeda. Apabila kita meletakkan file video kita di web kita sendiri, adakalanya perusahaan hosting tempat kita menyewa akan meminta tambahan biaya karena bandwidth yang kita gunakan cukup besar dan yang paling kelihatan adalah ukuran file web kita akan jauh lebih besar bila dibandingkan tanpa menambahkan file video. Perlu diketahui bahwa semakin besar ruang hosting yang kita sewa, maka semakin mahal pula kita harus membayar. Apabila anda menaruh video anda pada layanan seperti Youtube atau Vimeo, anda tidak perlu khawatir lagi terhadap bandwidth dan ukuran file website anda. Kekurangan Video anda hanya akan tersedia disitus layanan video tersebut, sehingga apabila anda ingin video anda secara eksklusif hanya ada di website anda, anda perlu menaruh sendiri filenya di website anda melalui layanan hosting yang anda gunakan dan tidak kalah penting lagi anda harus menyiapkan player tersendiri untuk menampilkan video tersebut. Beberapa layanan juga akan membatasi apa yang perlu anda taruh pada video anda. Misalnya mereka melarang adanya iklan di video yang anda upload. Beberapa layanan video biasanya akan memainkan iklan mereka tersendiri sebelum video anda diputar. Kualitas video pada beberapa layanan video upload juga dibatasi Menyiapkan Flash Video Terdapat setidaknya 3 langkah utama untuk menambahkan video berformat flash pada website anda.

5 1. Merubah video ke format FLV Agar dapat memainkan Flash Video, anda perlu merubah format video anda ke format FLV. Sejak Flash 6, Flash telah dilengkapi Flash Video Encoder untuk merubah ke format FLV. 2. Menemukan FLV Player Anda membutuhkan sebuah player untuk memainkan file FLV. Tujuannya adalah untuk membungkus file FLV dan menambahkan kontrol untuk play/pause. Salah satu player open source yang bisa anda gunakan adalah OS FLV Player. 3. Memasukkan Player dan Video pada halaman website anda Anda bisa menambahkan player FLV ke halaman web anda dengan menggunakan teknik Javascript. Anda juga perlu memberitahukan ke player dimana lokasi file video yang ingin dimainkan. 5.3 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. Menambahkan video dengan elemen <video> Untuk menambahkan video dengan menggunakan elemen baru HTM5 tersebut, kita cukup menuliskan tag <video> diikuti dengan beberapa atribut. Contohnya seperti di bawah ini. <video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300" preload controls loop> <video> Elemen <video> memiliki sejumlah atribut yang bisa anda gunakan untuk mengendalikan pemutaran video src Atribut ini berfungsi untuk menentukan alamat file video.

6 controls Apabila digunakan maka atribut ini mengindikasikan bahwa browser harus menyediakan kontrol untuk memutar atau menghentikan video poster Atribut ini memungkinkan anda untuk menggunakan sebuah gambar sebagai tampilan awal selagi menunggu file video selesai didownload loop Apabila atribut ini dituliskan, maka video akan diputar kembali sesaat setelah video selesai dimainkan Pada HTML5 anda tidak perlu menuliskan semua nilai pada tiap atribut. Misalnya untuk atribut control, autoplay dan loop yang berada dalam elemen <video>. Atribut-atribut ini ibarat sebuah saklar yakni on dan off. Apabila atribut-atribut dituliskan, maka akan mengaktifkan opsi tersebut. Apabila atribut dihapus, maka opsi tersebut tidak dipakai atau diaktifkan. Apabila sebuah browser tidak mendukung elemen <video> atau format video yang digunakan, maka browser hanya akan menampilkan apa saja yang berada antara tag <video> dengan closing tag </video> autoplay Apabila atribut ini dituliskan, maka video akan secara otomatis dimainkan preload Atribut ini akan memberitahukan ke browser apa yang perlu dilakukan saat halaman dimuat atau diload. Atribut ini bisa berisi salah satu dari tiga nilai di bawah ini: none browser tidak perlu mendownload video sebelum pengguna menekan tombol play auto Browser akan mendownload video saat halaman dimuat atau diload metadata browser hanya akan mengumpulkan informasi seperti ukuran, frame pertama, track list dan durasi video

7 Menambahkan audio Pada saat penulisan buku ini, format audio untuk halaman web yang paling banyak dipakai adalah MP3. Untuk menambahkan audio, anda bisa memilih salah satu dari tiga pilihan berikut ini: 1. Menggunakan layanan online Terdapat beberapa situs yang menyediakan fasilitas untuk mengupload file audio dan sekaligus menyediakan player yang bisa ditempelkan pada halaman website anda. Contohnya seperti soundcloud.com dan myspace.com 2. Menggunakan Flash Terdapat beberapa Flash movie yang bisa digunakan untuk memutar file MP3, mulai dari yang sederhana hingga player yang kompleks yang memungkinkan anda untuk membuat play list sendiri. 3. Menggunakan HTML sendiri HTML 5 telah memperkenalkan elemen baru yakni <audio>. Browser yang mendukung elemen ini akan menyediakan kontrol tersendiri, mirip dengan model kontrol pada video. Langkah Kerja Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini 1. Tempatkan folder Praktikum5 beserta isinya pada lokasi yang anda inginkan 2. Pastikan anda menyimpan semua hasil percobaan pada praktikum ini di dalam folder tersebut 3. Anda akan memerlukan beberapa file yang ada didalam folder praktikum5, yakni file-file yang berada dalam sub folder images dan js. 4. Buka teks editor pilihan anda 5. Ketikkan semua kode yang ada pada tiap percobaan 6. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi.html 7. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada Save as Type menjadi All Files 8. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML.

8 Hasil Percobaan dan Analisa Percobaan 1: Memasukkan dokumen flash menggunakan javascrip Pada percobaan 1 ini, kita mencoba untuk menampilkan animasi flash sederhana dalam sebuah code javascript. Yang diperlukan dalam percobaan ini adalah animasi flash dalam format.swf. dan kode javascript dalam format.js. lihat langkah diatas.

9 Percobaan 2: Memasukkan dokumen flash menggunakan elemen <embed> Pada percobaan 2 ini, kita mencoba memasukkan file flash dengan cara embed pada html. Percobaan 3: Memasukkan file Flash Video

10 Pada percobaan memasukkan file Flash Video ini, menggunakan script javascript.js, dengan menggunakan embedswf. Tetapi entah kenapa saya mengalami kendala saat playing. Hanya sekali bisa dimainkan. Percobaan 4: Memasukkan video dengan elemen <video>

11 Percobaan 4 ini memasukkan video dengan cover berupa poster dengan format.jpg. Caranya dengan src langsung me linkkan lokasi video ataupun poster tsb. Percobaan 5: Memasukkan Video dengan banyak source

12 Dalam percobaan 5 ini, merupakan percobaan untuk menambah banyak source pada video. Namun yang terjadi adalah video tersebut akan bisa diplay jika browsernya memadai untuk diplay. Percobaan 6: Menambahkan Flash Mp3 Player Percobaan 6, yaitu menambahkan flash mp3 player dengan menggunakan script type javascript. Dan embed swf berupa player mp3.swf, serta audio dalam format mp3. Percobaan 7: Menambahkan Audio HTML5

13 Percobaan 7 menambahkan audio dengan controller player, seperti play,pause, volume, dan duration. Percobaan 8: Menambahkan Audio HTML 5 dengan Banyak tipe format

14 Pada percobaan ini dihasilkan secara tampilan hampir sama dengan praktikum 7, namun format audionya ditambah yaitu.mp3. dan.ogg. Percobaan 9: Menggunakan iframe Pada percobaan ini, silahkan anda isi pada bagian atribut src dengan nama salah satu file html anda yang berada pada satu folder dengan percobaan ini. Anda juga bisa menggantinya dengan alamat sebuah web Percobaai ini menampilkan iframe yaitu fram untuk tampilan yang diinginkan.

15 Percobaan 10: Embed Video Youtube Percobaan ke 10, memasukkan video dari situs youtube dangan cara menncopy paste embed dari link tersebut.

16 Tugas Dalam tugas ini, penggunaan a href dan target untuk menampilkan link yang sesua dengan yang diinginkan.

17

18 Kesimpulan Pada praktikum 3 ini kita belajar mengenai bagaimana menginput file flash pada web dengan format audio maupun video. Dengan cara menggunakan script js. maupun embed HTML. Dalam praktikum ini browser yang digunakan pengguna juga harus memadai (upgrade) karena jika tidak maka tampilan yang diinginkan tidak dapat muncul. Karena dalam format flash tidak semua browser masih menggunakannya.