2

1. Pendahuluan

Kebutuhan masyarakat saat ini disebabkan oleh perkembangan teknologi

yang ada. Seperti halnya dalam penyampaian informasi, yang tidak hanya berupa

teks tetapi berupa multimedia. Multimedia merupakan kombinasi teks, foto, seni

grafis, animasi, suara, dan elemen-elemen video yang dimanipulasi secara digital

[1]. Hal inilah yang membuat informasi lebih menarik dan mudah dimengerti.

Kebanyakan masyarakat kalangan menengah lebih memilih untuk menggunakan

komputer daripada video player. Hal ini dikarenakan komputer dapat membuat

informasi multimedia, memutar video dan masih banyak lagi, sedangkan video

player hanya dapat memutar video.

Akan tetapi tidak semua komputer dilengkapi oleh aplikasi video player,

dan tidak semua pengguna mendapatkan hak admin untuk menginstal aplikasi.

Contohnya di warnet yang hanya mendapat hak sebagai pengguna / user, dalam

hal ini pengguna hanya dapat menggunakan aplikasi yang sudah ada di komputer

tersebut.

Dengan adanya teknologi HTML5 yang merupakan teknologi HTML

terbaru, yang mana memberikan kemudahan untuk pengembang dalam hal kode.

Selain itu teknologi HTML5 juga memiliki elemen baru, yaitu HTML5 video

yang berfungsi sebagai pengganti flash player, sehingga pengguna tidak perlu lagi

meng-install plug-in flash player untuk memutar video.

Dengan demikian dapat dirumuskan bagaimana membangun aplikasi video

player dengan menggunakan teknologi HTML5. Adapun manfaat antara lain,

pengguna dapat memiliki aplikasi video player yang mudah digunakan. Manfaat

yang lain adalah sebagai referensi dalam pembelajaran rekayasa web, khususnya

video player berbasis web dengan memanfaatkan JavaScript dan XML untuk

mengelola control video yang dimiliki HTML 5.

Dalam penelitian ini tidak membandingkan aplikasi video player berbasis

web yang lain, file video yang digunakan MP4, bahasa pemrograman yang

digunakan pada aplikasi video player ini adalah bahasa pemrograman visual C#.

Dan untuk saat ini browser yang dapat menjalankan aplikasi ini hanya Google

Chrome.

2. Kajian Pustaka

Penelitian yang sebelumnya yang berjudul Pemodelan Audio Player

Berbasis Web Dengan Menggunakan HTML 5 adalah penelitian yang membahas

tentang pemanfaatan HTML5 Audio untuk sebuah aplikasi audio player berbasis

web yang mudah digunakan dan tidak membutuhkan banyak memory [2].

Perbedaan dengan penelitian yang akan dilakukan adalah engine HTML5 yang

digunakan, pada penelitian Pemodelan Audio Player Berbasis Web Dengan

Menggunakan HTML5 menggunakan HTML5 audio sedangkan penelitian yang

akan dilakukan menggunakan HTML5 video. Perbedaan yang lain adalah aplikasi

yang dibangun, pada penelitian sebelumnya merupakan aplikasi server yang harus

menggunakan koneksi internet, sedangkan penelitian yang akan dilakukan

merupakan aplikasi client yang tidak membutuhkan koneksi internet.

3

Penelitian yang kedua adalah Web Based Video Streaming. Sebuah ekstraksi

pergerakan yang efisien dari algoritma yang sesuai secara langsung berdasarkan

sistem streaming multimedia akan di bahas penelitian ini. Vector gerakan (MV)

berdasarkan ekstraksi objek adalah digunakan untuk secara dinamis dalam

mendeteksi objek yang ada. Untuk menggunakan gelombang secara efisien, obyek

yang penting dapat di deteksi secara langsung, kemudian di ubah kodenya dan di

transmisikan dengan kualitas yang lebih tinggi serta tingkatan frame yang lebih

