Question

I have three different videos that I want to play at the same time.

<div class="videoWrapper">
    <video id="a" 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="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>

To make this possible I create a button which calls the videos, goes correctly, but I think is more correctly do this with 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>

The website is: http://www.dendrosite.com/interactiu/interactiu.html

Answer 1

Give each button an id, then in a .js file, assign each an onclick handler that contains the same code.

New 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;
};