Skip navigation.
Home
Makassar Slackers
Home » Blogs » denic's blog

Bermain Video Sharing Sederhana Seperti Youtube

Submitted by denic on Mon, 09/22/2008 - 15:04.

Iseng-iseng disela-sela waktu ngelamun, aku coba-coba tes-tes bikin mainan. Gimana ya cara men-share-kan file-file videoku yang sudah banyak dibikin dari handycam kecil? Pengennya seperti yang kayak youtube, jadi klien nggak perlu mendonlot semua file, tapi langsung bisa menonton secara langsung. Setelah browsing-browsing, akhirnya nemuin ini http://flowplayer.org.
Wah... jadi dech dimulai mainannya.

Pertama-tama download pemutar flv untuk klien di sini.
simpan sementara dan kita persiapkan kebutuhan dasarnya. Karena kita akan membuat layanan berbasis web, maka langkah pertama adalah konfigurasi dasar web. Bagi yang belum tau bisa cari caranya di website ini.

Kedua...
convert file-file film (mpg, avi, dll) ke flv pakai converter. Saya biasa mengandalkan ffmpeg karena simpel, tapi kita juga bisa pakai yang lain seperti fvec keluaran adobe.
Oke cara konpert menggunakan ffmpeg begini: (dari terminal ya)

ffmpeg -i [file_video].mpg -s 320x240 -ar 44100 -r 12 [file_target].flv

misal saya pakai nama slackgath11.flv

Berikutnya yang ketiga...
Bikin file gambar atau snapshoot film yang akan ditampilkan, buat memberi gambaran film tersebut. Bikinnya juga dari terminal menggunakan mplayer, begini caranya

mplayer -vo jpeg -ss 60 -frames 1 [file_video].mpg

-ss 60 maksudnya snapshoot dari detik ke-60, sedangkan -frames 1 maksudnya, hanya diambil 1 file frame saja. Setelah perintah tersebut dijalankan, maka akan menghasilkan file 00000001.jpg. Nah.. ini kita ambil untuk memberi icon pada file flv-nya. Supaya lebih gampang dikenali, kita ubah namanya persis seperti file flv-nya, yaitu slackgath11.jpg (tentu saja kecuali ekstensinya).

Selanjutnya yang keempat...
Ekstrak file flowplayer-2.2.4.zip yang telah kita donlot tadi, caranya

unzip flowplayer-2.2.4.zip

maka akan di dapat list file seperti ini:

examples
extras
FlowPlayerClassic.swf
FlowPlayerLight.swf
FlowPlayerDark.swf
FlowPlayerLP.swf
javascript.txt
README.txt
LICENSE.txt

Bila kita sudah menyiapkan DocumentRoot-nya, misalnya /var/www/htdocs, langkah selanjutnya kopi file-file berikut ini ke path tersebut (DocumentRoot):
FlowPlayerClassic.swf ==> cp FlowPlayerClassic.swf /var/www/htdocs/
FlowPlayerLight.swf ==> cp FlowPlayerLight.swf /var/www/htdocs/
FlowPlayerDark.swf ==> cp FlowPlayerDark.swf /var/www/htdocs/
FlowPlayerLP.swf ==> cp FlowPlayerLP.swf /var/www/htdocs/
javascript.txt ==> cp javascript.txt /var/www/htdocs/
README.txt ==> cp README.txt /var/www/htdocs/
LICENSE.txt ==> cp LICENSE.txt /var/www/htdocs/

examples/css ==> cp -r examples/css /var/www/htdocs/
examples/js ==> cp -r examples/js /var/www/htdocs/
example/img ==> cp -r examples/img /var/www/htdocs/

file videonya : slackgath11.flv dan ==> mv slackgath11.flv /var/www/htdocs/
file iconnya : slackgath11.jpg ==> mv slackgath11.jpg /var/www/htdocs

Setelah itu yang kelima....
buat file index.html seperti berikut dan simpan di DocumentRoot-nya (/var/www/htdocs)

<html>
<head>
<title>Multiple Flowplayer instances</title>
<script src="js/jquery.pack.js"></script>
<script src="js/flashembed.min.js"></script>
<script src="js/flow.embed.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/multiple-instances.css"/>

<script>
// this simple call does the magic
$(function() {
$("a.flowplayer").flowembed("./FlowPlayerDark.swf", {initialScale:'scale'});
});
</script>
</head>

<div id="page">
<h1>Multiple Flowplayer instances</h1>
<p>This page uses <a href="http://www.flowplayer.org/tools/flow-embed.html">flow.embed</a>to include multiple player instances smoothly.</p>
<p>
<a class="flowplayer" href="slackgath11.flv"><img src="slackgath11.jpg" /></a>
</p>
</div>
</html>

Jangan lupa permissionnya ijinkan user apache untuk membacanya. Setelah itu, silahkan tes dari browser klien, bila muncul gambar film dan bisa diputer langsung di browser seperti youtube, berarti sukses.
Namun ini hanya sederhana, karena file sumbernya (file flv-nya) bisa didonlot langsung.
Untuk kebutuhan yang lebih advance atau yang aneh-aneh, silahkan improvisasi sendiri.
Untuk mencoba hasil bermain-main saya, silahkan berkunjung ke http://bdk6.dnsalias.org

/*** ralat... untuk link bdk6 tsb baru bisa diakses malam hari, soalnya kalau siang koit traffic-nya, maklum cuman speedy 384kbps ***/

Selamat mencoba

salam,
denic

»