5 Library Open Source Pemutar Video Player untuk HTML5

5 Library Open Source Pemutar Video untuk HTML5 – Salah satu komponen pendukung website yaitu multimedia. Multimedia mempunyai banyak jenis salah satinya video.

5 Library Open Source Pemutar Video Player untuk HTML5

Namun, sebelum memasang fitur video pastikan infrastruktur memngenai website anda sudah memadai baik dari segi penyimpanan maupun web server yang menangani.

Ketika kita melihat ekosistem lama, video bisa ditampilkan menggunakan tag html yaitu <video></video>. Dengan adanya HTML 5 maka ekosistem 5 telah di tinggalkan dan menggunakan pemutar video player sebagai pengganti pemutar video.

Contoh kode menampilkan video dengan HTML 5

Terdapat 3 atribut yang harus di isi yaitu src, width dan height.

Kenapa Memilih Open Source Library Video Player ?

Pastinya ketika memutuskan menggunakan teknologi apapun itu karena suatu alasan. Alasan mendasar yang kuat yaitu akan lebih baik.

Berikut ini alasan memilih open source library video player.

  • Gratis untuk digunakan. artinya tidak perlu membayar.
  • Kemungkinan terjadi kesalahan sedikit dan lebih cepat menangani kesalahan.
  • Lebih mudah oprek/ custumisasi. Baik dari segi apapun yang menyangkut video.
  • Banyak pengenmbangnya.

Open Source Library Video Player

Berikut ini Open Source Library Video Player yang wajib anda coba :

Plyr

Plyr digunakan untuk sarana pemutar video HTML. Pada slogannya dituliskan bahwa plyr mendukung video plyayer untuk website Youtube dan Vimeo.

5 Library Open Source Pemutar Video Player untuk HTML5

Selain itu plyr juga mendukung pemutar musik / Audio. Untuk menggunakan library yang satu ini dapat anda simak reponya yaitu https://github.com/sampotts/plyr.

Berikut ini contoh penggunaanya dengan HTML5.

Afterglow

Video Player yang kedua yaitu afterglow, Afterglow adalah pemutar video player dengan tampilan desain yang responsive. Sama seperti Plyr juga mendukung youtube dan vimeo.

5 Library Open Source Pemutar Video Player untuk HTML5

Contoh penggunaannya :

Afterflow ini mempunyai banyak fitur yang menarik, silahkan anda baca dokumentasi resminya di http://docs.afterglowplayer.com/.

MediaElement.js

Video Player yang ketiga yaitu Media Element, Medialement digunakan sebagai pemutar video dan audio. Jadi jika anda ingin menggunakan audio untuk membuat website anda maka mediaelemen solusinya.

Mediaelement menggunakan HTML5 yang mendukung format mp4, HLV, HLS dan lainnya. Untuk memasukan video secara online media elemen mendukung pada situs website youtube, video, dailymotion, Twith dan Facebook.

5 Library Open Source Pemutar Video Player untuk HTML5

Bukan hanya membuat website pada umumnya video player ini dapat digunakan namun juga mendukung untuk Content Management System(CMS) yaitu WordPress.

Berikut ini contoh potongan kode menggunakan medialement.js

Untuk membaca dokumentasi resminya anda bisa kunjungi di situs resminya yaitu http://www.mediaelementjs.com/.

jPlayer

Library yang selanjutnya yaitu jPlayer, jPlayer digunakan untuk memutar video pada halaman website yang anda inginkan. Library ini di buat menggunakan bahasa program yaitu javascript.

5 Library Open Source Pemutar Video Player untuk HTML5

Walaupun ditulis dengan javascript dan penggunaan dengan javascript sesuai dengan petunjuknya, namun bagusnya jPlayer dapat digunakan menggunakkan Library lain yaitu Jquery.

Bagi anda yang terbiasa dengan jquery pasti akan lebih mudah menggunakan library yang satu ini.

Video Player ini mendukung HTML5 dan Flash.

Berikut ini contoh potongan kode menggunakan jPlayer dengan Jquery.

Cukup mudah bukan penggunaannya ?

Anda bisa menggunakan Library ini dengan melihat dokumentasi resminya yaitu situs http://jplayer.org/.

Video.js

Library terkahir video player yaitu video.js. Video.Js dapat digunakan untuk HTML5 dan Flash. Library ini sangat populer digunakan untuk menampilkan video di website. Terbukti telah sampai saat ini terdapat 200,000 website yang telah menggunakannya.

5 Library Open Source Pemutar Video Player untuk HTML5

Untuk menggunakan video.js dapat menggunakan tag HTML <video></video>.

Berikut ini contoh potongan kode menggunakan video.js

video.js juga mendukung banyak format dalam satu pemutaran video.

Nah, itulah beberapa libary pemuyar video player untuk membuat website.

Sumber …

https://blog.bitsrc.io/5-open-source-html5-video-players-for-2018-38fa85932afb

Baca Juga…

Leave a Reply