[英]How I can convert this HTML code to JavaScript?
我想同時播放三個不同的視頻。
<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>
為了使這成為可能,我創建了一個調用視頻的按鈕,可以正確運行,但我認為使用 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>
給每個按鈕一個 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;
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.