LAPORAN PRAKTIKUM - desypribadi mb

LAPORAN PRAKTIKUM
Flash, Video dan Audio
Dosen Pembimbing :
Dwi Susanto
Oleh :
Desy kartika (4103131040)
PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING
DEPARTEMEN MULTIMEDIA KREATIF
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
2015
Tujuan
- Mahasiswa memahami cara menambahkan dokumen Flash ke halaman
website
- Mahasiswa memahami cara menambahkan video dan audio ke halaman
website
- Mahasiswa memahami element dan 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>.
Menambahkan Dokumen Flash
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.
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
www.mirovideoconverter.com
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.
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.
HTML5 Video
Pada saat penulisan modul ini, elemen 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 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 telah memperkenalkan elemen baru yakni <audio> .
Browser yang mendukung elemen ini akan menyediakan kontrol tersendiri,
mirip dengan model kontrol pada video
Alat dan Bahan
 Modul
 Laptop
Hasil Praktikum
1.
2.
Analisa : Dalam percobaan ke-2 ini saya mencoba memasukkan dokumen
flash menggunakan elemen <embed> untuk menampilkan sebuah gambar
berupa swf. Dengan menambahkan <embed src="flash/bird.swf" />
, maka akan jadi seperti gambar diatas.
3.
Analisa: percobaan 3 ini saya mencoba untuk memasukkan file flash video.
Penambahan video pada dokumen html dilakukan dengan elemen video, yang
sangat mirip dengan elemen audio. Atribut yang dapat digunakan pada
elemen audio juga digunakan pada elemen video, sehingga perbedaan utama
dari kedua elemen ini terdapat pada nama elemen dan dukungan format.
Dengan menambahkan { movie:"../video/puppy.flv"}; ("flash/osplayer.swf",
"snow", "400", "345", "8.0.0", flashvars, params) sehingga tampilan seperti
gambar di atas.
4.
Analisa: Percobaan 4 dengan memasukkan video dengan elemen <video>. Dengan cara
menuliskan seperti
<video width="320" height="240" controls>
<source src="video_anda.mp4" type="video/mp4">
<source src="video_anda.ogg" type="video/oog">
</video> dan untuk melengkapi penggunaan element bisa juga menambahkan width=”dalam
pixel” (Untuk Menentukan lebar video)
height=”dalam pixel” (Untuk Menentukan tinggi video) , loop=”loop” (Untuk Mengulangi
pemutaran video terus menerus)
Hasilnya seperti gambar diatas.
5.
Analisa : Pada percobaan ke-5 ini saya mencoba untuk memasukkan video dengan banyak
source. Dengan menambahkan <video poster="images/puppy.jpg" width="400' height="320"
preload controls loop>
<source src="video/puppy.mp4 type='video/mp4;codecs="avc1.42E01E, mp4a.40.2" ' />
<source src="video/puppy.webm" type='video/webm;codecs="vp8, vorbis" ' />
seperti gambar di atas hasilnya.
6.
7.
Analisa: Pada percobaan 7 ini saya mencoba untuk menambahkan audio HTML5.
Sebelumnya perlu diketahui bahwa setiap browser men-support audio dan video dengan type
yang berbeda-beda, jadi lebih baik kita menyediakan video/audio yang sama dengan format
yang berbeda-beda. Kode audio bisa seperti :
<audio src="audio/test-audio.ogg" controls autoplay> sehingga menjadi gambar seperti diatas.
8.
Analisa: percobaan 8 ini saya menambahkan audio HTML5 dengan banyak tipe format.
Dengan cara menambahkan kode
<source src="audio/test-audio.ogg" />
<source src="audio/test-audio.mp3" /> sehingga seperti gambar diatas.
9.
Analisa: percobaan 9 ini saya mencoba menggunakan iframe. Iframe sebuah elemen untuk
menampilkan sebuah halaman web ke dalam halaman web. Dengan menggunakan <iframe>
dan memasukkan link url halaman web yang ingin di tampilkan. Kemudian mengatur lebar dan
tingginya seperti <iframe width="450" height="350" src="flash_js.html"> seperti gambar diatas.