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=DragAlternateControlAreaStartevent ondragover=DragAlternateControlAreaOverevent
ondragenter=DragAlternateControlAreaEnterevent ondragleave=DragAlternateControlAreaLeaveevent
ondrop=DropAlternateControlAreaevent
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.getItemSLVPlaylistItemsLS; 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.getElementByIdi.childNodes[0].innerHTML; 10.
SLVPlaylist_Item[i][path] = document.getElementByIdi.childNodes[1].attributes.getNamedIt
emhref.value; 11.
if i == 0 12.
{ 13.
if document.getElementByIdi.className == SLV_PlayListItem_Selected
14. SLVPlaylist_Items = [{ title:
document.getElementByIdi.childNodes[0].innerHTML, url: document.getElementByIdi.childNodes[1].attributes.getNamed
Itemhref.value, order: i, selected: true}];
1 SLVPlaylist_Items.push{ title: SLVP_VideoTitle, url:
SLVP_VideoPath, order: SLVPlaylist_Items.length, selected: false
}; 2
} 3
localStorage.setItemSLVPlaylistItemsLS, JSON.stringifySLVPlaylist_Items;
4 }
5 else {
6 alertYour Browser does not support
LocalStorage.; 7
} 8
SLVPlayer_Load;
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
Kategori