Heim > Artikel > Web-Frontend > So implementieren Sie einen einfachen HTML-Videoplayer

So implementieren Sie einen einfachen HTML-Videoplayer

不言Original: 2018-05-08 16:22:244345Durchsuche

In diesem Artikel wird hauptsächlich die Methode zur Implementierung eines einfachen HTML-Videoplayers vorgestellt. Es ist sehr einfach, einen Videoplayer mit H5 zu erstellen. Sie müssen nur einige H5-Tags hinzufügen.

Dieser Artikel Stellt die Methode zur Implementierung eines einfachen HTML-Videoplayers vor und gibt ihn wie folgt für alle frei:

Dateiliste

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;
            }

            /* 播放器 */
            #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>

video.list

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

nginx-Konfiguration

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;
        }
    }
}

Schnittstellenanzeige

http://localhost:8000

Authentifizierung

Player

Verwandte Empfehlungen:

Einführung in die Verwendung von HTML5-Video-Video-Tags

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen einfachen HTML-Videoplayer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in das Autofokus-Attribut in HTML5Nächster Artikel：Einführung in das Autofokus-Attribut in HTML5

In Verbindung stehende Artikel

Mehr sehen