close

JW Playerの使い方： 動画の埋め込みと設定

JW Playerとは何ですか?

JW Playerは、ウェブサイトで動画を再生するための強力で柔軟なツールです。このガイドでは、CDN経由やダウンロードによるライブラリの入手方法など、JW Playerの使い方を詳しく説明します。

JW Playerライブラリの入手方法

JW Player ライブラリを取得するには、CDN を使用するか、ローカル ホスティング用にダウンロードするかの 2 つのオプションがあります。

1. CDNの使用（推奨）

CDN（コンテンツ配信ネットワーク）を利用するのが、JW Playerを統合する最も簡単かつ迅速な方法です。CDNは、ファイルが世界中の複数のサーバーにホストされるため、ファイルの読み込み速度が向上します。

<head>CDNを使用するには、ウェブサイトのセクション に次のコード行を追加するだけです。注： <YOUR_LICENSE_KEY>実際のライセンスキーに 置き換えてください。

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

2. ダウンロードしてローカルでホスティングする

ファイルを完全に制御したい場合や、ネットワーク接続に依存したくない場合は、JW Player をダウンロードして独自のサーバーでホストすることができます。

  1. JW Player の公式 Web サイトにアクセスします。

  2. サインアップするか、アカウントにログインしてください（無料トライアルをご利用いただけます）。

  3. アカウントダッシュボードからライブラリを見つけてダウンロードします。

  4. ファイルを解凍し、フォルダーをサーバーにアップロードします。

JW Playerの使い方ガイド

ライブラリを入手したら、JW Player を Web サイトに埋め込むことができます。

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 ライブラリを Web サイトにリンクします。

  • <div id="video-container"></div>: 動画が表示される場所です。id任意の名前を指定できますが、関数内で使用されている名前と一致するようにしてくださいjwplayer()。

  • jwplayer("video-container").setup({...}): ここで JW Player を初期化して設定します。

    • "file": ビデオ ファイルへのパス。

    • "image": ビデオのサムネイル画像へのパス。

    • "width"および"height": プレーヤーのサイズを設定します。"100%"レスポンシブプレーヤーにも使用できます。

    • "autostart":trueビデオを自動的に再生する場合は に設定します。

    • "controls":falseプレーヤーのコントロールを非表示にする場合は に設定します。

この詳細なガイドを使用すると、JW Player を使用して Web サイトにビデオを簡単に表示できるようになります。