Comment implémenter un simple lecteur vidéo HTML-tutoriel HTML-php.cn

Comment implémenter un simple lecteur vidéo HTML

不言

Libérer： 2018-05-08 16:22:24

original

4476 Les gens l'ont consulté

Cet article présente principalement la méthode d'implémentation d'un lecteur vidéo HTML simple. Il est très simple de créer un lecteur vidéo avec H5. Il vous suffit d'ajouter quelques balises H5 pour créer un lecteur sympa.

Cet article. Présente la méthode de mise en œuvre d'un simple lecteur vidéo HTML et la partage avec tout le monde. Les détails sont les suivants :

Liste des fichiers

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

Copier après la connexion

<🎜. >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>
        <p id="content-wrap">
            <p id="content">
                <p class="video-list-wrap">
                    <p class="video-title">视频列表</p>
                    <ul class="video-list"></ul>
                </p>
            </p>
        </p>
    </body>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $content = $(&#39;#content&#39;);

            // 初始化播放器
            var init = function(src){
                var $video = $(&#39;<video id="video" controls>&#39;);
                $video.attr(&#39;preload&#39;, &#39;auto&#39;);
                $video.attr(&#39;width&#39;, 720).attr(&#39;height&#39;, 405);
                $video.attr(&#39;autoplay&#39;, &#39;autoplay&#39;);
                $video.append($(&#39;<source>&#39;).attr(&#39;src&#39;, src).attr(&#39;type&#39;, &#39;video/mp4&#39;));
                $content.append($video);
            };
            
            /* 获取视频列表 */
            var $video_list = $(&#39;.video-list&#39;);

            $video_list.css(&#39;height&#39;, 340);

            $.ajax({
                url: "video.list",
                type: "GET",
                async: true,
                success: function(resp){

                    $.each(resp.split(&#39;\n&#39;), function(idx, item){
                        if (item === &#39;&#39;) return;
                        var $p = $(&#39;<li>&#39;).addClass(&#39;video-item&#39;);
                        $p.text(item);
                        $p.data(&#39;path&#39;, item);
                        $video_list.append($p);
                    });
                }
            });

            init();

            /* 切换视频 */
            $video_list.on(&#39;click&#39;, &#39;.video-item&#39;, function(){
                $("#video").remove();
                var $this = $(this);
                $this.parent().find(&#39;.active&#39;).removeClass(&#39;active&#39;);
                $this.addClass(&#39;active&#39;);
                init($this.data(&#39;path&#39;));
            });

        })
    </script>   
</html>

Copier après la connexion

video.list

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

Copier après la connexion

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  本机IP;
        location / {
            # 前两行是认证(可不加)
            auth_basic "secret";
            auth_basic_user_file /usr/local/nginx/passwd.db;
            
            # 路径
            root /data/video;
            # 首页
            index index.html;
        }
    }
}

Copier après la connexion

Affichage de l'interface

http://localhost:8000

Authentification