この記事では、簡単な HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳細は次のとおりです。
ファイルリスト
root@tianshl:/data/video# lshch.mp4 test.mp4 xyx.mp4 Index.html video.list jquery.js
インデックス.html
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <style type=text/css> body{ text-align: center } #content-wrap{ margin-top: 50px; -block; } #content{ ディスプレイ: flex; } /* プレーヤー*/ #video{ ディスプレイ: インラインブロック; ボーダー: 12px;ボックスサイズ: ボーダーボックス; } .video-list-wrap{ 背景色: #eee; ボーダー右: 1px ソリッド #fff; } /* ビデオリスト*/ .video-list{ 表示: インラインブロック;ボックスサイズ: ボーダーボックス; 幅: 150 ピクセル; オーバーフロー: 12 ピクセル;リストアイテム*/ .video-item{ カーソル: ポインタ; 幅: 150px; テキスト整列: 左; .video-item:not(:last-child) ){ ボーダーボトム: 1px ソリッド #fff } .video-item:hover, .active{ 背景色: #ddd; color: #333; } /* 動画リストのタイトル*/ .video-title{ フォントサイズ: 12px; 行の高さ: 30px; } > </head> <body> <div id=content-wrap> <div id=content> <div class=video-list-wrap> <p class=video-title>ビデオリスト</p> <ul class=video-list></ul> </div> </div> </div> </body> <script type=text/javascript src=. /jquery.js></script> <script type=text/javascript> $(function(){ var $content = $('#content'); // プレーヤーを初期化します var init = function(src){ var $ビデオ = $('<ビデオid=ビデオコントロール>'); $video.attr('プリロード', 'auto').attr('高さ', 405); ', '自動再生'); $video.append($('<ソース>').attr('src', src).attr('type', 'video/mp4')); $content.append($video) }; /* ビデオリストを取得*/ var $video_list = $('height', 340) ); $.ajax({ url: video.list, type: GET, async: true, success: function(resp){ $.each(resp.split('/n'), function(idx, item){ if (item === '') return; $p = $('<li>').addClass('video-item'); .data('path', item); $video_list.append($p); /* ビデオを切り替える*/ $video_list.on('click', '.video-item) '、 function(){ $(#video).remove(); var $this = $(this).find('.active').removeClass('active'); 'アクティブ'); init($this.data('パス')) }) </script> </html>ビデオ.リスト
# jQuery が解析するこのディレクトリ内のすべての MP4 ファイル root@tianshl:/data/video# ls *.mp4 > video.list
nginxの設定
user root;worker_processes 1;events {worker_connections 1024;}http { include mime.types; keepalive_timeout 65; server { listen 8000; server_name local IP ; # 最初の 2 行は認証 (オプション) auth_basic_user_file /usr/local/nginx/passwd.db; # パスルート/data/video; # ホームインデックスindex.html;インターフェース表示http://ローカルホスト:8000
認証
プレーヤー
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。