tinggi juga daripada yang ada di latar belakangnya. Agar dapat memenuhi

persyaratan dalam sistem secara langsung, maka operasi intensif tanpa

perhitungan melalui computer tidak dimasukkan dalam kerangka kerja ini.

Selanjutnya, agar dapat menjamin kecepatan yang didapatkan adalah kecepatan

tertinggi, semua implementasi akan dijalankan pada domain yang sudah di

kompresikan tanpa perlu untuk melakukan proses dekompresi. Performa ekstraksi

yang bagus akan ditunjukan melalui hasil eksperimen [3]. Perbedaan penelitian ini

dengan penelitian yang akan dilakukan adalah HTML yang digunakan, pada

penelitian yang berjudul Web Based Video Streaming menggunakan HTML4,

sedangkan penelitian yang akan dilakukan menggunakan HTML5. Perbedaan

yang lain adalah tujuan dari penelitian, pada penelitian sebelumnya bertujuan

untuk membahas bit rate yang diakses, sedangkan penelitian yang akan dilakukan

bertujuan untuk membangun aplikasi video player yang dapat digunakan pada sisi

client.

Video adalah teknologi untuk menangkap, merekam, memproses,

mentransmisikan dan menata ulang gambar bergerak. Video dapat menggunakan

film seluloid, sinyal elektronik, atau media digital. Video juga dapat dikatakan

sebagai gabungan gambar-gambar mati yang dibaca berurutan dengan kecepatan

tertentu. Gambar-gambar yang digabung tersebut dinamakan frame, dan

kecepatan pembacaan gambar disebut frame rate. Semakin besar nilai frame rate

maka akan membuat pergerakan yang ditampilkan semakin halus.

Video player adalah istilah yang biasa digunakan untuk mendeskripsikan

software komputer untuk memainkan file video. Sebagian besar media player

dapat menampilkan sejumlah format media, baik file audio ataupun video,

sedangkan yang khusus untuk memainkan video disebut dengan video player [4].

HTML (Hypertext Markup Language) adalah sebuah jenis teks dokumen

khusus yang digunakan oleh web browser untuk mempresentasikan teks dan

gambar [5]. HTML merupakan pengembangan dari standar pemformatan

dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML

sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak

tergantung pada suatu sistem operasi tertentu. HTML dibuat oleh Tim Berners-

Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh

browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang

sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan

dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi

dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task

Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). HTML

3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah

usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada

4

tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan

pada bulan Januari1997.

HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April

1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan.

(18 Desember 1997). HTML versi terbaru adalah HTML 5.0 yang dikeluarkan

oleh AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan ratusan

vendor lainnya yang secara resmi diterbitkan pada tanggal 19 Oktober 2010,

namun belum mendapatkan rekomendasi dari W3C.

HTML5 merupakan HTML versi terbaru dari HTML yang diharapkan

dapat memperbaiki kekurangan-kekurangan HTML4, sekaligus untuk

mempermudah pengembangan web [6]. Adapun beberapa alasan penggunaan

HTML5, antara lain : Fiturnya masih berdasarkan pada HTML, CSS, DOM, dan

JavaScript. Mengurangi penggunaan plugin dari pihak ketiga. Lebih independen.

Pengembangan ke public yang lebih baik. Elemen-elemen baru yang ditambahkan

pada HTML5 adalah Elemen Markup, elemen ini berisi tag-tag seperti header,

footer, section, nav, dan masih banyak lagi. Elemen Media, elemen inilah yang

mendukung HTML5 untuk menggantikan Flash Player. Elemen ini berisi tag

audio, video, source, dan embed. Elemen Canvas, elemen Canvas ini berfungsi

untuk membuat sebuah objek atau gambar pada halaman web hanya dengan

bantuan JavaScript. Elemen Baru Form, elemen yang berisi tag datalist, keygen,

output.

ASP.NET adalah kumpulan teknologi dalam Framework .NET untuk

