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

MichaGue

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

<!----------------------------------------------------->
<!— 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>

Alles anzeigen

HTML

<!------------------------------------------------------------>
<!— 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>

Alles anzeigen

Sailor

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???

MichaGue

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

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

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

Sailor

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.

MichaGue

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

<!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>

Alles anzeigen

duccanh

Zitat von MichaGue

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

<!----------------------------------------------------->
<!— 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>

Alles anzeigen

HTML

<!------------------------------------------------------------>
<!— 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>

Alles anzeigen

thanks you

Tags

Benutzer online in diesem Thema