Menampilkan Video di Website Tanpa Plug in

Menampilkan Video di Website Tanpa Plug in

Beberapa tahun terakhir, konten video mengalami kemajuan yang sangat pesat. Data terbaru menunjukkan bahwa situs Youtube yang dimiliki Google berhasil menjaring 157,7 juta pengunjung…

Beberapa tahun terakhir, konten video mengalami kemajuan yang sangat pesat. Data terbaru menunjukkan bahwa situs Youtube yang dimiliki Google berhasil menjaring 157,7 juta pengunjung dan melayani lebih dari 17 miliar video online pada bulan April 2012. Keberhasilan ini tidak terlepas dari kemampuan browser untuk mampu menampilkan video secara streaming atau online. Namun sesungguhnya dari sisi bahasa pemrograman web, untuk mampu menjalankan file video di website masih memerlukan plugin tambahan, salah satunya, yang terkenal adalah Flash Player dari Adobe.

Dahulu, belum ada terobosan untuk menampilkan video di website tanpa plugin seperti Flash Player. Hal tersebut memicu masalah, karena plugin tersebut tidak terintegrasi dalam browser. Bila Anda ingin menonton video secara steaming atau online, maka harus meng-install plugin terlebih dahulu, hal ini cukup merepotkan. Apalagi saat ini pengguna internet tidak hanya browsing melalui komputer tetapi juga melalui perangkat mobile seperti hp atau tablet, yang belum tentu mendukung berjalannya sebuah plugin dalam bowser di perangkat tersebut.

Saat ini sudah ada terknologi baru dalam bahasa pemrograman web, agar browser bisa menampilkan video di website tanpa plugin. Teknologi tersebut adalah HTML5, sebuah bahasa pemrograman internet yang baru hasil pengembangan bahasa HTML sebelumnya. Dalam artikel ini akan ditampilkan juga beberapa contoh kode untuk menampilkan video di website tanpa plugin, cukup menulis beberapa kode saja, video bisa langsung dijalankan.

Salah satu komponen dalam HTML5 adalah elemen <video>. Dengan elemen <video>, sangat memudahkan dalam membuat website dengan fasilitas video streaming. Sementara hingga saat ini baru 3 format file yang didukung element <video> ini, yaitu: MP4, WEBM dan OGG. Contoh kodenya adalah sebagai berikut:

<video width="320" height="240" controls="controls">
source src="video.mp4" type="video/mp4" />

Your browser does not support the video tag.
</video>

Sangat sederhana bukan? OK, selanjutnya bagaimana menggunakan elemen <video> ini untuk membuat video streaming dalam website.

  1. Siapkan sebuah file video dengan durasi yang singkat, misalnya: nobody.webm. Simpan file video tersebut dalam folder tempat website berada.
  2. Siapkan editor html, misalnya: notepad++ (windows) atau gedit (linux).
  3. Tuliskan kode berikut dalam file html atau php Anda, untuk contoh berikut file html yang dibuat hanya berisi video streaming.
    <html>
                <body>
                <video width="640" height="480" controls="controls">
                            <source src="nobody.webm" type="video/webm" />
                            Your browser does not support the video tag.
                </video>
                </body>
                </html>
  4. Simpan dengan nama sesuai keinginan Anda, misalnya: videotanpaplugin.html
  5. Jalankan, akan muncul tampilan seperti gambar di bawah ini.

    Tampilan video

  6. Muncullah player video dengan tombol play ada di bagian bawah. Silahkan Anda play video tersebut. Berikut tampilan ketika video dijalankan
    video setelah dijalankan
    Tampilan Video Tanpa Plug in Setelah Dijalankan
  7. Selain itu, kode tersebut bisa anda sisipkan di file lain di website anda. Cukup copy-paste kode tersebut di file website anda sesudah tag <body> atau sebelum tag </body>.

Mudah bukan? Elemen <video> ini sudah mendukung resolusi video HD (High Definition) baik itu 720 maupun 1080. Untuk saat ini, memang beberapa browser belum sepenuhnya mendukung HTML5, seperti Mozilla Firefox, Google Chrome, Opera dan Internet Explorer. Namun, untuk di masa depan, browser tersebut terus dikembangkan hingga mampu mendukung penuh HTML5. Jadi Anda tidak perlu khawatir lagi, jika video anda tidak bisa berjalan di browser favorit Anda.

Tag:

5 Comments

Leave Comment
  1. opy says:

    Terima kasih pak artikelnya, saya mau tanya bagaimana membuat galery video di web sendiri dengan php yang videonya di simpan di server hosting?
    terima kasih sebelumnya

Write Comment

Your email will not be published. The marked label is required.