Este artículo presenta el método para implementar un reproductor de video html simple y lo comparte con todos. Los detalles son los siguientes:
lista de archivos
root@tianshl:/data/video# lshch.mp4 test.mp4 xyx.mp4 index.html video.list jquery.js
índice.html
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <style type=text/css> body{ text-align: center } #content-wrap{ margin-top: 50px display: inline; -block; } #content{ display: flex } /* player*/ #video{ display: inline-block; borde: 12px solid #eee; tamaño del cuadro: cuadro de borde; } .video-list-wrap{ color de fondo: #eee; borde derecho: 1px sólido #fff } /* Lista de videos*/ .video-list{ display: inline-block; tamaño del cuadro: cuadro de borde; margen: 0; ancho: 150 px; estilo de lista: ninguno; relleno: tamaño de fuente: 12 px; Elemento de lista*/ .video-item{ cursor: puntero; ancho: 150px; tamaño del cuadro: borde-cuadro; alineación de texto: izquierda; relleno: 5px 0 5px 10px; ){ borde inferior: 1px sólido #fff; } .video-item:hover, .active{ fondo-color: #ddd; color: #333; } /* Título de la lista de videos*/ .video-title{ color de fondo: Gainsboro; tamaño de fuente: 12 px; altura de línea: 30 px; > </head> <body> <div id=content-wrap> <div id=content> <div class=video-list-wrap> <p class=video-title>Lista de vídeos</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'); // Inicializa el reproductor var init = function(src){ var $ vídeo = $('<vídeo id=controles de vídeo>'); $video.attr('precarga', 'auto'); $video.attr('ancho', 720).attr('alto', 405); ', 'reproducción automática'); $video.append($('<fuente>').attr('src', src).attr('tipo', 'video/mp4')); $content.append($video }; /* Obtener lista de videos*/ var $video_list = $('.video-list'); ); $.ajax({ url: video.list, tipo: GET, async: verdadero, éxito: función(resp){ $.each(resp.split('/n'), function(idx, item){ if (item === '') return; var $p = $('<li>').addClass('video-item'); .data('ruta', elemento); $video_list.append($p); } } }); ', function(){ $(#video).remove(); var $this = $(this); $this.parent().find('.active').removeClass('active'); 'activo'); init($this.data('ruta') } }) </script> </html>lista de videos
# Todos los archivos MP4 en este directorio para que jQuery los analice root@tianshl:/data/video# ls *.mp4 > video.list
configuración nginx
usuario raíz;worker_processes 1;events {worker_connections 1024;}http {incluye mime.types; sendfile on; keepalive_timeout 65; servidor {escucha 8000; nombre del servidor IP local / { # Las dos primeras líneas son autenticación (opcional) auth_basic secret; auth_basic_user_file /usr/local/nginx/passwd.db # Ruta raíz; /data/video; # Índice de inicio index.html; Pantalla de interfazhttp://localhost:8000
Proceso de dar un título
jugador
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.