Belajar PHP: Membuat Web Video Player dengan FlowPlayer

Sekilas tentang FlowPlayer

FlowPlayer adalah sebuah video player berbasis web. Teknologi yang digunakan adalah player berbasis Shockwave Flash (milik Adobe) dan sebuah JavaScript. FlowPlayer digunakan untuk melakukan streaming video pada suatu halaman web. FlowPlayer dilepas dengan lisensi GPL 3+ dan tersedia dalam dua versi, versi OpenSource yang gratis dan versi Commercial yang dapat dikustomasi dan dibranding ulang.

Download FlowPlayer

Silakan download FlowPlayer terbaru di situs resminya: http://www.flowplayer.org/ atau via link berikut: Klik Disini

Membuat Web Video Player dengan FlowPlayer

Tujuan praktik kita kali ini adalah membuat sebuah halaman web mampu melakukan streaming video dengan bantuan FlowPlayer. Video yang akan digunakan berupa video flash (FLV). Untuk itu, download dulu FlowPlayer dari tautan diatas, ekstrak dengan WinZIP/WinRAR dsb.

Berikut langkahnya:
1. Ekstrak file flowplayer-3.2.7.zip (atau yang lebih baru) dengan ekstraktor ZIP/RAR,
2. Buat sebuah folder baru pada folder htdocs XAMPP/server anda. misalnya: latihanflowplayer
3. Copy file flowplayer-3.2.7.swf, flowplayer.controls-3.2.5.swf dan flowplayer-3.2.6.min.js dari folder ekstrak flowplayer ke folder /latihanflowplayer/
4. Buat sebuah file PHP baru, misalnya index.php dan tulis:

<html>
<head>
<title>Latihan Web Video Player dengan FlowPlayer</title>
<!-- install flowplayer disini dengan load javascriptnya -->
<script type="text/javascript" src="flowplayer-3.2.6.min.js"></script>
</head>
<body>
<p>
<h3>Judul Video: Sejarah Nahdlatul Ulama (arabic)</h3>
<!-- taruh nama video disini -->
<a  
 href="https://emka.web.id/wp-content/uploads/2011/06/Sejarah-NU-arabic.flv"
style="display:block;width:520px;height:330px"  
 id="player"> 
</a> 
<!-- atur flowplayer disini -->
<script>
flowplayer("player", "flowplayer-3.2.7.swf");
</script>
<small>Judul Video: Sejarah Nahdlatul Ulama (arabic). Produksi: PCI NU Sudan<small>
</p>
</body>
</html>

Contoh

Silakan klik disini (https://emka.web.iddemo/flowplayer/)

Selamat mencoba!

Wagiman Wiryosukiro

Petani Sistem Informasi, tukang las plugin & themes Wordpress. Co-Founder SistemInformasi.biz. Saat ini aktif sebagai Developer & kontributor di OpenMandriva Linux.

You may also like...

17 Responses

  1. putra says:

    wah kebetulan ni ada tugas untuk membuat desain web.. terima kasih ya tutorialnya..
    btw saya mau tanya ni untuk mengembangkan web yang sudah jadi..
    menggunakan dreamweaver, adakah cara untuk menambahkan javascript dan template smarty?? mohon saran n bimbingannya ya.. tolong di cek web http:/cakraindah.net terima kasih

    • admin says:

      kalau JavaScript tinggal disisipkan, untuk smarty harus manut sama aturan syntax templatenya smarty, bisa disisipi javascript juga

  2. Luhut says:

    Thanks ya Mas, atas artikel Flowplayernya.

  3. Luhut says:

    Thanks ya Mas artikel Flowplayernya, kalau ada mohon dimuat artikel cara membuat radio internet.

  4. cruzdaemon says:

    Sob, saya udh berhasil ikuti tutorial di atas, nah muncul pertanyaan nih, bisa ga saya buat tabel untuk mengupload beberapa file playlist buat file *.flv trus ingin saya tambahkan juga running text d bagian bawah.

  5. chuzn says:

    mas apakah file videonya harus diupload dlu?? kalo langsung mengambil dari folder gmn? trimakasih

    • admin says:

      1. jika dipasang di web online, video harus terlebih dulu diupload disuatu tempat, baik itu web sendiri atau milik orang.
      2. jika dipasang di web offline, video bisa ditaruh di folder, asalkan folder tersebut masih dalam direktori aktif (htdocs)

  6. sugeng says:

    Pak, flowplayer bisa menampilkan video + .srt ( video sama .srt-nya terpisah ) nya ngga??
    kalau bisa, contoh script nya gmn?
    terima kasih.

    • admin says:

      terimakasih mas sugeng, setahu saya bisa. Namun hanya FlowPlayer edisi Flash.

      contohnya:

      flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf", {
          log: { level: 'debug', filter: 'org.flowplayer.captions.*' },
          clip: {
       
              url: 'mp4:vod/demo.flowplayervod/buffalo_soldiers.mp4',
       
              // this is the SubRib file with captions info
              captionUrl: 'http://releases.flowplayer.org/data/buffalo.srt',
       
              // we want to use RTMP since this is a 1,5 hour long movie
              provider: 'rtmp',
       
              // do not distort widescreen image in fullscreen mode
              scaling: 'fit'
          },
          plugins:  {
       
              // the captions plugin
              captions: {
                  url: "http://releases.flowplayer.org/swf/flowplayer.captions-3.2.9.swf",
       
                  // pointer to a content plugin (see below)
                  captionTarget: 'content'
              },
       
              // configure a content plugin so that it
              // looks good for showing subtitles
              content: {
                  url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.swf",
                  bottom: 25,
                  height:40,
                  backgroundColor: 'transparent',
                  backgroundGradient: 'none',
                  border: 0,
                  textDecoration: 'outline',
                  style: {
                      body: {
                          fontSize: 14,
                          fontFamily: 'Arial',
                          textAlign: 'center',
                          color: '#ffffff'
                      }
                  }
              },
       
              // streaming plugin configuration
              rtmp: {
                  url: "http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.11.swf",
                  netConnectionUrl: 'rtmp://rtmp01.hddn.com/play'
              },
       
              // change default skin to "tube"
              controls: {
                  url: "http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.14.swf"
              }
       
          },
          canvas: {
              backgroundGradient: 'none'
          }
      });
      

      selengkapnya bisa dibaca plugin FlowPlayer soal Captions: http://flash.flowplayer.org/plugins/flash/captions.html.

  7. latif says:

    bos umpama tv streaming yang mau di ganti mana + minta contohnya

  8. Sijar says:

    Pak , agar videonya tidak otomatis running pada saat baru buka page nya, setting dimana ya pak ??
    Tks

  9. Jafar Lamborginhi says:

    mas kalo untuk mengupload fideonya mas punya webserver/hosting geratis nga…

  10. Lufi says:

    mas kenapa yg saya enggk bisa diputar video nya cman yg ke baca IDM nya. .

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: