Cara mudah memutar video di website
Monday, November 12, 2012
Edit
Sebelumnya, kita pilih dulu tipe player video yang akan kita pakai. Untuk tipe player video, saya menyarankan untuk memakai player yang support dengan semua browser, misalnya JW Playerataupun Flow Player. Kedua tersebut bisa kita download secara gratis di website resminya.
Pada tutorial kali ini saya akan menggunakan JW Player sebagai player videonya. Kenapa JW Player...?
JW Player mendukung banyak browser seperti Mozilla Firefox, Google Crome, maupun Internet Explorer
Dalam JW Player fitur player videonya sudah lengkap seperti fasilitas play, pause, resume, share video dan lain sebagainya
Support Jquery dan HTML 5
Termasuk player yang cukup ringan untuk memutar video dan buffering videonya relatif lebih cepat dibandingkan dengan jenis player video yang lainnya...
Ok deh kita langsung aja kita coba langkah-langkah memutar video dengan JW player...
Pertama download terlebih dahulu library JW Player di website reminya http://www.longtailvideo.com/players/jw-flv-player/
Pada halaman awal website resmi JW Player terdapat pilihan Keep me informed of news,offers & updates include Viral a video sharing plugin, dan form untuk menginputkan email. Jika player yang kita download ingin dilengkapi fitur share video maka centanglah offers & updates include Viral a video sharing plugin tapi bila kita ingin menghilangkan fasilitas share video maka centang offers & updates include Viral a video sharing plugin
Copy library JW Player yang kita download di htdocs, dan siapkan video berformat FLV untuk uji coba player. Sebagai catatan JW Player mendukung type file flv,mp3,mp3,WebM,ogg
Buat file index.php atau index.html dan ketikkan code berikut ini
<html>
<head>
<title>Memutar video di website</title>
</head>
<body>
<script type="text/javascript" src="jwplayer.js"></script>
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
file: "Rubik.flv",
height: 400,
width: 630,
image: "preview.jpg",
modes: [ { type: "html5" }, { type: "flash", src: "player.swf" }, { type: "download" } ] });
</script>
</body>
</html>
Ok saya jelaskan
<script type="text/javascript" src="jwplayer.js"></script>
Berfungsi untuk menyisipkan library jwplayer.js kedalam website kita, ini penting dan pastikan direktorinya tepat, agar file jwplayer.js bisa terbaca oleh website kita
<div id="container">Loading the player ...</div>
berfungsi untuk menampilkan area dimana video yang kita sisipkan nanti akan terdapat pada areaid="container"
<b><script type="text/javascript">
jwplayer("container").setup({
<head>
<title>Memutar video di website</title>
</head>
<body>
<script type="text/javascript" src="jwplayer.js"></script>
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
file: "Rubik.flv",
height: 400,
width: 630,
image: "preview.jpg",
modes: [ { type: "html5" }, { type: "flash", src: "player.swf" }, { type: "download" } ] });
</script>
</body>
</html>
Ok saya jelaskan
<script type="text/javascript" src="jwplayer.js"></script>
Berfungsi untuk menyisipkan library jwplayer.js kedalam website kita, ini penting dan pastikan direktorinya tepat, agar file jwplayer.js bisa terbaca oleh website kita
<div id="container">Loading the player ...</div>
berfungsi untuk menampilkan area dimana video yang kita sisipkan nanti akan terdapat pada areaid="container"
<b><script type="text/javascript">
jwplayer("container").setup({
height: 400,
width: 630,
image: "preview.jpg",
modes: [ { type: "html5" }, { type: "flash", src: "player.swf" }, { type: "download" } ] });
</script>
</b>
Potongan code diatas berfungsi untuk konfigurasi player video,
File adalah nama file video akan akan kita putar
Height adalah tinggi dari video
Width adalah lebar video
Image adalah preview atau tampilan gambar sebelum video diputar
Mode adalah alternatif dari player video, jika browser kita mendukung flash maka video akan diputar dengan menggunakan flash player, tetapi jika tidak maka JW Player secara otomatis akan memutar video dengan HTML 5
Ok sekarang buka file index.php atau index.html yang kita buat tadi dengan browser anda. Jika video tidak tampil, maka cek lagi langkah-langkah diatas dengan benar.
semoga membantu.. Selamat mencoba.
Height adalah tinggi dari video
Width adalah lebar video
Image adalah preview atau tampilan gambar sebelum video diputar
Mode adalah alternatif dari player video, jika browser kita mendukung flash maka video akan diputar dengan menggunakan flash player, tetapi jika tidak maka JW Player secara otomatis akan memutar video dengan HTML 5
Ok sekarang buka file index.php atau index.html yang kita buat tadi dengan browser anda. Jika video tidak tampil, maka cek lagi langkah-langkah diatas dengan benar.
semoga membantu.. Selamat mencoba.