Beiträge von MichaGue

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

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

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

Beiträge von MichaGue

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

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

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