Question

我有三个不同的视频，我想同时玩。

    <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

谢谢！

Answer 1

为每个按钮指定一个id，然后在.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;
};

我如何将这个HTML代码转换为JavaScript？

1 个答案: