Creare un player video e audio in Javascript con Plyr

Mattepuffo's logo
Creare un player video e audio in Javascript con Plyr

Creare un player video e audio in Javascript con Plyr

Programmazione, Javascript - AJAX

Plyr è un'ottima e leggera libreria per Javascript per la creazione di un player audio / video.

Non ha dipendenze, in quanto è scritto in vanilla Javascript.

Ed è possibile visualizzare / ascoltare file presenti sul server, o usare Youtube e Vimeo.

Qui potete vederne una demo.

Qua sotto vi posto un pò di esempi.

VIDEO

<!DOCTYPE html>
<html>
    <head>
        <title>Plyr</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
    </head>
    <body>
        <video poster="poster.jpg" controls>
            <source src="video.mp4" type="video/mp4">
            <source src="video.webm" type="video/webm">
        </video>
        <script src="https://cdn.plyr.io/2.0.12/plyr.js"></script>
        <script>plyr.setup();</script>
    </body>
</html>

AUDIO

<!DOCTYPE html>
<html>
    <head>
        <title>Plyr</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
    </head>
    <body>
        <audio controls>
            <source src="audio.mp3" type="audio/mp3">
            <source src="audio.ogg" type="audio/ogg">
        </audio>
        <script src="https://cdn.plyr.io/2.0.12/plyr.js"></script>
        <script>plyr.setup();</script>
    </body>
</html>

YOUTUBE

<!DOCTYPE html>
<html>
    <head>
        <title>Plyr</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
    </head>
    <body>
        <div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>
        <script src="https://cdn.plyr.io/2.0.12/plyr.js"></script>
        <script>plyr.setup();</script>
    </body>
</html>

VIMEO

<!DOCTYPE html>
<html>
    <head>
        <title>Plyr</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.plyr.io/2.0.12/plyr.css">
    </head>
    <body>
        <div data-type="vimeo" data-video-id="143418951"></div>
        <script src="https://cdn.plyr.io/2.0.12/plyr.js"></script>
        <script>plyr.setup();</script>
    </body>
</html>

Per gli due esempi, dovete solo inserire l'ID del video che vi serve; e lo trovate sul sito direttamente.

Enjoy!

Condividi

Commentami!