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
This is my first time using the element framework...
1. Effect display An astronaut watch face written...
This article introduces the sample code of CSS3 c...
Table of contents Preface Generation of redo log ...
1. Check the character set of the database The ch...
One day, the leader put forward a requirement to ...
Preface When installing the executable file of a ...
The company project was developed in Java and the...
1. Create a user: Order: CREATE USER 'usernam...
Table of contents 1. React.Children.map 2. React....
1. Introduction to yum Yum (full name Yellow dogU...
Preface The similarities and differences between ...
1. Overview of modules and instructions used to l...
Today I will introduce the most basic functions of...
Table of contents 1. Count data is lost Solution ...