Menampilkan video di Website menggunakan JW Player

Menjalankan video di website menggunakan JW Player

Contoh Kasus:

Saya ingin menampilkan serta menjalankan sebuah video dari youtube di website saya seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Kita bisa menggunakan aplikasi JW Player.

Cara Installasi JW Player

Download JW Player versi terakhir dari website http://www.longtailvideo.com/players/jw-flv-player/
Extractlah disembarang tempat maka akan menghasilkan file-file seperti terlihat pada gambar dibawah ini:

file-file JW Player

Cara menjalankannya

Buatlah satu file HTML bernama play.html dengan isi seperti kode dibawah ini:

<script type=”text/javascript” src=”jwplayer.js”></script> 

<div id=”container”>Loading the player …</div>

<script type=”text/javascript”>

jwplayer(“container”).setup({
flashplayer: “player.swf”,
file: “video.mp4”,
image: “preview.jpg”,
height: ‘270’, width: ‘480’

});

</script>

Keterangan:

  • Kode HTML ini diletakkan satu folder dengan file-file JW Player.
  • jwplayer(“container”), jwplayer ini akan menampilkan video dalam div yang mempunyai id=”container”.
  • file digunakan untuk menempatkan video yang akan kamu tonton.
  • image digunakan untuk menampilkan gambar awal saat video tampil dan belum di play.
  • height digunakan untuk mengatur tinggi dari video.
  • width digunakan untuk mengatur lebar dari video.

Catatan Penting:

Library jwplayer.js ini mempunyai variabel dengan karakter $ sehingga akan terjadi konflik jika digunakan bersamaan dengan jQuery, cara mengatasinya terdapat dalam artikel berikut ini.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *