How to implement a simple HTML video player
|
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
Recommend
Use of Linux chkconfig command
1. Command Introduction The chkconfig command is ...
Detailed explanation of the difference between the default value of the CSS attribute width: auto and width: 100%
width: auto The child element (including content+...
Tutorial diagram of using Jenkins for automated deployment under Windows
Today we will talk about how to use Jenkins+power...
Interview question: Three-row and three-column layout, tables are merged and nested tables are not allowed
There is an interview question that requires: a th...
Install Jenkins with Docker and solve the problem of initial plugin installation failure
After installing Jenkins, the initial download of...
CSS realizes the speech bubble effect with sharp corners in the small sharp corner chat dialog box
1. Use CSS to draw a small pointed-corner chat di...
Docker+gitlab+jenkins builds automated deployment from scratch
Table of contents Preface: 1. Install Docker 2. I...
CocosCreator Skeleton Animation Dragon Bones
CocosCreator version 2.3.4 Dragon bone animation ...
Detailed tutorial for installing influxdb in docker (performance test)
1. Prerequisites 1. The project has been deployed...
Detailed explanation of Linux dynamic library generation and usage guide
The file name of the dynamic library file under L...
How to control the startup order of docker compose services
summary Docker-compose can easily combine multipl...
Detailed installation tutorial of mysql 5.7.11 under Win7 system
Operating system: Win7 64-bit Ultimate Edition My...
Don’t bother with JavaScript if you can do it with CSS
Preface Any application that can be written in Ja...
Example method to view the IP address connected to MySQL
Specific method: First open the command prompt; T...
HTML uses marquee to achieve text scrolling left and right
Copy code The code is as follows: <BODY> //...