How to implement a simple HTML video player

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

How to use Element in React project

This is my first time using the element framework...

Example code for implementing card waterfall layout with css3 column

This article introduces the sample code of CSS3 c...

In-depth analysis of MySQL 8.0 redo log

Table of contents Preface Generation of redo log ...

Tutorial on setting up scheduled tasks to backup the Oracle database under Linux

1. Check the character set of the database The ch...

How to completely delete the MySQL service (clean the registry)

Preface When installing the executable file of a ...

Tomcat common exceptions and solution code examples

The company project was developed in Java and the...

mysql5.7 create user authorization delete user revoke authorization

1. Create a user: Order: CREATE USER 'usernam...

Detailed usage of React.Children

Table of contents 1. React.Children.map 2. React....

How to use the yum command

1. Introduction to yum Yum (full name Yellow dogU...

7 interesting ways to achieve hidden elements in CSS

Preface The similarities and differences between ...

Beginner's guide to building a website ⑥: Detailed usage of FlashFXP

Today I will introduce the most basic functions of...

MySQL Null can cause 5 problems (all fatal)

Table of contents 1. Count data is lost Solution ...