Beiträge von duccanh

duccanh

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