replayBtn.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>&lt;google-youtube&gt; Demo</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel='import' href='http://webduino.io/components/webduino/web-arduino.html'></link>
    <link rel='import' href='http://webduino.io/components/webduino/wa-button.html'></link>
    <link rel="import" href="google-youtube.html">
    <style>
    body {
        font-family: sans-serif;
        background: rgba(104, 104, 104, 0.31);
    }
    div {
        margin-bottom: 1em;
    }
    </style>
</head>

<body unresolved>
    <h1>結合Webduino，按『 按鈕 』，再來一次!</h1>
    <h2>Webudino開發版可直接使用Web技術控制Arduino傳感器，</h2>
    <h2>這例子展示了按按鈕就可以播放、重撥Youtube影片</h2>

    <web-arduino id='board' device='rb5e'>
        <wa-button id='btn' pin='10'></wa-button>
    </web-arduino>

    <google-youtube id="googleYouTube" videoid="p0SAvIdM-wA">
    </google-youtube>

    <script>
    var play = false;
    window.addEventListener('WebComponentsReady', function() {
        var board = document.getElementById('board');
        board.on('ready', function() {
            var btn = document.getElementById('btn');
            btn.on('pressed', function() {
                if (!play) {
                    googleYouTube.seekTo(14);
                    googleYouTube.play();
                    play = true;
                } else {
                    googleYouTube.seekTo(14);
                }
            }, false);
        });
    });
    </script>
</body>

</html>