Cara mudah memutar video di website

Pernahkan anda melihat film atau video secara online...? Pastinya pernah kan..?. Ok pada tutorial kali ini saya akan membahas bagaimana cara memutar video di website dengan mudah.

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 Player ataupun 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...?

  1. JW Player mendukung banyak browser seperti Mozilla Firefox, Google Crome, maupun Internet Explorer
  2. Dalam JW Player fitur player videonya sudah lengkap seperti fasilitas play, pause, resume, share video dan lain sebagainya
  3. Support Jquery dan HTML 5
  4. 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...

  1. Pertama download terlebih dahulu library JW Player di website reminya  http://www.longtailvideo.com/players/jw-flv-player/  
  2. 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
  3. 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
  4. 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 area id="container" 
<script type="text/javascript"> 
   jwplayer("container").setup({ 
    file: "video.flv", 
    height: 400, 
    width: 630, 
    image: "preview.jpg", 
    modes: [ { type: "html5" }, { type: "flash", src: "player.swf" }, { type: "download" } ] });
  </script>

 
Potongan code diatas berfungsi untuk konfigurasi player video, 
  1. File adalah nama file video akan akan kita putar
  2. Height adalah tinggi dari video
  3. Width adalah lebar video
  4. Image adalah preview atau tampilan gambar sebelum video diputar
  5. 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.

Sekitar tutorial memutar video di website, semoga membantu.. Selamat mencoba :-)

Penulis

0 comments:

Posting Komentar