So implementieren Sie einen einfachen HTML-Videoplayer

Dieser Artikel stellt die Methode zur Implementierung eines einfachen HTML-Videoplayers vor und teilt sie mit Ihnen. Die Details sind wie folgt:

Dateiliste

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

Hauptseite

<!DOCTYPE html>
<html>
    <Kopf>
        <meta charset="UTF-8">
        <style type="text/css">
            Körper{
                Textausrichtung: zentriert;
            }
            #Inhaltswrap{
                Rand oben: 50px;
                Anzeige: Inline-Block;
            }

            #Inhalt{
                Anzeige: Flex;
            }

            /* Spieler */
            #Video{
                Anzeige: Inline-Block;
                Rand: 0;
                Rand: 12px durchgezogen #eee;
                Box-Größe: Rahmenbox;
            }

            .video-list-wrap{
                Hintergrundfarbe: #eee;
                Rahmen rechts: 1px durchgezogen #fff;
            }

            /* Videoliste */
            .video-Liste{
                Anzeige: Inline-Block;
                Box-Größe: Rahmenbox;
                Rand: 0;
                Breite: 150px;
                Listenstil: keiner;
                Polsterung: 0;
                Überlauf: automatisch;
                Schriftgröße: 12px;

            }

            /* Elemente auflisten */
            .video-item{
                Cursor: Zeiger;
                Breite: 150px;
                Box-Größe: Rahmenbox;
                Textausrichtung: links;
                Polsterung: 5px 0 5px 10px;
            }

            .video-item:nicht(:letztes-Kind){
                Rahmen unten: 1px durchgezogen #fff;
            }

            .video-item:hover, .active{
                Hintergrundfarbe: #ddd;
                Farbe: #333;
            }

            /* Titel der Videoliste */
            .video-Titel{
                Hintergrundfarbe: Gainsboro;
                Schriftgröße: 12px;
                Höhe: 30px;
                Zeilenhöhe: 30px;
                Textausrichtung: zentriert;
            }
        </Stil>
    </Kopf>

    <Text>
        <div id="Inhalts-Wrap">
            <div id="Inhalt">
                <div Klasse="Video-Liste-Wrap">
                    <p class="video-title">Videoliste</p>
                    <ul Klasse="Videoliste"></ul>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="./jquery.js"></script>
    <Skripttyp="text/javascript">
        $(Funktion(){
            var $inhalt = $('#inhalt');

            // Initialisiere den Player var init = function(src){
                var $video = $('<video id="video"-Steuerelemente>');
                $video.attr('Vorladen', 'Auto');
                $video.attr('Breite', 720).attr('Höhe', 405);
                $video.attr('automatische Wiedergabe', 'automatische Wiedergabe');
                $video.append($('<Quelle>').attr('src', src).attr('Typ', 'video/mp4'));
                $inhalt.anhängen($video);
            };
            
            /* Videoliste abrufen */
            var $video_list = $('.video-list');

            $video_list.css('Höhe', 340);

            $.ajax({
                URL: "video.list",
                Typ: "GET",
                asynchron: wahr,
                Erfolg: Funktion (bzw.) {

                    $.each(bzw.split('\n'), Funktion(idx, Element){
                        wenn (Element === '') zurückgeben;
                        var $p = $('<li>').addClass('Videoelement');
                        $p.text(Element);
                        $p.data('Pfad', Element);
                        $video_list.anhängen($p);
                    });
                }
            });

            init();

            /* Video wechseln */
            $video_list.on('klicken', '.video-item', function(){
                $("#video").entfernen();
                var $dies = $(dies);
                $this.parent().find('.active').removeClass('aktiv');
                $this.addClass('aktiv');
                init($this.data('Pfad'));
            });

        })
    </Skript>   
</html>

Videoliste

# Alle MP4-Dateien in diesem Verzeichnis, damit jQuery sie analysieren kann root@tianshl:/data/video# ls *.mp4 > video.list

Nginx-Konfiguration

Benutzer root;
Arbeiterprozesse 1;
Ereignisse {
    Arbeiterverbindungen 1024;
}
http {
    mime.types einschließen;
    sendfile an;
    KeepAlive-Timeout 65;

    Server {
        hör zu 8000;
        Servername lokale IP;
        Standort / {
            # Die ersten beiden Zeilen dienen der Authentifizierung (optional)
            auth_basic "geheim";
            auth_basic_benutzerdatei /usr/local/nginx/passwd.db;
            
            # Stammpfad /data/video;
            # Homepage-Index index.html;
        }
    }
}

Schnittstellenanzeige

http://localhost:8000

Zertifizierung

Spieler

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: So erstellen Sie eine Testdatenbank mit zig Millionen Testdaten in MySQL

>>: Analyse des Unterschieds zwischen Emits und Attrs in Vue3