Cet article présente la méthode de mise en œuvre d'un simple lecteur vidéo HTML et le partage avec tout le monde. Les détails sont les suivants :
liste de fichiers
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 margin: 0; box-sizing: border-box; } .video-list-wrap{ background-color: #eee; border-right: 1px solid #fff; } /* Liste de vidéos*/ .video-list{ display: inline-block; dimensionnement de la boîte : bordure-boîte ; marge : 0 ; largeur : 150 px ; style de liste : aucun ; débordement : auto ; Élément de liste*/ .video-item{ curseur : pointeur ; largeur : 150 px ; ){ border-bottom : 1px solid #fff; } .video-item:hover, .active{ background-color : #ddd; couleur : #333 ; } /* Titre de la liste des vidéos*/ .video-title{ background-color : gainsboro ; taille de la police : 12 px ; hauteur de la ligne : 30 px ; > </head> <body> <div id=content-wrap> <div id=content> <div class=video-list-wrap> <p class=video-title>Liste de vidéos</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'); // Initialise le lecteur var init = function(src){ var $ vidéo = $('<vidéo id=contrôles vidéo>'); $video.attr('preload', 'auto'); $video.attr('largeur', 720).attr('hauteur', 405); ', 'lecture automatique'); $video.append($('<source>').attr('src', src).attr('type', 'video/mp4')); $content.append($video); /* Obtenir la liste des vidéos*/ var $video_list = $('.video-list'); ); $.ajax({ url : video.list, tapez : GET, async : true, succès : function(resp){ $.each(resp.split('/n'), function(idx, item){ if (item === '') return; var $p = $('<li>').addClass('video-item'); .data('chemin', élément); $video_list.append($p); init(); /* Changer de vidéo*/ $video_list.on('clic', '.video-item); ', function(){ $(#video).remove(); var $this = $(this); $this.parent().find('.active').removeClass('active'); 'actif'); init($this.data('chemin')); }); </script> </html>vidéo.list
# Tous les fichiers MP4 de ce répertoire pour que jQuery les analyse root@tianshl:/data/video# ls *.mp4 > video.list
configuration nginx
user root;worker_processes 1;events { worker_connections 1024;}http { include mime.types; keepalive_timeout 65; server { listening 8000; server_name local IP; location / { # Les deux premières lignes sont l'authentification (facultatif) auth_basic secret ; auth_basic_user_file /usr/local/nginx/passwd.db; # Racine du chemin /data/video; # Index d'accueil index.html; } }} Affichage de l'interfacehttp://localhost:8000
Attestation
joueur
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.