membangun aplikasi web dan XML Web Services. Halaman ASP.NET dijalankan

di server kemudian akan dibuat halaman markup (penanda) seperti HTML

(Hypertext Markup Language), WML (Wireless Markup Language), atau XML

(Extensible Markup Language) yang akan dikirim ke browser dekstop atau

mobile. Halaman HTML yang dikembalikan dapat juga secara opsional berisi

kode script client-side/sisi-client yang akan secara langsung diterjemahkan oleh

browser [7].

JavaScript adalah bahasa pemrograman yang ditempelkan pada kode

HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan

dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan

JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir

sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan

merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien

(kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh

pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien [8].

3. Metode Perancangan

Model prototype merupakan suatu teknik untuk mengumpulkan informasi

tertentu mengenai kebutuhan-kebutuhan informasi pengguna secara cepat. Dengan

metode prototyping ini pengembang dan pelanggan dapat saling berinteraksi

selama proses pembuatan sistem. Secara lengkap, alur model prototype akan

digambarkan seperti pada Gambar 1.

5

Gambar 1 Prototype Model [10]

Gambar 1 merupakan gambaran tahapan umum dari prototype model.

Berikut adalah penjelasan dari tahap – tahap prototype model.

1. Listen To Customer

Pada tahap ini peneliti mencari dan mengumpulkan data yang dibutuhkan

sistem yang nantinya digunakan untuk aplikasi tersebut. Hal ini sangat dibutuhkan

karena aplikasi harus dapat berinteraksi dengan perangkat – perangkat lain seperti

hardware, database serta user. Keuntungan dari model prototype ini, yaitu

kesalahan yang mungkin akan terjadi dapat dideteksi lebih dini jadi aplikasi yang

dihasilkan dapat sesuai dengan yang diinginkan.

Guna mendapatkan data yang dibutuhkan untuk mendukung dalam

merancang aplikasi tersebut menggunakan beberapa metode, antara lain metode

Observasi denga cara melakukan wawancara dengan 10 mahasiswa yang

tergabung dalam komunitas multimedia di Fakultas Teknologi Informasi UKSW.

Berdasarkan wawancara tersebut, dengan adanya aplikasi video player berbasis

web ini akan dapat lebih memudahkan pengguna untuk memutar file-file video

yang berada di server maupun client. Pengguna tidak membutuhkan aplikasi video

player desktop yang akan membutuhkan banyak memory.

Metode referensi yaitu melakukan pembelajaran melalui artikel dan buku-

buku yang membahas antara lain teknologi browser HTML 5, yaitu JavaScript

dan XML khususnya untuk membangun aplikasi video player, teknologi web

development, yaitu .Net Framework 3.5 dengan bahasa C# . Teknologi ini untuk

membangun aplikasi web yang memiliki fasilitas video player. Software yang

digunakan yaitu Miscrosoft Visual Web Developer 2008 Express Edition.

Pengumpulan kebutuhan yang dilakukan juga berkaitan dengan kebutuhan

software dan hardware yang digunakan dalam membangun aplikasi. Spesifikasi

software yang dipakai adalah Microsoft Visual Web Developer 2008 Express

Edition, Rational Rose Enterprise Edition, Google Chrome. Spesifikasi hardware

yang dipakai saat pembuatan aplikasi adalah Processor Intel Core 2 Duo 2.2 Gb,

RAM 2 GB, Harddisk 500 GB.

2. Build / Revise

Melakukan tahap perancangan sistem dan perangkat lunak dengan

menggunakan data dari analisa kebutuhan yang telah dilakukan. Perancangan

aplikasi ini disajikan dalam bentuk UML (Unified Modeling Language). UML

(Unified Modeling Language) disebut sebagai bahasa pemodelan bukan metode

6

dan disebut juga sebagai bahasa untuk menggambarkan sistem. UML (Unified

Modeling Language) akan digambarkan dengan menggunakan bagan alir sistem

yang menunjukkan bagaimana sistem secara fisik nantinya akan ditempatkan dan

diterapkan sehingga dapat menunjukkan arah aliran data suatu proses.

3. Customer Test Drive

Setelah prototype selesai dirancang maka tahap selanjutnya adalah

melakukan evaluasi prototype, pada tahap ini user mengevaluasi prototype yang

telah dibuat. Evaluasi ini akan digunakan untuk memperjelas kebutuhan program.

Jika tujuan umum yang telah dibuat di tahap paling awal belum tercapai, maka

proses perbaikan dimulai kembali dari tahap awal dan dilanjutkan ke tahap

berikutnya. Proses ini berakhir setelah tujuan umum telah tercapai.

Pada prototype yang pertama, aplikasi ini hanya dapat dijalankan pada sisi

server. aplikasi prototype yang pertama ini juga belum memiliki playlist dan

upload sehingga hanya dapat menjalankan satu file video. Prototype yang pertama

ini juga berfungsi untuk mengetahui bahwa aplikasi ini hanya dapat berjalan pada

browser yang mendukung HTML5.

Prototype kedua berupa aplikasi client, akan tetapi fasilitas drag and drop

belum bisa berfungsi.

4. Perancangan Sistem

Perancangan sistem yang digunakan adalah Unified Modelling Language

(UML). Unified Modelling Language (UML) adalah sebuah "bahasa" yg telah

menjadi standar dalam industri untuk visualisasi, merancang dan

mendokumentasikan sistem piranti lunak [11].

Use Case Diagram

Use case diagram menggambarkan fungsionalitas yang diharapkan dari

sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar

dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan

gambaran fungsi-fungsi pada sistem tersebut. Lebih jelasnya dapat dilihat pada

Gambar 2.

Gambar 2 Use Case Diagram Video player.

Pada aplikasi ini hanya terdapat satu user yang dapat mengakses secara

langsung media playlist. Media playlist mempunyai tiga extend, yaitu video file

path, drag and drop playlist item dan add video. Video file path digunakan untuk

memberikan alamat dari file video yang ingin ditambahkan didalam playlist. Drag

and drop playlist item digunakan untuk menghapus file video yang ada di playlist

Play / Pause

Previous

Next

Stop

Capture

View Video

Mengatur Volume

Add Video

Control Video

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<extend>>

<<include>>

Media Playlist

<<extend>>User

Video File Path

Drag and Drop Playlist Item

<<extend>>

<<extend>>

Drag and Drop Control Video

<<extend>>

7

dengan cara drag and drop. Add video adalah fasilitas untuk menambahkan video

setelah user mengisikan video file path. Selain media playlist, user juga dapat

mengakses secara langsung control video. Control video mempunyai satu include,

yaitu view video yang digunakan sebagai layar untuk menampilkan video. Control

video juga mempunyai tujuh extend, yaitu Play/Pause, Stop, Capture, Previous,

Next, Mengatur Volume, dan Drag and Drop Control Video. Play berfungsi untuk

memulai memutar video, sedangkan pause digunakan untuk menghentikan

sementara dan dapat dilanjutkan kembali pada current time yang sama. Play dan

Pause jadi satu karena ketika video belum diputar maka tidak akan ada yang akan

Pause, begitu juga sebaliknya. Stop digunakan untuk menghentikan video yang

diputar dan mereset current time video, sehingga video akan kembali ke awal.

Capture as image digunakan untuk mengambil gambar video. Previous digunakan

user ketika ingin memutar video sebelumnya yang ada di playlist. Next berfungsi

untuk memutar video yang selanjutnya. Mengatur volume digunakan user untuk

mengatur besar kecilnya suara yang diinginkan. Drag and Drop Control Video

berfungsi untuk memindahkan control video ke area yang sudah disediakan.

Activity Diagram Add Video

Pada activity diagram ini akan dijelaskan bagaimana cara menambahkan

video pada playlist. Untuk lebih jelasnya dapat dilihat pada Gambar 3.

Gambar 3 Activity Diagram Add Video.

Pertama-tama user membuka Home Page aplikasi video player, setelah itu

user harus mengisikan Video File Path yang merupakan alamat file video yang

akan ditambahkan pada playlist. Hal ini disebabkan karena pada aplikasi client

terdapat perlindungan keamanan untuk mengakses langsung data-data pengguna

secara manual. Setelah user mengisikan Video File Path, maka untuk

mengeksekusi user melakukan Add to Playlist. Dengan demikian file video yang

diinginkan akan ditambahkan pada Media Playlist.

Activity Diagram Play Video

Pada activity diagram ini akan dijelaskan bagaimana cara memutar video

pada aplikasi web video player. Berikut ini adalah gambar Activity Diagram Play

Video.

Start

End

Home Page

Video File

Path

Add to Playlist

Media Playlist

VideoPlayerUser

8

Gambar 4 Activity Diagram Play Video.

Activity diagram play video dimulai dengan user membuka Home Page,

yang mana terdapat Media Playlist yang berisi nama dari video yang akan diputar.

User memilih video yang ada pada media playlist dengan cara klik dua kali, maka

video akan diputar pada view video. Setelah itu user dapat melakukan mengatur

volume, play/pause, stop, previous, next yang termasuk dalam control video.

Activity Diagram Drag and Drop Control Video

Pada activity diagram ini akan dijelaskan tentang fasilitas drag and drop

control video . Berikut ini adalah gambar Activity Diagram Control Video.

Gambar 5 Activity Diagram Drag and Drop Video.

Sequence Diagram Add Video

Pada sequence diagram ini akan dijelaskan langkah-langkah untuk

menambahkan video pada playlist. Berikut adalah gambar Sequence Diagram Add

Video.

Start

End

Home Page

Media Playlist

View Video

Klik Nama File

Ya

Tidak

Next

Stop

Control Video

Previous

Capture

Play/Pause

Volume

VideoPlayerUser

Start

End

Home Page

Control Video

Play/Pause

Stop

Mengatur

Volume

Previous

Next

Drag and Drop

Control Video

Capture

VideoPlayerUser

9

Gambar 6 Sequence Diagram Add Video.

Sequence Diagram Play Video

Pada sequence diagram ini akan dijelaskan langkah-langkah untuk memutar

video pada playlist. Berikut adalah gambar Sequence Diagram Play Video.

Gambar 7 Sequence Diagram Play Video.

Langkah pertama yang dilakukan oleh user membuka Home Page, lalu

mengisikan alamat file video yang ingin ditambahkan ke dalam teks box File

Video Path. Selanjutnya untuk melakukan mengeksekusi path file dilakukan Add

to Playlist yang merupakan control. Setelah itu file video akan ditambahkan pada

media playlist.

: User

: Home Page : Media

Playlist : Play Video : Control Video

Browse

Pilih File Video

Klik kiri

Playing Video

Pilih Pause, Next, Previous, Capture, Stop, volume control

Respond

close

: User

: Home Page File Video PathAdd to Playlist : Control

Video

: Media

Playlist

Browse

Mengisi teks box

Menunggu eksekusi

Mengeksekusi

Menambahkan File Video

Menunggu dari control video

Close

10

5. Hasil dan Pembahasan

Dari implementasi dihasilkan sebuah aplikasi multimedia yang mampu

memutar file video berformat MP4. Lihat Gambar 8 halaman utama aplikasi.

Gambar 8 Halaman Utama Aplikasi

Pada Gambar halaman utama terdapat media playlist, control video, dan

tempat untuk add video. Aplikasi ini dibangun menggunakan teknologi HTML5.

Dibawah ini merupakan code HTML. Kode program 1 Source Code HTML

Code pada baris ke-14 adalah code HTML5 video yang mana digunakan

untuk membuat player pada aplikasi ini, dengan adanya code inilah aplikasi video

player ini dapat memutar file video. Code yang merupakan elemen baru dari

1. <div id="SLVPlaylistPlayer">

2. <div id="SLVPlayer">

3. <div id="SLV_Playlist">

4. <div id="SLV_ItemList">

5. </div>

6. </div>

7. </div>

8. <div id="VideoPlayer">

9. <div id="AlternateControlArea" draggable="true"

ondragstart="DragAlternateControlAreaStart(event)"

ondragover="DragAlternateControlAreaOver(event)"

ondragenter="DragAlternateControlAreaEnter(event)"

ondragleave="DragAlternateControlAreaLeave(event)"

ondrop="DropAlternateControlArea(event)">

10. </div> 11. <table> 12. <tr height="300px" valign="middle">

13. <td> 14. <video id="SLVideoPlayer" style="width:450px; height:300px;"

preload="metadata" >

15. </video>

11

HTML5 ini, membuat Aplikasi ini tidak bergantung dengan pihak ketiga, yang

mana digunakan pada versi HTML sebelumnya.

Media Playlist

Media Playlist berisi daftar video yang dimiliki user. Media Playlist ini

menggunakan local storage yang ada pada browser. Dengan menggunakan local

storage ini, file video akan disimpan terus walaupun browser sudah ditutup. Kode program 2 Source Code Media Playlist

Kode tersebut digunakan untuk membaca data pada local storage. Data

tersebut berupa id, tittle, dan path. Data-data inilah kemudian yang akan disusun

pada media playlist. Akan tetapi pada media playlist hanya akan menampilkan

judul video yang diambil dari nama file.

Add Video

Merupakan bagian untuk menambahkan video pada playlist yang akan

diputar oleh pengguna. Bagian ini menggunakan fungsi JavaScript. Kode Program 3 Source Code Add Video

Kode dari add video menjelaskan bahwa file video yang ditambahkan pada

playlist akan dimasukan di local storage menggunakan fungsi

1. if (window.localStorage) {

2. SLVPlaylistItems = localStorage.getItem("SLVPlaylistItemsLS");

3. if (window.localStorage.length == 0) {

4. SLVPlaylist_Items = [{ "title": SLVP_VideoTitle, "url":

SLVP_VideoPath, "order": 0, "selected": false}];

5. }

6. else {

7. for (var i = 0; i < SLVPlaylistItemNumber; i++) {

8. SLVPlaylist_Item[i] = new Array();

9. SLVPlaylist_Item[i]["title"] =

document.getElementById(i).childNodes[0].innerHTML;

10. SLVPlaylist_Item[i]["path"] =

document.getElementById(i).childNodes[1].attributes.getNamedIt

em("href").value;

11. if (i == 0)

12. {

13. if (document.getElementById(i).className ==

"SLV_PlayListItem_Selected")

14. SLVPlaylist_Items = [{ "title":

document.getElementById(i).childNodes[0].innerHTML, "url":

document.getElementById(i).childNodes[1].attributes.getNamed

Item("href").value, "order": i, "selected": true}];

1 SLVPlaylist_Items.push({ "title": SLVP_VideoTitle, "url":

SLVP_VideoPath, "order":

SLVPlaylist_Items.length, "selected": false

});

2 }

3 localStorage.setItem("SLVPlaylistItemsLS",

JSON.stringify(SLVPlaylist_Items));

4 }

5 else {

6 alert("Your Browser does not support

LocalStorage.");

7 }

8 SLVPlayer_Load();

9 else

10 alert("Can't add an empty entry");

11 }if window.localStorage.length

== 0) {

12 SLVPlaylist_Items = [{ "title":

SLVP_VideoTitle, "url":

SLVP_VideoPath, "order": 0,

"selected": false}];

13 }

14 else {

15 for (var i = 0; i <

SLVPlaylistItemNumber; i++) {

16 SLVPlaylist_Item[i] =

new Array();

12

SLVPlaylist_Items.push. Setelah itu dari local storage akan dibaca menggunakan

fungsi SLVPlayer_Load.

Control Video

Merupakan bagian untuk mengontrol video, seperti play / pause, stop,

capture, previous, next, volume, dan screen video. Control video ini menggunakan

fungsi JavaScript.

Untuk memainkan file MP4 sesuai yang tertera di playlist lakukan klik pada

media playlist atau dengan melakukan click pada tombol play. Proses untuk

memutar file MP4 menggunakan Video engine yang disediakan oleh HTML5

adalah mendefinisikan path sumber file MP4 yang dikehendaki ke Video Engine

dengan menggunakan perintah SLVPlayer.src = video_path. Sesudah itu file video

yang didefinisikan di video_path dimuatkan ke Video Engine HTML5 dengan

menggunakan perintah SLVPlayer.load(). Begitu Video Engine sudah dalam

kondisi termuati file, perintah playVideo() akan melakukan playback terhadap file

MP4 yang dikehendaki. Proses ini ditangani oleh Video Engine HTML5. Kode Program 4 Source Code Play File MP4

6. Pengujian Sistem

Metode yang digunakan dalam pengujian sitem ini adalah dengan metode

Beta testing, yaitu pengujian sistem yang lakukan untuk mengetahui apakah

aplikasi ini sudah sesuai dengan apa yang diharapkan oleh user. Dan sebagai

responden sebanyak 30 mahasiswa FTI UKSW.

Tabel 1 Uji coba sistem beradasarkan responden

Hasil uji

coba

No Materi uji coba Sangat

setuju Setuju Tidak tahu

Tidak

setuju

Sangat

tidak

setuju

1 Tampilan interface 8 13 2 2 5

2 Kemudahan Penggunaan 5 15 - 4 6

3 Fasilitas drag and drop 7 12 1 3 7

4 Pesan eror dalam aplikasi 5 14 3 3 5

1. function playVideo(){

2. SLVPlayer.play();

3. document.getElementById(“play”).style.display = “none”;

4. document.getElementById(“pause”).style.display = “block”;

5. }

6. function SLV_PlaylistItem_Click(id){

7. load_track(id);

8. playVideo();

9. }

10. function load_track(id) { 11. if (id !=loaded_index) {

12. highlight.ListItem(id);

13. loaded_index = id;

14. video_path = SLVPlaylist_Item[id][“path];

15. SLVPlayer.src = video_path;

16. SLVPlayer.load();

17. Video_title = SLVPlaylist_Item[id][“title”];

18. }

13

5 Penggunaan control player 3 17 - 7 3

Persentase 18,67 47,33 4 12,67 17.33

Tabel 1 merupakan hasil pengujian sistem berdasarkan responden. Dan

sebagai responden sebanyak 30 mahasiswa FTI UKSW, didapatkan hasil sebagai

berikut:

18,67% sangat setuju bahwa video player ini sudah mudah digunakan.

47,33% setuju bahwa video player ini sudah mudah digunakan.

4% tidak tahu.

12,67% tdak setuju bahwa video player ini mudah digunakan.

17,33% sangat tidak setuju bahwa video player ini mudah digunakan.

Tabel 2 Uji coba sistem berdasarkan browser

No Unit Test Opera Safari IE Firefox Chrome

1 Homepage √ √ √ √ √

2 Control video

- Volume √ √ √ √ √

- Next √ √ √ √ √

- Previous √ √ √ √ √

- Play - - - - √

- Stop - - - - √

- View video - - - - √

3 Canvas

- Capture video frame √ √ - √ √

4 Drag and

drop

- Remove Playlist

Item

- √ - √ √

- Control video - - - √ √

Dari tabel 2 yang merupakan hasil pengujian sistem berdasarkan browser,

didapatkan hasil bahwa Google Chrome merupakan browser yang paling

mendukung aplikasi video player ini.

Tabel 3 Pengujian Validitas Proses Sistem

No Proses Uji Coba Hasil Uji Coba

Valid InValid

1 Drag and drop remove playlist item √

2 Drag and drop tidak pada area √

3 Drag and drop control player √

4 Play lagu √

5 Stop lagu √

14

6 Next lagu √

7 Previous lagu √

8 Add file √

9 Capture √

Sesuai dengan tabel yaitu pengujian validitas proses sistem, dapat

disimpulkan bahwa implementasi sistem dapat berjalan dengan baik.

7. Simpulan

Berdasarkan pada bab-bab sebelumnya mengenai Perancangan dan

Implementasi Aplikasi Video player Berbasis Client Menggunakan HTML5 dapat

ditarik kesimpulan bahwa Untuk dapat membuat sebuah video player berbasis

client harus menguasai JavaScript dan XML, karena untuk mengendalikan control

video seperti play, pause, stop, capture, next, previous dan media playlist harus

menggunakan JavaScript dan XML. Berdasarkan hasil uji coba aplikasi kepada 30

responden, diperoleh hasil 18,67% sangat setuju bahwa video player ini sudah

mudah digunakan dan 47,33% dari responden menyatakan setuju bahwa aplikasi

video player ini sudah mudah digunakan (user friendly. Pada HTML5 untuk

memutar video tidak dibutuhkan lagi plugin flash player pada sisi client, dengan

kata lain dapat membuat kontrol pemutar yang sepenuhnya dikendalikan dengan

JavaScript. Aplikasi Video player ini akan lebih baik bila dikembangkan dengan

menambahkan capture yang menghasilkan file video. Juga dapat ditambahkan

equalizer, video enhancement. Dan untuk kedepannya mungkin aplikasi video

player ini dapat memutar file-file video lain seperti file video dvd dan sebagainya.

8. Daftar Pustaka

[1] Vaughan, Tay, 2006, Multimedia: Making It Work Edisi 6, Yogyakarta:

ANDI.

[2] Sugianto, Albertus, 2012, Rancang Bangun Audio Player Berbasis Web

Dengan Menggunakan HTML5

[3] Ashraf M. A. Ahmad, 2008, Semantic Web-based Video Streaming

Application, iJET Vol3 No 4, Online-journals.org/i-

jet/article/viewArticle/195. Diakses tanggal 5 Desember 2011.

[4] Johan, 2010, Pengertian Video player, http://www.untukku.com/artikel

untukku/pengertian-video-player-untukku.html. Diakses tanggal 6

Desember 2011.

[5] Ragget, Dave, 2005, Getting Started with HTML,

http://www.w3.org/MarkUp/Guide/, Diakses tanggal 8 Desember 2011.

[6] Khafidli, M. Firgiawan, 2011, Trik Menguasai HTML5 CSS3 PHP

APLIKATIF, Yogyakarta: Lokomedia.

[7] Kurniawan, 2010, Cepat Mahir ASP.NET 3.5 untuk Aplikasi Web

Interaktif, Yogyakarta: Andi

15

[8] Zenhadi, 2006, JavaScript, lecturer.eepis-

its.edu/~huda/Dokumen/WEB/moduljavascript.pdf. Diakses tanggal 20

Desember 2011.

[9] Moh Junaedi, 2003, Pengantar XML,

naeli.staff.gunadarma.ac.id/Downloads/files/.../pengantar+xml.pdf.

Diakses tanggal 20 Desember 2011.

[10] Pressman, RS, 2001 Software Engineering: A Practitioner’s Approach,

Amerika Serikat: RS. Pressman and Associates.

[11] Sri Dharwiyanti, 2003, Pengantar Unified Modeling Language (UML),

setia.staff.gunadarma.ac.id/Downloads/files/6077/Modul_UML.pdf.

Diakses tanggal 2 Januari 2012.