Maison > interface Web > tutoriel HTML > le corps du texte

Comment implémenter un simple lecteur vidéo HTML

不言
Libérer: 2018-05-08 16:22:24
original
4439 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

Lecteur

Recommandations associées :

Introduction à l'utilisation des balises vidéo HTML5


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal