Membuat Pemutar video html5 dengan Video.js

Pemutar video html5 dengan Video.js - Halo Sobat Pelajar, Punya Website Streaming? atau Website/Blog Pribadi yang suka Post Video tapi bingung memakai player apa yang bagus ? berikut Codepelajar akan ngasih tau Plugin keren untuk pemutar Video di HTML5. Plugin ini juga sudah digunakan oleh lebih dari 400.000 situs web, termasuk perusahaan seperti Microsoft , instagram , IGN , twitter , dan lain-lain.


Sebelumnya Apasih? Video.js, Video.js merupakan library javascript dan css yang akan mempermudah kita untuk membuat video dari HTML5. Video.js juga dikenal sebagai HTML5 video player. Dimana pada tutorial sebelum ini juga saya telah membahas satu plugin untuk mempermudah Sobat membuat Pemutar Video,MP3 di HTML5 Cara Embed Audio & Video di Blog Dengan Plyr .

Install

Pertama kita perlu menyertakan file javascript dan css di atas </head> atau </body> sebagai berikut:

<script src="http://vjs.zencdn.net/VERSI/video.min.js"></script>
<link href="http://vjs.zencdn.net/VERSI/video-js.min.css" rel="stylesheet"/>

Di mana VERSI dapat kamu sesuaikan dengan versi yang terbaru, silahkan check halaman resmiNya untuk melihat Versi Terbaru. Sekarang untuk memulai Player, kita hanya perlu menambahkan struktur di HTML5 , mengganti tautan yang sesuai:

<video id="Pelajar-video1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"//tentukan tinggi dan lebar video player
  poster="http://video-js.zencoder.com/oceans-clip.png"//cover video pada tampilan awal sebelum video play
  data-setup='{"example_option":true}'>
 <source src="Pelajar-video.mp4" type='video/mp4' />//isi dengan directori video yang ingin diputar(mp4)
 <source src="Pelajar-video.webm" type='video/webm' />//isi dengan directori video yang ingin diputar(webm)
 <source src="Pelajar-video.ogv" type='video/ogg' />//isi dengan directori video yang ingin diputar(ogv)
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

tribut 'data-setup' secara otomatis mengatur video saat halaman siap, dan membaca pilihan (dalam format JSON) atribut (lihat opsi).

Atribut 'ID' harus unik untuk setiap video yang akan diputar dalam satu halaman.

Atribut 'class' terdiri dari 2 kelas:
  • video-js untuk fungsionalitas video player seperti fullscreen dan subtitle
  • vjs-default-skin untuk mengatur tema default HTML control, yang dapat dihapus atau diganti untuk membuat desain kontrol kita sendiri.

Player akan berjalan dengan desain default. Jika karena alasan tertentu Sobat menginginkan desain yang berbeda, Sobat dapat mengunjungi halaman berikut untuk menghasilkan Skin Player lebih menarik. Setelah skin sesuai, buat file css baru dengan nama custom-skin, Salin dan terapkan Kode CSS yang di dapat di halaman web tersebut ke dalam custom-skin.css lalu upload ke Github/Firebase Terserah Sobat.

<script src="http://vjs.zencdn.net/VERSION/video.min.js"></script>
<link href="http://vjs.zencdn.net/VERSION/video-js.css" rel="stylesheet"/>
<!-- skin -->
<link href="custom-skin.css" rel="stylesheet"/>

Sayangnya video.js tidak mendukung YouTube , Vimeo atau platform lain secara native, untuk ini perlu menggunakan sebuah Plugin tambahan

Mungkin Tutorial ini sedikit membingunkan untuk di ikuti oleh pemula, tapi tidak ada salahnya untuk mencoba. Jika merasa kesulitan silahkan tinggalkan pertanyaanMu di kolom komentar jgn lupa untuk Follow Akun IG @Code_Pelajar ya Sob!.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel