シンプルな HTML ビデオプレーヤーを実装する方法

この記事では、シンプルな HTML ビデオプレーヤーを実装する方法を紹介し、皆さんと共有します。詳細は次のとおりです。

ファイルリスト

root@tianshl:/data/video# ls
hch.mp4 test.mp4 xyx.mp4 index.html video.list jquery.js

インデックス.html

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <スタイル タイプ="text/css">
            体{
                テキスト配置: 中央;
            }
            #コンテンツラップ{
                上マージン: 50px;
                表示: インラインブロック;
            }

            ＃コンテンツ{
                ディスプレイ: フレックス;
            }

            /* プレイヤー */
            ＃ビデオ{
                表示: インラインブロック;
                マージン: 0;
                境界線: 12px 実線 #eee;
                ボックスのサイズ: 境界線ボックス;
            }

            .ビデオリストラップ{
                背景色: #eee;
                右境界線: 1px 実線 #fff;
            }

            /* ビデオリスト */
            .ビデオリスト{
                表示: インラインブロック;
                ボックスのサイズ: 境界線ボックス;
                マージン: 0;
                幅: 150ピクセル;
                リストスタイル: なし;
                パディング: 0;
                オーバーフロー:自動;
                フォントサイズ: 12px;

            }

            /* リスト項目 */
            .ビデオアイテム{
                カーソル: ポインタ;
                幅: 150ピクセル;
                ボックスのサイズ: 境界線ボックス;
                テキスト配置: 左;
                パディング: 5px 0 5px 10px;
            }

            .video-item:not(:last-child){
                下境界線: 1px 実線 #fff;
            }

            .video-item:hover、.active{
                背景色: #ddd;
                色: #333;
            }

            /* ビデオリストのタイトル */
            .ビデオタイトル{
                背景色: ゲインズボロ;
                フォントサイズ: 12px;
                高さ: 30px;
                行の高さ: 30px;
                テキスト配置: 中央;
            }
        </スタイル>
    </head>

    <本文>
        <div id="コンテンツラップ">
            <div id="コンテンツ">
                <div class="ビデオリストラップ">
                    <p class="video-title">ビデオリスト</p>
                    <ul class="ビデオリスト"></ul>
                </div>
            </div>
        </div>
    </本文>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(関数(){
            var $content = $('#content');

            // プレーヤーを初期化する var init = function(src){
                var $video = $('<video id="video" コントロール>');
                $video.attr('プリロード', '自動');
                $video.attr('幅', 720).attr('高さ', 405);
                $video.attr('自動再生', '自動再生');
                $video.append($('<source>').attr('src', src).attr('type', 'video/mp4'));
                $content.append($video);
            };
            
            /* ビデオリストを取得 */
            var $video_list = $('.video-list');

            $video_list.css('高さ', 340);

            $.ajax({
                url: "video.list",
                タイプ: "GET",
                非同期: true、
                成功: function(resp){

                    $.each(resp.split('\n'), function(idx, item){
                        if (item === '') 戻り値:
                        var $p = $('<li>').addClass('ビデオアイテム');
                        $p.text(アイテム);
                        $p.data('パス', 項目);
                        $video_list.append($p);
                    });
                }
            });

            初期化();

            /* ビデオを切り替える */
            $video_list.on('click', '.video-item', function(){
                $("#video").remove();
                var $this = $(this);
                $this.parent().find('.active').removeClass('active');
                クラスを追加します。
                $this.data を初期化します('path')。
            });

        })
    </スクリプト>   
</html>

ビデオリスト

# このディレクトリ内のすべての MP4 ファイル (jQuery が解析するため) root@tianshl:/data/video# ls *.mp4 > video.list

nginx の設定

ユーザー root;
ワーカープロセス 1;
イベント {
    ワーカー接続 1024;
}
http {
    mime.types を含めます。
    ファイル送信オン;
    キープアライブタイムアウト65;

    サーバー{
        8000を聴く;
        server_name ローカル IP;
        位置 / {
            # 最初の2行は認証用です（オプション）
            auth_basic "シークレット";
            auth_basic_user_file /usr/local/nginx/passwd.db;
            
            # パス ルート /data/video;
            # ホームページインデックス index.html;
        }
    }
}

インターフェース表示

http://ローカルホスト:8000

認証