1 1. Pendahuluan Kebutuhan masyarakat saat ini disebabkan oleh perkembangan teknologi yang ada. Seperti halnya dalam penyampaian informasi, yang tidak...
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.
2
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 BernersLee 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
3
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.
4
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 bukubuku 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
5
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.
Play / Pause
Video File Path <<extend>>
<<extend>> View Video<><<extend>>Stop <<extend>>
Capture
<<extend>> <<extend>> Drag and Drop Playlist Item
Previous Media Playlist User
<<extend>> Control Video <<extend>> <<extend>>
<<extend>>
Next Mengatur Volume
Add Video
Drag and Drop Control Video
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
6
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. User
VideoPlayer
Home Page
Start
Video File Path
Add to Playlist
Media Playlist
End
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.
7
User
VideoPlayer
Home Page
Start
Media Playlist
Tidak
Volume
Klik Nama File Play/Pause Ya View Video Stop
Capture Control Video Previous
Next
End
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. User
VideoPlayer
Start
Play/Pause
Home Page
Stop Previous Control Video Next Mengatur Volume Capture Drag and Drop Control Video
End
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.
8
: Home Page
File Video Path
Add to Playlist : Control Video
: User
: Media Playlist
Browse Mengisi teks box Menunggu eksekusi
Mengeksekusi Menambahkan File Video Menunggu dari control video
Close
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.
: Home Page : User
: Media Playlist
: Play Video
: Control Video
Browse Pilih File Video Klik kiri
Playing Video
Pilih Pause, Next, Previous, Capture, Stop, volume control Respond close
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.
9
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 1. 2. 3. 4. 5. 6. 7. 8. 9.
10. 11. 12. 13. 14. 15.
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
10
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 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}];
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 1
2 3 4 5 6 7 8 9
SLVPlaylist_Items.push({ "title": SLVP_VideoTitle, "url": SLVP_VideoPath, "order": SLVPlaylist_Items.length, "selected": false }); } localStorage.setItem("SLVPlaylistItemsLS", JSON.stringify(SLVPlaylist_Items)); } else { alert("Your Browser does not support LocalStorage."); } SLVPlayer_Load(); else
10 alert("Can't add an empty entry"); Kode dari add video menjelaskan bahwa file video yang ditambahkan pada 11 }if window.localStorage.length playlist akan dimasukan di local storage menggunakan fungsi == 0) { 12
13 14 15 16
SLVPlaylist_Items = [{ "title": SLVP_VideoTitle, "url": SLVP_VideoPath, "order": 0, "selected": false}]; } 11 else { for (var i = 0; i < SLVPlaylistItemNumber; i++) { SLVPlaylist_Item[i] = new Array();
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.
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(); Pengujian Sistem 17. Video_title = SLVPlaylist_Item[id][“title”]; 18. }
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
12
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
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
√
13
InValid
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. [1] [2] [3]
[4]
[5] [6] [7]
Daftar Pustaka Vaughan, Tay, 2006, Multimedia: Making It Work Edisi 6, Yogyakarta: ANDI. Sugianto, Albertus, 2012, Rancang Bangun Audio Player Berbasis Web Dengan Menggunakan HTML5 Ashraf M. A. Ahmad, 2008, Semantic Web-based Video Streaming Application, iJET Vol3 No 4, Online-journals.org/ijet/article/viewArticle/195. Diakses tanggal 5 Desember 2011. Johan, 2010, Pengertian Video player, http://www.untukku.com/artikel untukku/pengertian-video-player-untukku.html. Diakses tanggal 6 Desember 2011. Ragget, Dave, 2005, Getting Started with HTML, http://www.w3.org/MarkUp/Guide/, Diakses tanggal 8 Desember 2011. Khafidli, M. Firgiawan, 2011, Trik Menguasai HTML5 CSS3 PHP APLIKATIF, Yogyakarta: Lokomedia. Kurniawan, 2010, Cepat Mahir ASP.NET 3.5 untuk Aplikasi Web Interaktif, Yogyakarta: Andi
14
[8]
[9]
[10] [11]
Zenhadi, 2006, JavaScript, lecturer.eepisits.edu/~huda/Dokumen/WEB/moduljavascript.pdf. Diakses tanggal 20 Desember 2011. Moh Junaedi, 2003, Pengantar XML, naeli.staff.gunadarma.ac.id/Downloads/files/.../pengantar+xml.pdf. Diakses tanggal 20 Desember 2011. Pressman, RS, 2001 Software Engineering: A Practitioner’s Approach, Amerika Serikat: RS. Pressman and Associates. Sri Dharwiyanti, 2003, Pengantar Unified Modeling Language (UML), setia.staff.gunadarma.ac.id/Downloads/files/6077/Modul_UML.pdf. Diakses tanggal 2 Januari 2012.
