00.53
Nina
I.
Pendahuluan
Seiring
dengan semakin berkembangnya Internet serta fasilitasnya yaitu Web, maka
beberapa aplikasi mulai merambah web termasuk diantaranya VoD. Dengan demikian,
para pengguna komputer sebagai client tidak lagi memerlukan adanya perangkat
lunak client tertentu untuk dapat memainkan video sesuai keinginan, tetapi
dapat memanfaatkan browser web sebagai client untuk memutar video tersebut.
Hanya saja tidak sepenuhnya benar apabila browser saja sudah cukup karena
sebenarnya browser dirancang tidak untuk konten multimedia. Oleh karena itu
biasanya pengguna dipersyaratkan untuk melakukan instalasi suatu plugin ke
browsernya agar browser dapat melakukan pekerjaan yang dalam keadaan sebelumnya
(atau pada browser normal tanpa tambahan apa-apa) tidak dapat dilakukan. Plugin
browser memang tidak jauh berbeda dibandingkan client spesifik, perbedaan yang
jelas adalah bahwa untuk menggunakannya diperlukan browser jadi tidak dapat
berdiri sendiri sepeti halnya client terdedikasi.
Tergantung
jenis multimedia/file video yang ada, maka plugin pada browser juga dapat pula
berbeda. Karena VoD murni sangatlah berat, maka untuk mengatasinya dapat
membuat aplikasi semi VoD berbasis web, seperti yang dilakukan YouTube. Plugin
yang digunakan adalah Flash Player, karena YouTube secara default menyimpan
file-file video dalam format flv (Flash Video) yang berukuran lebih kecil
dibandingkan file video format lain, tentu saja dengan kualitas video yang
sebenarnya berbeda.
II.
Tujuan
Mencoba dan
menerapkan Video on Demand (VoD) berbasis web dalam sebuah jaringan kecil.
III.
Konsep
Praktikum
Untuk
membangun aplikasi berbasis web, tentu saja harus dipahami terlebih dahulu
bagaimana web bekerja. Sebelum pengguna lewat browsernya mendapatkan suatu
layanan, maka layanan tersebut harus dipersiapkan terlebih dahulu menggunakan
perangkat lunak server web. Dalam hal ini termasuk layanan multimedia yang
hendak disajikan ke browser.
Persiapan
yang harus dilakukan tentunya membangu sebuah situs web yang akan membawa
konten multimedia. Dikarenakan sulitnya menggunakan VoD murni apalagi yang
berbasis Web (tanpa suatu client terdedikasi), maka dalam sesi kali ini akan dibangun aplikasi semi VoD menggunakan gaya seperti
pada YouTube yaitu mengirimkan file .flv untuk diputar pada komputer pengguna.
Halaman web
yang akan ditampilkan pengguna juga perlu disiapkan terlebih dahulu dengan
menyertakan elemen plugin untuk memutar file .flv. Secara default, apabila
ditemukan sebuah file .flv oleh browser dan plugin tidak ada sedangkan halaman
web tidak mempersiapkan diri untuk terhubung ke penyedia plugin, maka browser
akan mencoba membukanya menggunakan Flash Player terpisah yang akan dijalankan
oleh browser di luar lingkungan browser. Tetapi hal ini hanya akan terjadi
apabila browser telah dikonfigurasi untuk membuka helper program terpisah,
sesuatu yang umumnya dapat dijumpai pada browser lama dan jarang dijumpai pada
browser yang lebih baru.
IV.
Perangkat lunak yang digunakan
·
Sistem operasi MS Windows
·
MS Notepad++
·
MS Internet Explorer
·
Mozilla Firefox
·
Adobe Flash Professional
·
Adobe Flash Player
V.
Hasil dan
Pembahasan Program
1.
Deskripsi Program
Di
dalam praktikum kali ini, membahas mengenai bagaimana membuat Video On Demand
(VOD) di dalam sebuah halaman web / html dengan tampilan yang lebih kompleks. Lebih
kompleks karena tidak hanya terdiri dari 1 video melainkan lebih dari satu
video. Di dalam praktikum ini, saya memasukkan 5 video yang terdiri dari format
avi dan mp4. Berikut adalah tampilannya
dengan web dengan frame 3 kolom.
2.
Membuat Halaman Web Berisi
VOD
a.
Mulai dengan setting
konfigurasi sistem jaringan pada komputer. Persiapkan pengalamatan yang sesuai
untuk setiap komputer yang akan melakukan komunikasi dalam jaringan. Cek setiap
protokol yang digunakan, sertakan QoS untuk memastikan komunikasi mendapat prioritas.
b.
Karena tidak menggunakan
server web khusus yang berarti juga memerlukan server khusus, maka diperlukan
suatu cara agar browser di komputer client seolah-olah akan mengakses suatu
situs. Lakukan hal ini dengan melakukan modifikasi pada file-file host dan
lmhost yang terdapat pada folder system32/drivers/etc. Beri nama komputer calon
server layanan sesuai kehendak Anda, sesuaikan dengan alamat IP dari komputer
pemberi layanan tersebut.
c.
Persiapkan halaman web utama.
Buatlah sebuah halaman web sederhana menggunakan notepad.
·
Halaman Index (index.html)
Ini merupakan halaman utama tempat disatukannya
Iframe dengan menggunakan frame. Berikut adalah coding html nya
<html>
<head>
<title>Home</title>
</head>
<FRAMESET ROWS
="20%,80%">
<frame
src = "frame atas.html" NAME="Frame1">
<FRAMESET
COLS="15%,70%">
<frame
src = "frame kiri.html" name="Frame2"
scrolling="yes" border=no>
<frame
src = "frame tengah.html" name="Frame3" border=no>
</FRAMESET>
</FRAMESET>
</html>
<title>Home</title>
Digunakan untuk
memberikan title pada html. Title ini akan tampil nantinya di tab browser.
<FRAMESET
rows="20%,80%">
<FRAME
SRC="atas.html" NAME="Frame1">
Ini adalah frame yang akan dilink kan pada halaman frame atas.html.
Frame ini diberi nama Frame1
<FRAMESET
cols="15%,70%">
<FRAME
SRC="pilihan menu.html" NAME="Frame2">
Ini adalah frame yang
terletak di bagian sebelahkiri yang nantinya akan di link kan ke halaman
pilihan frame kiri.html. Frame ini diberi nama Frame2
<FRAME
SRC="pembukaa.html" NAME="Frame3">
Ini adalah frame yang
nantinya akan di link kan dengan halamanframe tengah.html. Ini adalah Frame
terakhir dan diberi nama Frame3.
Berikut adalah
tampilannya
·
Halaman Atas (frame
atas.html)
Berisi tampilan judul halaman atau bisa dikatakan
sebuah title halaman web. Text nya menggunakan marquee agar dapat bergerak dari
kanan ke kiri kemudian kembali lagi tanpa henti. Berikut adalah coding untuk
membuat halaman atas
<html>
<head>
<style
type="text/css">
body{
background:url(pu.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<div class='tabs section'
'id='crosscol'>
<div class='widget>
<div class='widget-content'>
<div
class="descriptionwrapper">
<p class=
description"><span><center><font face="Cooper
Black" color="brown">
<marquee>
<center><font
size="+4">Nina's Site</font><br>
<font
size="+2">"WEB BASED VIDEO ON DEMAND"</font></center></marquee>
</font></center>
</span></span></p>
</div>
</html>
Berikut adalah Hasilnya :
·
Halaman Pilihan Menu (frame
kiri.html)
Halaman ini nantinya berisi dengan list video yang
dapat di putar oleh user. Berikut adalah codingnya
<html>
<head>
<style
type="text/css">
body{
background:url(pu.jpg);
background-repeat: no repeat;
background-attachment:fixed;
background-position:center center
}
a:link {
color:blue;
}
a.one:visited {
color:black;
}
a.one:hover {
color: green;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<center><h2>Music
List</h2>
<body
bgcolor="violet">
<br>
<image src="raef.png"
width="170" height="150"></img><br>
<a class="one"
href="iframe1.html" title="Photoshop"
target="Frame3" style="text-decoration:none">
<font
face="cambria">Raef-Your mercy
lyric</a><br></font>
<br>
<image src="SO7.jpg"
width="170" height="150"></img><br>
<a class="one"
href="iframe.html" title="Pemuja Rahasia by Sheila on 7"
target="Frame3"
style="text-decoration:none">
<font
face="cambria">SO7-Pemuja Rahasia</a><br></font>
<br>
<image src="kecil.png"
width="170" height="150"></img><br>
<a class="one"
href="iframe3.html" title="Tutorial Memperkecil Video"
target="Frame3"
style="text-decoration:none">
<font
face="cambria">Tutorial Memperkecil
Video</a><br></font>
<br>
<image src="insta.png"
width="170" height="150"></img><br>
<a class="one"
href="iframe4.html" title="Instagram DESSERT chocolate"
target="Frame3"
style="text-decoration:none">
<font
face="cambria">Ricipe Instagram DESSERT
chocolate</a><br></font>
<br>
<image src="bunga.png"
width="170" height="150"></img><br>
<a class="one"
href="iframe5.html" title="Tutorial Bros Bunga Matahari dari
Kain Flanel" target="Frame3"
style="text-decoration:none">
<font
face="cambria">Tutorial Bros Bunga Matahari dari Kain
Flanel</a><br></font>
</center>
</br>
</font>
</body>
</html>
Berikut adalah tampilannya:
·
Halaman Tengah (frame tengah.html)
Halaman Tengah (frame tengah.html)
Berisi tentang nama, nim, kelas dan angkatan atau bisa disebut juga
data diri pembuat.
Berikut adalah codingnya
<html>
<body>
<style
type="text/css">
body{
background:url(pl.jpg);
background-repeat:no repeat;
background-attachment:fixed;
background-position:center
center
-webkit-background-size:
cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
}
</style>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table
bgcolor="#4B0082" align="center">
<tr>
<b>
<td><font
face="Comic Sans MS" color="#B0C4DE"
size="+2">Nama : Naafi
Fiddiinina </font></td>
<td></td>
<td></td>
<tr>
<b>
<td><font
face="Comic Sans MS" color="#B0C4DE"
size="+2">NIM :
1300016032 </font></td>
</tr>
<tr>
<b>
<td><font
face="Comic Sans MS" color="#B0C4DE"
size="+2">Kelas :
Sistem Informasi A </font></td>
<td></td>
</tr>
</table>
</body>
</html>
Berikut adalah tampilannya:
·
Halaman Video 4
(video4.html)
Adalah halaman yang berisi link video.
Berikut adalah codingnya:
<html>
<head>
<body>
<a href="">
<object width="550"
height="400">
<param name="Instagram
DESSERT chocolate" value="Resep">
<embed src="Instagram DESSERT
chocolate.mp4" width="550" height="400">
</embed>
</object>
</a>
</body>
</head>
</html>
Berikut adalah penjelasan coding html di
atas
<a href="">
Untuk melink kan ke file video jika file
tersebut berada di dalam folder
<object width="550"
height="400">
Untuk menentukan ukuran objek atau file
video seberapa besar ingin ditampilkan di halaman browser.
<param
name="Instagram DESSERT chocolate" value="Resep">
Digunakan untuk memberikan nama pada
video. Nama terserah pada kita.
<embed src="Instagram DESSERT chocolate.mp4"
width="550" height="400">
</embed>
Digunakan untuk melink kan html ke tempat
video berada.
Berikut adalah tampilannya :
·
Halaman Iframe (iframe4.html)
Digunakan sebagai bingkai dari video yang akan
ditampilkan
Berikut adalah codingnya
<html>
<head>
<head>
<style
type="text/css">
body{
background:url(pl.jpg);
background-repeat:no repeat;
background-attachment:fixed;
background-position:center
center
-webkit-background-size:
cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0;
}
</style>
<center>
<iframe
src="video4.html" width="600" height="500">
<p>Your browser does
not support iframes</p>
</iframe>
<center>
</body>
</html>
Berikut adalah tampilannya
Lakukan hal yang sama pada iframe
lainnya. Jumlah iframe disamakan dengan jumlah halaman video.
d.
Lakukan instalasi Flash Player
(termasuk versi ActiveX-nya) ke dalam komputer bilamana belum terpasang.
Lakukan uji dengan browser MS IE dan
Mozilla Firefox dengan cara memanggil nama server tadi dalam browser.
e.
Cek pada konten video, lakukan
uji untuk interaktivitas dalam memainkan video dengan menggunakan kontrol pada
player.
Tampilan Saat Memutar Video
Lirik Raef yang berjudul Your Mercy
Tampilan Saat Memutar Video Sheila On 7 – Pemuja
Rahasia
Tampilan Saat Memutar Video Tutorial Memperkecil
Video
Tampilan Saat Memutar Video Resep membuat kue
berbentuk Instagram
Tampilan Saat Memutar Video tutorial membuat Bunga
Matahari dari kain Fanel
VI.
Kesimpulan
Tampilan Video On Demand ini
berbasis web seperti ini mirip dengan situs youtube. Namun dari segi fungsi sangat berbeda. Di
dalam halaman ini user dapat melihat video tanpa merasakan adanya loading pada
tampilan video. User akan merasa nyaman saat menontonnya karena video memang
sudah ada di server dan user hanya tinggal mengaksesnya.
Postingan
0 komentar:
Posting Komentar