close

Cara Nggunakake JW Player: Semat lan Konfigurasi Video

Apa JW Player?

JW Player minangka alat sing kuat lan fleksibel kanggo muter video ing situs web sampeyan. Pandhuan iki bakal menehi pandhuan rinci babagan cara nggunakake, kalebu carane njaluk perpustakaan nggunakake CDN utawa kanthi ndownload.

Piye carane njaluk JW Player Library

Sampeyan duwe rong pilihan kanggo njupuk perpustakaan JW Player: nggunakake CDN utawa ndownload kanggo hosting lokal.

1. Nggunakake CDN(Disaranake)

Nggunakake CDN(Content Delivery Network) minangka cara sing paling gampang lan paling cepet kanggo nggabungake JW Player. CDN mbantu mbukak file luwih cepet amarga di-host ing macem-macem server ing saindenging jagad.

Kanggo nggunakake CDN, cukup tambahake baris kode ing ngisor iki menyang <head>bagean situs web sampeyan. Cathetan: Sampeyan kudu ngganti <YOUR_LICENSE_KEY>karo kunci lisensi sing asli.

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

2. Ngundhuh lan Hosting Lokal

Yen sampeyan pengin kontrol lengkap liwat file lan ora pengin gumantung ing sambungan jaringan, sampeyan bisa ndownload JW Player lan dadi host ing server sampeyan dhewe.

  1. Bukak situs web JW Player resmi.

  2. Ndhaptar utawa mlebu menyang akun sampeyan(kasedhiya nyoba gratis).

  3. Golek lan download perpustakaan saka dashboard akun.

  4. Unzip file lan upload folder menyang server.

Pandhuan rinci kanggo nggunakake JW Player

Sawise sampeyan duwe perpustakaan, sampeyan bisa miwiti nglebokake JW Player menyang situs web sampeyan.

1. Nggawe File HTML lan Semat JW Player

Punika conto HTML lengkap. Yen sampeyan nggunakake CDN, ganti <script src="...">baris kasebut nganggo kode CDN sing kasebut ing ndhuwur. Yen sampeyan nggunakake perpustakaan sing diundhuh, priksa manawa path menyang jwplayer.jsfile kasebut bener.

<!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. Katrangan rinci babagan Kode

  • <script src="...">: Baris iki nyambungake perpustakaan JW Player menyang situs web sampeyan.

  • <div id="video-container"></div>: Iki ngendi video bakal ditampilake. Sampeyan bisa menehi apa wae idsing dikarepake, nanging priksa manawa cocog karo jeneng sing digunakake ing jwplayer()fungsi kasebut.

  • jwplayer("video-container").setup({...}): Iki ngendi sampeyan miwiti lan ngatur JW Player.

    • "file": Path menyang file video sampeyan.

    • "image": Path menyang gambar cilik video.

    • "width"lan "height": Nyetel dimensi kanggo pamuter. Sampeyan uga bisa digunakake "100%"kanggo pamuter responsif.

    • "autostart": Setel trueyen sampeyan pengin video diputer kanthi otomatis.

    • "controls": Setel falseyen sampeyan pengin ndhelikake kontrol pamuter.

Kanthi pandhuan rinci iki, sampeyan bisa kanthi gampang nggunakake JW Player kanggo nampilake video ing situs web sampeyan.