ginpei/html5-youtube.js

View on GitHub
examples/player.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5-youtube.js</title>
        <style>
            .player {
                height: 300px;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <h1>html5-youtube.js</h1>
        <div class="player js-player"></div>
        <div>
            <button class="js-play" disabled>Play</button>
            <button class="js-pause" disabled>Pause</button>
        </div>
        <script src="../out/web/html5-youtube.js"></script>
        <script>
(function() {
    var elPlayer = document.querySelector('.js-player');
    var elPlay = document.querySelector('.js-play');
    var elPause = document.querySelector('.js-pause');
    var videoId = 'KFstP0C9sVk';

  var player = new Html5YouTube(elPlayer, { videoId })
        .on('ready', function(event) {
            player.play();
        })
        .on('play', function(event) {
            elPlay.disabled = true;
            elPause.disabled = false;
        })
        .on('pause', function(event) {
            elPlay.disabled = false;
            elPause.disabled = true;
        })
        .on('ended', function(event) {
            player.play();
        });

    elPlay.addEventListener('click', function(event) {
        player.play();
    });
    elPause.addEventListener('click', function(event) {
        player.pause();
    });
})();
        </script>
    </body>
</html>