close

Cara Menggunakan JW Player: Sematkan dan Konfigurasi Video

Apa itu JW Player?

JW Player adalah alat yang canggih dan fleksibel untuk memutar video di situs web Anda. Panduan ini akan memberikan panduan terperinci tentang cara menggunakannya, termasuk cara mendapatkan pustakanya menggunakan CDN atau mengunduhnya.

Cara Mendapatkan Perpustakaan JW Player

Anda memiliki dua pilihan untuk mendapatkan pustaka JW Player: menggunakan CDN atau mengunduhnya untuk hosting lokal.

1. Menggunakan CDN(Disarankan)

Menggunakan CDN(Content Delivery Network) adalah cara termudah dan tercepat untuk mengintegrasikan JW Player. CDN membantu memuat berkas lebih cepat karena berkas-berkas tersebut dihosting di beberapa server di seluruh dunia.

Untuk menggunakan CDN, cukup tambahkan baris kode berikut ke <head>bagian situs web Anda. Catatan: Anda perlu menggantinya <YOUR_LICENSE_KEY>dengan kunci lisensi Anda yang sebenarnya.

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Mengunduh dan Menghosting Secara Lokal

Jika Anda menginginkan kontrol penuh atas berkas dan tidak ingin bergantung pada koneksi jaringan, Anda dapat mengunduh JW Player dan menyimpannya di server Anda sendiri.

  1. Kunjungi situs web resmi JW Player.

  2. Daftar atau masuk ke akun Anda(uji coba gratis tersedia).

  3. Temukan dan unduh perpustakaan dari dasbor akun Anda.

  4. Ekstrak file tersebut dan unggah folder ke server Anda.

Panduan Lengkap Penggunaan JW Player

Setelah Anda memiliki perpustakaan, Anda dapat mulai menanamkan JW Player ke situs web Anda.

1. Buat File HTML dan Sematkan JW Player

Berikut contoh HTML lengkapnya. Jika Anda menggunakan CDN, ganti <script src="...">baris tersebut dengan kode CDN yang disebutkan di atas. Jika Anda menggunakan pustaka yang diunduh, pastikan jalur ke jwplayer.jsberkas sudah benar.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. Penjelasan Kode Secara Rinci

  • <script src="...">:Baris ini menghubungkan pustaka JW Player ke situs web Anda.

  • <div id="video-container"></div>Di sinilah video akan ditampilkan. Anda bisa memilihnya sesuka idhati, tetapi pastikan sesuai dengan nama yang digunakan dalam jwplayer()fungsi.

  • jwplayer("video-container").setup({...}): Di sinilah Anda menginisialisasi dan mengonfigurasi JW Player.

    • "file": Jalur ke berkas video Anda.

    • "image": Jalur ke gambar mini video.

    • "width"dan "height": Mengatur dimensi untuk pemain. Anda juga dapat menggunakan "100%"untuk pemain responsif.

    • "autostart": Atur truejika Anda ingin video diputar secara otomatis.

    • "controls": Atur falsejika Anda ingin menyembunyikan kontrol pemutar.

Dengan panduan terperinci ini, Anda dapat dengan mudah mulai menggunakan JW Player untuk menampilkan video di situs web Anda.