close

DPlayerガイド： MP4、HLS、FLVビデオの埋め込みと設定

DPlayerとは何ですか?

DPlayerは、強力で柔軟性の高いオープンソースの動画プレーヤーです。MP4などの一般的な動画フォーマットだけでなく、HLSやFLVストリームにも対応しており、ライブ動画の再生に最適です。DPlayerは、シンプルでカスタマイズ可能なインターフェースと、内蔵の「弾幕」（フローティングコメント）機能が特徴です。

DPlayerの使い方詳細ガイド

DPlayer を使用するには、ライブラリと必要な依存関係を埋め込み、プレーヤーを構成する必要があります。

ステップ1: 必要なライブラリを入手する

これらのライブラリを入手する最も速い方法は、CDNを使用することです。ページに依存ライブラリが含まれている場合、DPlayerは自動的にそれらを検出して使用します。

  • MP4の場合（デフォルト）： 

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

  • HLS(.m3u8) の場合:

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>

  • FLV(.flv) の場合:

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

ステップ2: HTMLを作成し、プレーヤーを構成する

ライブラリを埋め込んだ後、<div>ビデオを表示する要素を作成し、特定のプロパティを使用して DPlayer を構成できます。

<!DOCTYPE html>  
<html>  
<head>  
    <title>Advanced DPlayer Example</title>  
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>  
</head>  
<body>  
  
    <h1>How to Use DPlayer</h1>  
  
    <div id="dplayer-container-1"></div>  
  
    <hr>  
  
    <div id="dplayer-container-2"></div>  
  
    <hr>  
  
    <div id="dplayer-container-3"></div>  
  
    <script>  
        // DPlayer configuration for MP4  
        const dpMP4 = new DPlayer({  
            container: document.getElementById('dplayer-container-1'),  
            autoplay: false,  
            lang: 'en',  
            loop: true,  
            hotkey: true,  
            preload: 'auto',  
            screenshot: true,  
            video: {  
                url: 'https://example.com/videos/my-video.mp4',  
                pic: 'https://example.com/images/my-video-thumbnail.jpg',  
                thumbnails: 'https://example.com/images/video-thumbnails.jpg',  
                type: 'mp4'  
            }  
        });  
  
        // DPlayer configuration for HLS  
        const dpHLS = new DPlayer({  
            container: document.getElementById('dplayer-container-2'),  
            autoplay: true,  
            lang: 'en',  
            theme: '#ff6666',  
            loop: false,  
            hotkey: true,  
            preload: 'metadata',  
            video: {  
                url: 'https://example.com/live/my-stream.m3u8',  
                type: 'hls',  
                customType: {  
                    hls: function(video, player) {  
                        const hls = new Hls();  
                        hls.loadSource(video.src);  
                        hls.attachMedia(video);  
                    }  
                }  
            }  
        });  
  
        // DPlayer configuration for FLV  
        const dpFLV = new DPlayer({  
            container: document.getElementById('dplayer-container-3'),  
            autoplay: true,  
            lang: 'en',  
            theme: '#0077c2',  
            loop: false,  
            hotkey: true,  
            preload: 'auto',  
            video: {  
                url: 'https://example.com/live/my-stream.flv',  
                type: 'flv',  
                customType: {  
                    flv: function(video, player) {  
                        const flvPlayer = flvjs.createPlayer({  
                            type: 'flv',  
                            url: video.src,  
                        });  
                        flvPlayer.attachMediaElement(video);  
                        flvPlayer.load();  
                    }  
                }  
            }  
        });  
    </script>  
</body>  
</html>

プロパティの詳細な説明

共通プロパティ（すべてのビデオタイプに適用）

  • container: DPlayer がレンダリングされる DOM 要素。必須。

  • autoplay:trueまたはfalse。ページが読み込まれるとビデオが自動的に再生されます。

  • theme: 16進カラーコード（例： '#FADFA3'）。プレーヤーのアクセントカラーを設定します。

  • lang: ユーザー インターフェイス言語(例:'en'英語)。

  • loop:trueまたはfalse. ビデオ終了後にループ再生します。

  • hotkey:trueまたはfalse. キーボードショートカットを有効にします(例: スペースバーで再生/一時停止)。

  • preload: 'auto'、'metadata'、または'none'。ブラウザがビデオをプリロードする方法。

    • 'auto': ビデオ全体をプリロードします。

    • 'metadata': メタデータ(期間、寸法) のみをプリロードします。

    • 'none': 何もプリロードしません。

  • screenshot:trueまたはfalse. ユーザーがビデオのスクリーンショットを撮ることを許可します。

  • video.url: ビデオ ファイルへのパス。

  • video.pic: サムネイル画像へのパス。

  • video.thumbnails: シークバーのサムネイル スプライトへのパス。

HLSとFLVのプロパティ

これらのビデオ形式は、機能するために外部ライブラリを必要とします。DPlayerは自動的にそれらを使用しますが、プロパティを使用して動作をカスタマイズすることもできますcustomType。

  • video.type: ビデオの種類を指定します。

    • 'mp4': デフォルト、省略可能。

    • 'hls':.m3u8動画用。

    • 'flv':.flv動画用。

  • video.customType: 各ビデオ タイプの処理ロジックをカスタマイズできるオブジェクト。

    • HLSの例： このコードはインスタンスcustomType.hlsを作成しHls、DPlayerの要素にアタッチします<video>。これは、特殊なケースを処理したり、HLSストリームをより細かく制御したりするのに役立ちます。

    • FLV の例:同様に、このコードは を作成しflvPlayer、それを要素に添付して<video>FLV ストリームを処理します。

これらのプロパティを使用すると、シンプルなビデオからライブ ストリームまで、あらゆるニーズに対応する強力で高度にカスタマイズ可能なビデオ プレーヤーを作成できます。