This article introduces the method of implementing a simple HTML video player and shares it with you. The details are as follows: File List root@tianshl:/data/video# ls hch.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; display: inline-block; } #content{ display: flex; } /* Player */ #video{ display: inline-block; margin: 0; border: 12px solid #eee; box-sizing: border-box; } .video-list-wrap{ background-color: #eee; border-right: 1px solid #fff; } /* Video list */ .video-list{ display: inline-block; box-sizing: border-box; margin: 0; width: 150px; list-style: none; padding: 0; overflow:auto; font-size: 12px; } /* List items */ .video-item{ cursor: pointer; width: 150px; box-sizing: border-box; text-align: left; padding: 5px 0 5px 10px; } .video-item:not(:last-child){ border-bottom: 1px solid #fff; } .video-item:hover, .active{ background-color: #ddd; color: #333; } /* Video list title */ .video-title{ background-color: gainsboro; font-size: 12px; height: 30px; line-height: 30px; text-align: center; } </style> </head> <body> <div id="content-wrap"> <div id="content"> <div class="video-list-wrap"> <p class="video-title">Video List</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'); // Initialize the player var init = function(src){ var $video = $('<video id="video" controls>'); $video.attr('preload', 'auto'); $video.attr('width', 720).attr('height', 405); $video.attr('autoplay', 'autoplay'); $video.append($('<source>').attr('src', src).attr('type', 'video/mp4')); $content.append($video); }; /* Get video list */ var $video_list = $('.video-list'); $video_list.css('height', 340); $.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'); $p.text(item); $p.data('path', item); $video_list.append($p); }); } }); init(); /* Switch video */ $video_list.on('click', '.video-item', function(){ $("#video").remove(); var $this = $(this); $this.parent().find('.active').removeClass('active'); $this.addClass('active'); init($this.data('path')); }); }) </script> </html> video.list # All MP4 files in this directory, for jQuery to parse root@tianshl:/data/video# ls *.mp4 > video.list nginx configuration 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; location / { # The first two lines are for authentication (optional) auth_basic "secret"; auth_basic_user_file /usr/local/nginx/passwd.db; # path root /data/video; # Home page index index.html; } } } Interface display http://localhost:8000 Certification Player The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: How to create a test database with tens of millions of test data in MySQL
>>: Analysis of the difference between emits and attrs in Vue3
<br />When you click the link, the web page ...
This article shares the specific code of the vue3...
A recent business involves such a requirement tha...
This article shares with you how to use Vue to ch...
At work, we often need remote servers and often e...
Introduction to four commonly used MySQL engines ...
1 Introduction Thread technology was proposed as ...
Route parameters, route navigation guards: retain...
Detailed explanation of MySQL instance with SSD s...
Table of contents 1. Steps to use Jquery: (1) Imp...
Table of contents Preface Parsing parameters Modi...
Knowledge point 1: Set the base URL of the web pa...
As we all know, without the cd command, we cannot...
For example: Copy code The code is as follows: <...
MariaDB is installed by default in CentOS, which ...