close

JW Player 사용 방법: 비디오 삽입 및 구성

JW 플레이어란 무엇인가요?

JW Player는 웹사이트에서 비디오를 재생할 수 있는 강력하고 유연한 도구입니다. 이 가이드에서는 CDN을 사용하거나 다운로드하는 방법을 포함하여 JW Player의 사용 방법을 자세히 설명합니다.

JW Player 라이브러리를 얻는 방법

JW Player 라이브러리를 얻는 방법에는 CDN을 사용하거나 로컬 호스팅에 다운로드하는 두 가지 방법이 있습니다.

1. CDN 사용(권장)

CDN(콘텐츠 전송 네트워크)을 사용하는 것은 JW 플레이어를 통합하는 가장 간단하고 빠른 방법입니다. CDN은 파일이 전 세계 여러 서버에 호스팅되기 때문에 파일을 더 빠르게 로드하는 데 도움이 됩니다.

<head>CDN을 사용하려면 웹사이트 섹션 에 다음 코드 줄을 추가하세요. 참고: <YOUR_LICENSE_KEY> 을 실제 라이선스 키로 바꿔야 합니다 .

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

2. 로컬 다운로드 및 호스팅

파일을 완벽하게 제어하고 싶고 네트워크 연결에 의존하고 싶지 않다면 JW Player를 다운로드하여 자신의 서버에 호스팅할 수 있습니다.

  1. JW Player 공식 웹사이트로 이동하세요.

  2. 계정에 가입하거나 로그인하세요(무료 체험판을 이용할 수 있습니다).

  3. 계정 대시보드에서 라이브러리를 찾아 다운로드하세요.

  4. 파일의 압축을 풀고 폴더를 서버에 업로드하세요.

JW Player 사용에 대한 자세한 가이드

라이브러리가 있으면 JW Player를 웹사이트에 내장할 수 있습니다.

1. HTML 파일을 만들고 JW Player를 삽입합니다.

다음은 완전한 HTML 예시입니다. CDN을 사용하는 경우 해당 <script src="...">줄을 위에서 언급한 CDN 코드로 바꾸세요. 다운로드한 라이브러리를 사용하는 경우 파일 경로 jwplayer.js가 올바른지 확인하세요.

<!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. 코드에 대한 자세한 설명

  • <script src="...">: 이 라인은 JW Player 라이브러리를 귀하의 웹사이트에 연결합니다.

  • <div id="video-container"></div>: 여기에 비디오가 표시됩니다. id원하는 이름을 지정할 수 있지만, 함수에 사용된 이름과 일치하는지 확인하세요 jwplayer().

  • jwplayer("video-container").setup({...}): 여기서 JW Player를 초기화하고 구성합니다.

    • "file": 비디오 파일의 경로입니다.

    • "image": 비디오 썸네일 이미지의 경로입니다.

    • "width"및 "height": 플레이어의 크기를 설정합니다. "100%"반응형 플레이어에도 사용할 수 있습니다.

    • "autostart" true: 비디오를 자동으로 재생하려면 설정하세요 .

    • "controls" false: 플레이어 컨트롤을 숨기려면 설정하세요 .

이 자세한 가이드를 통해 JW Player를 사용하여 웹사이트에 비디오를 쉽게 표시할 수 있습니다.