全国统一服务热线：400-633-9193

  1. 主页
  2. 知识中心
  3. 软件开发

实现简易html视频播放器的方法

    网络     2018-06-22    1409

本文介绍了实现简易html视频播放器的方法，分享给大家，具体如下：

文件列表

1
2
root@tianshl:/data/video# ls
hch.mp4     test.mp4    xyx.mp4   index.html  video.list  jquery.js

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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

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

nginx配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

认证

播放器


  分享到：  

上一篇：html2canvas 将html代码转为图片的使用方法

下一篇：HTML页面原生VIDEO标签隐藏下载按钮功能

热门文章

随机文章

友情
链接
甘肃明星软件公司
北京神州祥龙科技公司
神州祥龙在线财务
百度
360搜索
腾讯
IT资讯
IT网易科技
华军软件园
天空下载

Copyright @甘肃明星软件开发有限公司

全国统一服务热线：400-633-9193

E-mail：417560663@qq.com

网站备案：陇ICP备2021002704号-1

甘公网安备 62010202002545号

0.4676s