Как я могу преобразовать в JavaScript этот HTML-код? - PullRequest
Новая
       4

Как я могу преобразовать в JavaScript этот HTML-код?

0 голосов
/ 22 августа 2011

У меня есть три разных видео, и я хочу играть одновременно. 

    <div class="videoWrapper">
                <video id="b" preload>

            <source src="http://www.dendrosite.com/interactiu/paranoik.mp4" />
            <source src="http://www.dendrosite.com/interactiu/paranoik.webm" />


            </video>
    </div>

    <div class="videoWrapper">
        <video id="c" preload>


            <source src="http://www.dendrosite.com/interactiu/paranoik.mp4" />
            <source src="http://www.dendrosite.com/interactiu/paranoik.webm" />



        </video>
    </div>

Чтобы сделать это возможным, я создаю кнопку, которая вызывает видео, идет правильно, но я думаю, что более правильно сделать это с Javascript. 

    <button onclick="document.getElementById('a').pause(); document.getElementById('b').pause(); document.getElementById('c').pause()" ><span><img src="../imatges/pause.png"></span>
Pause</button>

        <button onclick="document.getElementById('a').play(); document.getElementById('b').play(); document.getElementById('c').play()"><img src="../imatges/play.png">
Play</button>

    <button onclick="document.getElementById('a').currentTime = 0; document.getElementById('b').currentTime = 0; document.getElementById('c').currentTime = 0"><img src="../imatges/back.png">Back to Beginning</button>

       <button onclick="document.getElementById('a').currentTime += 5; document.getElementById('b').currentTime += 5; document.getElementById('c').currentTime += 5"><img src="../imatges/skip.png">
Skip 5 Seconds</button>

Веб-сайт: http://www.dendrosite.com/interactiu/interactiu.html

Спасибо!

1 Ответ

1 голос
/ 22 августа 2011

Дайте каждой кнопке идентификатор, а затем в файле .js назначьте каждому обработчику onclick, который содержит тот же код.

Новый HTML: 

<button id="pauseButton"><span><img src="../imatges/pause.png"></span>Pause</button>

<button id="playButton"><img src="../imatges/play.png">Play</button>

<button id="restartButton"><img src="../imatges/back.png">Back to Beginning</button>

<button id="skipButton"><img src="../imatges/skip.png">Skip 5 Seconds</button>

Javascript: 

document.getElementById("pauseButton").onclick = function () {
    document.getElementById('a').pause();
    document.getElementById('b').pause();
    document.getElementById('c').pause();
};

document.getElementById("playButton").onclick = function () {
    document.getElementById('a').play();
    document.getElementById('b').play();
    document.getElementById('c').play();
};

document.getElementById("restartButton").onclick = function () {
    document.getElementById('a').currentTime = 0;
    document.getElementById('b').currentTime = 0;
    document.getElementById('c').currentTime = 0;
};

document.getElementById("skipButton").onclick = function () {
    document.getElementById('a').currentTime += 5;
    document.getElementById('b').currentTime += 5;
    document.getElementById('c').currentTime += 5;
};
...