Contoh Pemasangan Flowplayer Dengan Tampilan Sederhana.
<script> flowplayer("player", "flowplayer-3.2.5.swf");Conto h Pem asang an Flowp layer Dengan Ta mp ilan Sed erha na, Men gg unakan Video yang Berasal da ri Youtube . p>
"; c onte nt += "" + Ma th.round (item .d uration / 60) + " min a>"; }); c onte nt += ' div> d iv> a>'; $(container).html(content);
6
$("d iv.pla ylist").sc rollab le({ items:'div.clips', vertical:true, next:'a.down', prev:'a.up' }); }
$f("you tub e", "flow p laye r-3.2.5.sw f", { plugins: { youtube : { url:'flowplayer.youtube-3.2.1.swf', enab leGda ta: true,
onApiData : func tion(gda ta) { console.log(gdata);
show Rela ted List(g da ta , "# pla ylistCo nta iner"); } } }, c lip : { provider: 'youtub e', urlResolvers: 'youtube' } }).pla ylist("d iv.c lips"); sc ript>
Gambar 1.6 Tampilan Skrip flowplayer-youtube.html
7
Catatan : “Karena menggunakan url dari youtube maka, untuk melihat hasil dari skrip flowplayer-youtube.html, Komputer harus terhubung ke internet.”
8
BAB II MODUL VIDEO 2.1 Membuat Tabel untuk Modul Video Untuk bisa membuat modul video pada cms Lokojquery pertama-tama yang harus kita lakukan adalah mebuat tabel baru, ada empat tab le yang akan kita buat … langsung aja yah.
2.2 Membuat Tabel Video Tabel ini nantinya akan digunakan untuk menyimpan informasi, seputar video yang kita upload ke web kita mulai dari judul video, keterangan, video seo serta link youtube, untuk lebih jelasnya perhatikan tabel di bawah ini.
Tabel 2.1 Struktur tabel video.
Kolom
Tipe
Pa njang
Keteranga n
id_vide o
int
5
Prim a ry Key Auto Inc rem ent
id_pla yalist int username va rc har jdl_vide o vide o_de o va rc har keterangan text g br_vide o va rc har video va rc har youtube va rc har d iliha t int ha ri va rc har tanggal date jam tag vid va rc har
5 30 va rc ha r
100 100 100 100 100 7 20
Defa ult : 1
time 100
Buatlah tabel video dengan struktur tabel seperti di atas, untuk membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new table on database dblokomedi masukan nama tabel, dan pada pilihan Number of fields masukan jumlah kolom,
Setelah itu Klik tombol Go.
Gambar 2.1 Menentukan Nama Tabel Dan Jumlah Kolom
9
Tahap selanjutnya isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.1, kemudian klik save maka akan terlihat struktur tabel seperti gambar di bawah ini.
Gambar 2.2 Tampilan Struktur Tabel video
Sampai disini kita telah selesai membuat tabel video, pada pembahasan berikutnya akan dijelaskan bagaimana membuat tabel playlist.
2.3 Membuat Tabel Playlist Tabel playlist adalah tabel yang menampung keterangan mengenai video, atau bisa dikatakan tabel ini adalah tabel album. Lho … kalau tabel album kenapa kok namanya dibuat playlist?. Namanya dibuat playlist agar kita tidak sulit membedakannya, tabel album digunakan untuk foto gallery, sedangkan tabel playlist digunakan untuk video.
Tabel 2.2 Struktur tabel playlist.
Kolom id_playlist
Tipe int
Panjang 5
jdl_playlist playlist_seo gbr_playlist aktif
varchar varchar varchar enum
100 100 100 (‘Y’,’N’)
Keterangan Primary Key Auto Increment
Default : Y
10
Buatlah tabel playlist dengan struktur tabel seperti pada Tabel 2.2(Struktur tabel playlist), untuk membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new table on database dblokomedi masukan nama tabel, dan pada pilihan Number of fields masukan
jumlah kolom, Setelah itu Klik tombol Go.
Gambar 2.3 Menentukan Nama Tabel Dan Jumlah Kolom
Tahap selanjutnya isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.2, kemudian klik save maka akan terlihat struktur tabel seperti gambar 2.4.
Gambar 2.4 Tampilan Struktur Tabel playlist
Tabel playlist sudah selesai dibuat langkah selanjutnya membuat tabel tag, tapi tag untuk video kita beri nama tagvid, dimana video akan dikaitkan satu sama lain melalui tabel ini.
2.4 Membuat Tabel Tagvid (Tag Video) Tabel tagvid merupakan tabel yang menghubungkan antar satu video dengan video yang lainnya, seberti halnya tabel tag yang digunakan pada berita. Tabel ini nantinya akan digunakan untuk menyimpan informasi nama tag, tag seo, dan count.
Tabel 2.3 Struktur tabel tagvid. Kolom id_tag
Tipe int
Panjang 5
Nama_tag
varchar
100
Keterangan Primary Key Auto Increment
11
tag_seo count
varchar int
100 5
Buatlah tabel tagvid dengan struktur tabel seperti pada Tabel 2.3 (Struktur tabel tagvid), untuk membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new table on database dblokomedi masukan nama tabel, dan pada pilihan Number of fields masukan
jumlah kolom, Setelah itu Klik tombol Go.
Gambar 2.5 Menentukan Nama Tabel Dan Jumlah Kolom
Seperti yang telah dijelaskan pada halaman sebelumnya, tahap selanjutnya isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.3, kemudian klik save maka akan terlihat struktur tabel seperti gambar 2.6.
Gambar 2.6 Tampilan Struktur Tabel tagvid
Tabel
tagvid
(tag
video)
sudah
selesai
dibuat
langkah
selanjutnya
membuat
tabel
komentarvid(komentar video), tapi tag untuk video kita beri nama tagvid, dimana tabel ini akan berisi komentar yang diberikan pengunjung mengenai video yang di tampilkan.
2.4 Membuat Tabel Komentarvid (Komentar Video) Tabel komentar video ini merupakan tabel terakhir yang akan kita bahas pada bab ini, tabel ini nantinya akan digunakan untuk menyimpan komentar yang diberikan pengunjung mengenai video yang mereka lihat, untuk lebih jelas perhatikan tabel 2.4 berikut ini.
Tabel 2.4 Struktur tabel komentarvid.
12
Kolom id_komentar
Tipe Int
Panjang 5
id_video nama_komentar url isi_komentar tgl jam_komentar aktif
int varchar varchar text date time enum
5 100 100
(‘Y’,’N’)
Keterangan Primary Key Auto Increment
Default : Y
Buatlah tabel tagvid dengan struktur tabel seperti pada Tabel 2.4 (Struktur tabel komentarvid), untuk membuatnya masuk ke phpmyadmin, lalu pilih database dblokomedia, pada pilihan Create new table on database dblokomedi masukan nama tabel, dan pada pilihan Number of fields
masukan jumlah kolom, Setelah itu Klik tombol Go .
Gambar 2.7 Menentukan Nama Tabel Dan Jumlah Kolom
Langkah selanjutnya isi isi nama tabel, tipe, panjang dan keterangan seperti pada tabel 2.4, kemudian klik save maka akan terlihat struktur tabel seperti gambar 2.8.
Gambar 2.8 Tampilan Struktur Tabel komentarvid
Selesai sudah pembahasan kita pada bab ini, keempat tabel yang akan digunakan untuk video streaming sudah kita buat. Pada pembahasan selanjutnya akan dibahas bagaiman mengintegrasikan, antara tabel video, css style (tampilan video streaming) dan skrip php yang menangani video. ..^_^ 13
2.5 Membuat Scroll Video Terbaru di Halaman Pe ngunjung Dengan Efek Tooltips Scroll Video yang dimasksud adalah scroll video yang akan menampilkan sepuluh video tebaru yang di upload oleh administrator web. Dimana scroll video ini nantinya akan di lengkapi dengan efek tooltips yang berisi judul video. Scroll Video yang digunakan dalam pembahasan ini merupakan scrollable gallery with tooltips yang berrasal dari flowplayer.org. Tampilan awal scrollable gallery with tooltips terlihat seperti gambar 2.9 berikut ini.
Gambar 2.9 Tampilan Scrollable Gallery With Tooltips
Pada pembahasan selanjutkan kita akan membahas bagaimana cara memodifikasi scrollable gallery with tooltips yang berrasal dari flowplayer.org, sehingga bisa kita integrasikan dengan modul video
yang akan kita buat. ^_^ Tampilan Scroll Video terbaru yang akan kita buat terlihat seperti gambar 2.10
Gambar 2.10 Tampilan Scrollable Video Terbaru Dengan Tooltips
Setiap video yang diupload akan di wakili oleh sebuah gambar. Seperti yang terlihat pada gambar 2.10 masing-masing gambar mewakili satu judul video. Pada pembahasan selanjutnya akan dibahas bagaimana memasukan dan mengedit template Lokojquery (Lokomedia Versi Jquery), oleh sebab itu penulis menyarankan untuk membackup file template terlebih dahulu.
2.5.1 Mengedit template.php
14
Kita akan membuat template baru u ntuk lokomedia cms, template ini kita beri nama video. Caranya copy folder eljequery yang ada di folder templates lalu paste dengan nama video. Gambar susunan direktorinya terlihat seperti gambar 2.11 berikuti ini.
Gambar 2.11 Tampilan Susunan Direktori Templates
Setelah itu buka file tempate.php yang ada di folder video, dengan menggunakan macromedia dreamweaver, seperti terlihat pada gambar 2.12. dan 2.13.
Gambar 2.12 Tampilan File Template.php
Gambar 2.13 Tampilan Template.php di Buka dengan Dreamweaver
Pada gambar 2.13 perhatikan source code yang di blok, pada bagian yang diblok kita akan menyisipkan source code yang nantinya akan digunakan untuk memanggil file pendukung video scroll. … ^_^ ini dia source codenya.
15
"> ">
Ketik source code diatas dan letekan dibaris ke 26 perhatikan gambar 2.13. Source code diletakan dibawah " type="text/css" />. Kemudian ketik Code berikut <script type="text/javascript" src="">
Code di atas diletakan dibawah <script src="" type="text/javascript">. Tampilan file template.php setelah diedit akan terlihat seperti gambar 2.14.
Gambar 2.14 Tampilan Template.php Setelah di edit
Setelah itu pada baris ke 122 atau dibawah