LAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Flash Audio Video

Transkripsi

1 LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB Flash Audio Video Dosen Pembimbing : Dwi Susanto Oleh : Laras Intansari ( ) 3 D3 MMB B PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015

2 Tujuan Praktikum 3 Flash, Video dan Audio - 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

3 - 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 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.

4 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. 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 HTML5 tersebut. Browser yang mendukung elemen baru tersebut, juga mewajibkan video dirubah ke format file 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 MP 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.

5 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. 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.

6 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. mengendalikan pemutaran video src <video src="video/puppy.mp4" poster="images/puppy.jpg" width="400" height="300" preload controls loop> Atribut ini berfungsi untuk menentukan alamat file video. <video> Elemen <video> memiliki sejumlah atribut yang bisa anda gunakan untuk controls Apabila digunakan maka atribut ini mengindikasikan bahwa browser harus menyediakan kontrol untuk memutar atau menghentikan video 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 atributatribut dituliskan, maka akan mengaktifkan opsi tersebut. Apabila atribut dihapus, maka opsi tersebut tidak dipakai atau diaktifkan.

7 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> poster Atribut ini memungkinkan anda untuk menggunakan sebuah gambar sebagai tampilan awal selagi menunggu file video selesai didownload 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

8 seperti ukuran, frame pertama, track list dan durasi video 5.4 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 HTML5 HTML5 telah memperkenalkan elemen baru yakni <audio>. Browser yang mendukung elemen ini akan menyediakan kontrol tersendiri, mirip dengan model kontrol pada video. PRAKTIKUM 1

9 Pada percobaan ini, kita harus memasukkan dokume flash menggunakan javascript. File javascript nya sudah disediakan, tapi saya tidah tahu fungsi dari java script itu sendiri. PRAKTIKUM 2 Pada percobaan ini, kita memasukkan dokumen flash menggunakan elemen embed, embed ini adalah semacam iflash untuk menampilkan file swf. PRAKTIKUM 3

10 Pada percobaan ini, saya memasukkan file flash menggunakan javascript. Javascript disini bertindak sebagai player menggantikan embed. PRAKTIKUM 4 Pada percobaan ini, saya memasukkan file video menggunakan bahasa HTML5. Tentunya supaya mendukung bahasa HTML5, browser kita harus versi terbaru. PRAKTIKUM 5

11 Pada percobaan ini, saya memasukkan video dengan banyak source, tapi nyatanya, meskipun inputnya lebih dari satu, video yang dapat diputar hanya satu. PRAKTIKUM 6 Pada percobaan ini, saya menambahkan file mp3 yang dimainkan pada flash player dan menggunakan javascript. PRAKTIKUM 7

12 Pada percobaan ini, saya memasukkan file audio menggunakan HTML5, dengan menggunakan bahasa HTML5, penulisan program lebih singkat dan mudah. Cukup dengan <audio> yang merupakan bahasa untuk memasukkan file audio, dengan diikuti source dari audio tersebut PRAKTIKUM 8 Pada praktikum ini, saya memasukkan berbagai macam format audio menggunakan HTML5. Format yang dimasukkan yaitu ogg dan mp3. Pada <audio controls autoplay> maksudnya saya menampilkan control play pause stop dan otomatis play ketika browser dibuka.

13 PRAKTIKUM 9 Pada percobaan ini, saya mencoba iframe. Iframe secara otomatis membuat bingkai untuk menampilkan halaman html pada halaman html TUGAS

14 Chrome version