Ergebnis 1 bis 6 von 6

Thema: HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

  1. #1
    HTML Newbie
    Registriert seit
    15.06.2018
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

    Hallo zusammen,

    ich möchte bei mir den HTML-5 Video Player plyr nutzen. Ich versuche mich gerade an der Implementierung der aktuellen Version 3.3.12. Bei der Nutzung einer einzelnen Videoinstanz funktioniert das auch wie gewünscht. Sollen auf einer HTML-Seite mehrere Video Instanzen mit plyr genutzt werden, schaffe ich es aktuell nicht. Meine JavaScript Kenntnisse befinden sich noch in den Kinderschuhen. Die Dokumentation schlägt eine Lösung dafür vor, die bei mir allerdings nicht funktioniert, bzw. die ich nicht verstehe. Hat jemand einen Tipp für mich, wie ich mit der aktuellen Version mehrere Videoinstanzen auf einer Seite nutzen kann?

    Vielen Dank für Eure Unterstützung.

    Gruß Michael

    HTML-Code:
    <!----------------------------------------------------->
    <!— Funktionierendes Beispiel mit einer Videoinstanz -->
    <!----------------------------------------------------->
     
     
    <!doctype html>
    <html>
    <head>
         <meta charset="utf-8">
         <title>Test Plyr</title>
         <link rel="stylesheet" href="css/plyr.css">
         <script src="js/plyr.polyfilled.js"></script>
         <style>
         .container {
               margin: 50px auto;
               max-width: 500px;
         }
         </style>
    </head>
     
    <body>
         <div class="container">
               <video controls playsinline poster="poster.jpg" id="player">
                    <source src="A.mp4" type="video/mp4" size="360">
                    <source src="B.mp4" type="video/mp4" size="720">
                    <source src="C.mp4" type="video/mp4" size="1080">
               </video>
         </div>
             
         <script>const player = new Plyr('#player');</script>
    </body>
    </html>

    HTML-Code:
    <!------------------------------------------------------------>
    <!— NICHT funktionierendes Beispiel mit zwei Videoinstanzen -->
    <!------------------------------------------------------------>
     
     
    <!doctype html>
    <html>
    <head>
         <meta charset="utf-8">
         <title>Test Plyr</title>
         <link rel="stylesheet" href="css/plyr.css">
         <script src="js/plyr.polyfilled.js"></script>
         <style>
         .container {
               margin: 50px auto;
               max-width: 500px;
         }
         </style>
    </head>
     
    <body>
         <div class="container">
               <video controls playsinline poster="poster.jpg" id="player">
                    <source src="A.mp4" type="video/mp4" size="360">
                    <source src="B.mp4" type="video/mp4" size="720">
                    <source src="C.mp4" type="video/mp4" size="1080">
               </video>
         </div>
     
         <div class="container">
               <video controls playsinline poster="poster.jpg" id="player">
                    <source src="A.mp4" type="video/mp4" size="360">
                    <source src="B.mp4" type="video/mp4" size="720">
                    <source src="C.mp4" type="video/mp4" size="1080">
               </video>
         </div>
             
         <script>const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));</script>
    </body>
    </html>

  2. #2
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    253
    Danke
    0
    Bekam 54 mal "Danke" in 54 Postings

    Standard AW: HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

    Ich kenne diesen Player nicht, aber mir fallen beim Überfliegen deines Post 2 Dinge auf!
    1. du nutzt die id="player" in beiden Video Tags - das ist unzulässig, ID's müssen einmalig sein und dürfen nicht mehrfach verwendet werden.
    2. Du nutzt 'document.querySelectorAll('.js-player')' ... aber den verwendeten Selector '.js-player' finde ich in deinem Code nicht???
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    15.06.2018
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

    Hallo Salibor,

    danke für die Rückmeldung. D.h. anstatt der id="player" müsste eine im Array definierte id eingesetzt werden. Sehe ich das richtig?

    Die Doku sagt folgendes:
    Setting up multiple players

    You have two choices here. You can either use a simple array loop to map the constructor:
    HTML-Code:
    const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
    ...or use a static method where you can pass a string selector, a NodeList or an Array of elements:
    HTML-Code:
    const players = Plyr.setup('.js-player');
    Both options will also return an array of instances in the order of they were in the DOM for the string selector or the source NodeList or Array.

    Wie lautet denn die id, die mit der Arrayschleife erzeugt wird?

    Vielen Dank für die Hilfe.

    Gruß Michael

  4. #4
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    253
    Danke
    0
    Bekam 54 mal "Danke" in 54 Postings

    Standard AW: HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

    Ich denke, du solltest jedem Player eine eigene ID geben... zB id="player1" und id="player2".
    Und dann versuchst du ein Array zu erzeugen, mit Elementen, die du im Code nicht definiert hast...
    document.querySelectorAll('.js-player') sucht nach Elementen mit der Klasse class="js-player" ... und du musst, damit die Videoelemente in das Array Übernommen werden, den Elementen auch diese Klasse zuweisen.
    ... <video class="js-player" controls playsinline poster="poster.jpg" id="player1">
    Aber wie gesagt.. ich stocher da ein bisschen in Dunkeln, denn dieser JS Player ist mir gänzlich unbekannt und ich kann nur auf Dinge hinweisen, die mir im Code auffallen.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    15.06.2018
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

    Hi Sailor,

    vielen Dank für Deine Hinweise - es funktioniert. Super!

    Für alle anderen die daran interesse haben anbei der Code, mit dem der Player mehrfache Videoinstanzen verabreiten kann.

    Mit dem zusätzlich eingebundenen jquery Code wird ein vorhergehendes Video automatisch gestoppt, wenn man ein neues anklickt.

    Nochmals vielen Dank für Deine Hilfe!

    Gruß Michael

    HTML-Code:
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Test Plyr</title>
        <link rel="stylesheet" href="css/plyr.css">
        <script src="js/plyr.polyfilled.js"></script>
        <script src="js/jquery-3.2.1.js"></script>
        <style>
        .container {
            margin: 50px auto;
            max-width: 500px;
        }
        </style>
    </head>
    
    <body>
        <div class="container">
            <video class="js-player" controls playsinline poster="poster.jpg" id="player1">
                <source src="PL1_360.mp4" type="video/mp4" size="360">
                <source src="PL2_720.mp4" type="video/mp4" size="720">
                <source src="PL3_1080.mp4" type="video/mp4" size="1080">
            </video>
            
            <video class="js-player" controls playsinline poster="poster.jpg" id="player2">
                <source src="PL1_360.mp4" type="video/mp4" size="360">
                <source src="PL2_720.mp4" type="video/mp4" size="720">
                <source src="PL3_1080.mp4" type="video/mp4" size="1080">
            </video>
            
            <video class="js-player" controls playsinline poster="poster.jpg" id="player3">
                <source src="PL3_360.mp4" type="video/mp4" size="360">
                <source src="PL3_720.mp4" type="video/mp4" size="720">
                <source src="PL3_1080.mp4" type="video/mp4" size="1080">
            </video>
        </div>
        
        <script>const players = Plyr.setup('.js-player');</script>
            
        <script>
        $('video').bind('play', function() {
            activated = this;
            $('video').each(function() {
            if(this != activated) this.pause();
            });
        });
        </script>
    
    </body>
    </html>

  6. #6
    HTML Newbie
    Registriert seit
    26.06.2018
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: HTML-5 Video Player :: plyr :: mehrere Videoinstanzen?

    Zitat Zitat von MichaGue Beitrag anzeigen
    Hallo zusammen,

    ich möchte bei mir den HTML-5 Video Player plyr nutzen. Ich versuche mich gerade an der Implementierung der aktuellen Version 3.3.12. Bei der Nutzung einer einzelnen Videoinstanz funktioniert das auch wie gewünscht. Sollen auf einer HTML-Seite mehrere Video Instanzen mit plyr genutzt werden, schaffe ich es aktuell nicht. Meine JavaScript Kenntnisse befinden sich noch in den Kinderschuhen. Die Dokumentation schlägt eine Lösung dafür vor, die bei mir allerdings nicht funktioniert, bzw. die ich nicht verstehe. Hat jemand einen Tipp für mich, wie ich mit der aktuellen Version mehrere Videoinstanzen auf einer Seite nutzen kann?

    Vielen Dank für Eure Unterstützung.

    Gruß Michael

    HTML-Code:
    <!----------------------------------------------------->
    <!— Funktionierendes Beispiel mit einer Videoinstanz -->
    <!----------------------------------------------------->
     
     
    <!doctype html>
    <html>
    <head>
         <meta charset="utf-8">
         <title>Test Plyr</title>
         <link rel="stylesheet" href="css/plyr.css">
         <script src="js/plyr.polyfilled.js"></script>
         <style>
         .container {
               margin: 50px auto;
               max-width: 500px;
         }
         </style>
    </head>
     
    <body>
         <div class="container">
               <video controls playsinline poster="poster.jpg" id="player">
                    <source src="A.mp4" type="video/mp4" size="360">
                    <source src="B.mp4" type="video/mp4" size="720">
                    <source src="C.mp4" type="video/mp4" size="1080">
               </video>
         </div>
             
         <script>const player = new Plyr('#player');</script>
    </body>
    </html>

    HTML-Code:
    <!------------------------------------------------------------>
    <!— NICHT funktionierendes Beispiel mit zwei Videoinstanzen -->
    <!------------------------------------------------------------>
     
     
    <!doctype html>
    <html>
    <head>
         <meta charset="utf-8">
         <title>Test Plyr</title>
         <link rel="stylesheet" href="css/plyr.css">
         <script src="js/plyr.polyfilled.js"></script>
         <style>
         .container {
               margin: 50px auto;
               max-width: 500px;
         }
         </style>
    </head>
     
    <body>
         <div class="container">
               <video controls playsinline poster="poster.jpg" id="player">
                    <source src="A.mp4" type="video/mp4" size="360">
                    <source src="B.mp4" type="video/mp4" size="720">
                    <source src="C.mp4" type="video/mp4" size="1080">
               </video>
         </div>
     
         <div class="container">
               <video controls playsinline poster="poster.jpg" id="player">
                    <source src="A.mp4" type="video/mp4" size="360">
                    <source src="B.mp4" type="video/mp4" size="720">
                    <source src="C.mp4" type="video/mp4" size="1080">
               </video>
         </div>
             
         <script>const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));</script>
    </body>
    </html>
    thanks you
    trung tâm bán trà giảm cân - tuyển đại lý bán trà giảm cân golean deatox

Ähnliche Themen

  1. Embed Player für mehrere Datentypen
    Von No0ob im Forum Flash Forum
    Antworten: 4
    Letzter Beitrag: 30.07.2007, 17:16
  2. flash player freeware gesucht für jpg und video
    Von pflanze im Forum Flash Forum
    Antworten: 2
    Letzter Beitrag: 26.04.2007, 09:01
  3. mehrere Videos im gleichen Player
    Von tonitoni im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 01.07.2006, 12:23
  4. Video Dateien im Media Player
    Von 2Bad4You im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.11.2005, 13:03
  5. Video + Player + cutten
    Von Claudia im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 23.09.2005, 14:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •