T1 672005092 Full Tex

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

Penelitian yang kedua adalah WebBasedVideoStreaming. 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 bitrate 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

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.

Gambar 1 PrototypeModel [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

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 filevideo.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, dragand dropplaylist item dan addvideo. Videofile path digunakan untuk memberikan alamat dari filevideo yang ingin ditambahkan didalam playlist. Drag and drop playlist item digunakan untuk menghapus filevideo 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>>

dengan cara drag anddrop.Addvideo adalah fasilitas untuk menambahkan video

setelah user mengisikan video file path. Selain media playlist, user juga dapat mengakses secara langsung controlvideo. 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 MediaPlaylist.

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

VideoPlayer User

Gambar 4 Activity Diagram Play Video.

Activity diagram play video dimulai dengan user membuka Home Page, yang mana terdapat MediaPlaylist 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

VideoPlayer User

Start

End

Home Page

Control Video

Play/Pause

Stop

Mengatur Volume Previous Next

Drag and Drop Control Video Capture

VideoPlayer User

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 filevideo akan ditambahkan pada

mediaplaylist.

: 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 Path

Add to Playlist : Control Video

: Media Playlist Browse

Mengisi teks box Menunggu eksekusi

Mengeksekusi

Menambahkan File Video Menunggu dari control video

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" >

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, filevideo 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 }

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];

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 √

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 MenggunakanHTML5 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

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

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" >

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, filevideo 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 }

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];

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 √

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 MenggunakanHTML5 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

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