Artikel ini memperkenalkan metode penerapan pemutar video html sederhana dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
daftar berkas
root@tianshl:/data/video# lshch.mp4 test.mp4 xyx.mp4 index.html video.list jquery.js
indeks.html
<!DOCTYPE html><html> <head> <meta charset=UTF-8> <style type=text/css> body{ text-align: center; } #content-wrap{ margin-top: 50px tampilan: sebaris -block; } #content{ display: flex; } /* player*/ #video{ display: inline-block margin: 0; ukuran kotak: kotak-batas; } .video-daftar-bungkus{ warna latar: #eee; batas-kanan: 1px solid #fff; } /* Daftar video*/ .video-daftar{ tampilan: blok sebaris; ukuran kotak: kotak batas; margin: 0; lebar: 150 piksel; gaya daftar: tidak ada; bantalan: 0; ukuran font: 12 piksel; Daftar item*/ .video-item{ kursor: penunjuk; lebar: 150 piksel; ukuran kotak: kotak-batas; perataan teks: kiri; bantalan: 5 piksel 0 5 piksel 10 piksel; ){ batas bawah: 1 piksel solid #fff } .video-item:hover, .active{ warna latar: #ddd; warna: #333; } /* Judul daftar video*/ .video-title{ warna latar: gainboro; ukuran font: 12 piksel; tinggi: 30 piksel; > </head> <body> <div id=content-wrap> <div id=content> <div class=video-list-wrap> <p class=video-title>Daftar video</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'); // Inisialisasi pemutar var init = function(src){ var $ video = $('<video id=kontrol video>'); $video.attr('pramuat', 'otomatis'); $video.attr('lebar', 720).attr('tinggi', 405); ', 'putar otomatis'); $video.tambahkan($('<sumber>').attr('src', src).attr('ketik', 'video/mp4')); $content.append($video); /* Dapatkan daftar video*/ var $video_list = $('.video-list'); $video_list.css('tinggi', 340 ); $.ajax({ url: video.list, ketik: GET, async: true, sukses: function(resp){ $.each(resp.split('/n'), fungsi(idx, item){ if (item === '') kembali; var $p = $('<li>').addClass('video-item'); $p.teks(item); .data('jalur', item); $video_list.append($p); } }); /* Ganti video*/ $video_list.on('klik', '.video-item ', fungsi(){ $(#video).remove(); var $ini = $(ini); $ini.parent().find('.active').removeClass('aktif'); 'aktif'); init($ini.data('jalur') } }) </skrip> </html>video.daftar
# Semua file MP4 di direktori ini untuk diurai oleh jQuery root@tianshl:/data/video# ls *.mp4 > video.list
konfigurasi nginx
user root;worker_processes 1;events {worker_connections 1024;}http { include mime.types; sendfile on; keepalive_timeout 65; server {listen 8000; server_name local IP; auth_basic_user_file /usr/local/nginx/passwd.db; # Jalur root /data/video; # Indeks beranda.html; Tampilan antarmukahttp://localhost:8000
Sertifikasi
pemain
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.