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

Introduction to the use of base link tag base

<br />When you click the link, the web page ...

How to manually encapsulate paging components in Vue3.0

This article shares the specific code of the vue3...

Vue page monitoring user preview time function implementation code

A recent business involves such a requirement tha...

Vue implements a shopping cart that can change the shopping quantity

This article shares with you how to use Vue to ch...

Windows Server 2008 R2 Multi-User Remote Desktop Connection Licensing

At work, we often need remote servers and often e...

A brief discussion of four commonly used storage engines in MySQL

Introduction to four commonly used MySQL engines ...

Analysis of multi-threaded programming examples under Linux

1 Introduction Thread technology was proposed as ...

Vue routing returns the operation method of restoring page status

Route parameters, route navigation guards: retain...

Detailed explanation of MySQL instance with SSD storage enabled

Detailed explanation of MySQL instance with SSD s...

Some wonderful uses of URL objects in JavaScript

Table of contents Preface Parsing parameters Modi...

Detailed explanation of HTML page header code example

Knowledge point 1: Set the base URL of the web pa...

How to enter directory/folder in Linux without using CD command

As we all know, without the cd command, we cannot...

Introduction to the use of this in HTML tags

For example: Copy code The code is as follows: <...

Detailed tutorial on installing mysql 5.7.26 on centOS7.4

MariaDB is installed by default in CentOS, which ...