5.3 HTML5 : Video - Laras - Politeknik Elektronika Negeri Surabaya

LAPORAN RESMI
PRAKTIKUM TEKNOLOGI WEB
“Flash Audio Video”
Dosen Pembimbing :
Dwi Susanto
Oleh :
Laras Intansari (4103131054)
3 D3 MMB B
PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING
DEPARTEMEN MULTIMEDIA KREATIF
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015
Praktikum 3
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 2005-06 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 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 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.
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.
5.2 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.
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>
mengendalikan pemutaran video
src
Atribut ini berfungsi untuk
menentukan alamat file
video.
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.
<video>
Elemen <video> memiliki sejumlah atribut
yang bisa anda gunakan untuk
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
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
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
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
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
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.
PRAKTIKUM 9
Pada percobaan ini, saya mencoba iframe. Iframe secara otomatis membuat bingkai untuk menampilkan
halaman html pada halaman html
TUGAS
Chrome version 45.0.2454.85