In diesem Artikel wird die Methode zur Implementierung eines einfachen HTML-Videoplayers vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
Dateiliste
root@tianshl:/data/video# lshch.mp4 test.mp4 xyx.mp4 index.html video.list jquery.js
index.html
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <style type=text/css> body{ text-align: center } #content-wrap{ margin-top: 50px; -block; } #content{ display: flex; } /* player*/ #video{ display: inline-block: 0; box-sizing: border-box; } .video-list-wrap{ Hintergrundfarbe: #eee; border-right: 1px solid #fff; box-sizing: border-box; width: 150px; Listenelement*/ .video-item{ Cursor: Breite: 150 Pixel; Textausrichtung: links; . Video-Element: nicht (: Last-Child ){ border-bottom: 1px solid #fff } .video-item:hover, .active{ background-color: #ddd; Farbe: #333; } /* Videolistentitel*/ .video-title{ Hintergrundfarbe: Gainsboro; Schriftgröße: 30 Pixel; Textausrichtung: Mitte > </head> <body> <div id=content-wrap> <div id=content> <div class=video-list-wrap> <p class=video-title>Videoliste</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'); // Initialisiere den Player var init = function(src){ var $ video = $('<video id=video steuert>'); $video.attr('preload', 'auto'); $video.attr('width', 720).attr('height', 405); ', 'autoplay'); $video.append($('<Quelle>').attr('src', src).attr('type', 'video/mp4')); $content.append($video); /* Get video list*/ var $video_list = $('.video-list'); ); $.ajax({ url: video.list, type: GET, async: true, success: function(resp){ $.each(resp.split('/n'), function(idx, item){ if (item === '') return; var $p = $('<li>').addClass('video-item'); .data('path', item); $video_list.append($p); } }); ', function(){ $(#video).remove(); var $this = $(this); $this.parent().find('.active').removeClass('active'); 'active'); init($this.data('path') }) </script> </html>video.list
# Alle MP4-Dateien in diesem Verzeichnis für jQuery zum Parsen root@tianshl:/data/video# ls *.mp4 > video.list
Nginx-Konfiguration
user root;worker_processes 1;events { worker_connections 1024;}http { include mime.types; keepalive_timeout 65; server { listen 8000; location / { # Die ersten beiden Zeilen sind Authentifizierung (optional) auth_basic Secret ; auth_basic_user_file /usr/local/nginx/passwd.db; # Pfadstamm /data/video; # Home index index.html; Schnittstellenanzeigehttp://localhost:8000
Zertifizierung
Spieler
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.