實現簡易html視頻播放器的方法

2024-08-26 00:10:01

字體：大中小

來源：轉載

供稿：網友

本文介紹了實現簡易html視頻播放器的方法，分享給大家，具體如下：

文件列表

root@tianshl:/data/video# lshch.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;            }            /* 播放器 */            #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{                display: inline-block;                box-sizing: border-box;                margin: 0;                width: 150px;                list-style: none;                padding: 0;                overflow: auto;                font-size: 12px;            }            /* 列表項 */            .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-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">視頻列表</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');            // 初始化播放器            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);            };                        /* 獲取視頻列表 */            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();            /* 切換視頻 */            $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

# 該目錄下的所有MP4文件, 供jQuery解析root@tianshl:/data/video# ls *.mp4 > video.list

nginx配置

user root;worker_processes  1;events {    worker_connections  1024;}http {    include       mime.types;    sendfile        on;    keepalive_timeout  65;    server {        listen       8000;        server_name  本機IP;        location / {            # 前兩行是認證(可不加)            auth_basic "secret";            auth_basic_user_file /usr/local/nginx/passwd.db;                        # 路徑            root /data/video;            # 首頁            index index.html;        }    }}

界面展示

http://localhost:8000

認證