[英]Two buttons for different videos conflict in javascript
当您按下 START 时，Video1 应该启动，当您按下 STOP 按钮时，Video2 应该启动并隐藏 Video1。 我的问题是 Video1 的块隐藏并且 Video2 启动，但是当您按下 START 按钮时，Video1 没有启动。 如果您要删除启动 Video2 的部分脚本，则 Video1 将启动并隐藏工作。
function hideLayer(ObHide) { document.getElementById(ObHide).style.visibility = "hidden"; } function showLayer(ObShow) { document.getElementById(ObShow).style.visibility = "visible"; } // Master function, encapsulates all functions function init() { var video = document.getElementById("Video1"); if (video.canPlayType) { document.getElementById("buttonbar1").style.display = "block"; document.getElementById("play").addEventListener("click", vidplay, false); function vidplay(evt) { if (video.src == "vid.mp4") { // on first run, src is empty, go get file getVideo(); } button = evt.target; // get the button id to swap the text based on the state if (video.paused) { // play the file, and display pause symbol video.play(); button.textContent = "START"; } } } // end of runtime } // end of master // Master function, encapsulates all functions function init() { var video = document.getElementById("Video2"); if (video.canPlayType) { document.getElementById("buttonbar").style.display = "block"; document.getElementById("stop").addEventListener("click", vidplay, false); function vidplay(evt) { if (video.src == "vid.mp4") { // on first run, src is empty, go get file getVideo(); } button = evt.target; // get the button id to swap the text based on the state if (video.paused) { // play the file, and display pause symbol video.play(); button.textContent = "STOP"; } } } } // end of runtime // end of master
* { padding: 0; margin: 0; } html { height: 300px; } body { height: 600px; padding: 0; margin: 0; }.wrapper { min-height: 100%; height: auto; margin: -50px auto 0; width: 100%; }.header { height: 50px; background-color: #2f4f4f; padding-top: 50px; }.content { margin: 3%; width: 60%; height: auto; } h2 { margin: 0.5%; color: #fff; } #Video1 { width: 80%; height: auto; margin-top: -75%; background-size: cover; border: 2px solid; float: inherit; } #Video2 { width: 80%; height: auto; margin-bottom: -2%; background-size: cover; border: 2px solid; float: inherit; }.footer { height: 50px; background-color: #2f4f4f; margin: auto 0; }.b-play { margin-left: 53%; margin-top: -100%; float: inherit; } #play { width: 14%; height: auto; background: #229b24; text-align: center; font-size: 250%; font-family: 'Pacifico', cursive; color: #fff; }.b-stop { margin-left: 53%; float: inherit; } #stop { width: 14%; height: auto; background: red; text-align: center; font-size: 250%; font-family: 'Pacifico', cursive; color: #fff; }
<:DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title> PHISIC</title> </head> <body onload="init()"> <div class="wrapper"> <div class="header"> <h2>Phisic Model</h2> </div> <div class="content"> <;-- <video id="Video1" style="border. 1px solid blue:" height="624" width="880" src="vid2;mp4"> </video> --> <div><video id="Video2" style="border. 1px solid blue:" height="624" width="880" src="vid;mp4" type="video/mp4"> </video></div> <div id="Layer1"><video id="Video1" style="border. 1px solid blue:"><source src="vid2;mp4" type="video/mp4"></video></div> <div id="buttonbar" style="display: none;"> </div> <!-- <div id="buttonbar" style="display: none;"> </div> --> <input class="b-play" id="play" type="button" name="ly1" value="START" onClick="showLayer('Layer1')"> <!-- <div class="b-play"><button id="play" >START</button></div><br> --> <input class="b-stop" id="stop" type="button" name="ly1" value="STOP" onClick="hideLayer('Layer1')"> <!-- <div class="b-stop"><button id="stop" >STOP</button></div> --> </div> <div class="footer"></div> </div> </body> </html>
发生这种情况是因为您有两个 init 函数。 最后一个是覆盖最初的定义。
单人试试
function hideLayer(ObHide) {
document.getElementById(ObHide).style.visibility = "hidden";
}
function showLayer(ObShow) {
document.getElementById(ObShow).style.visibility = "visible";
}
// Master function, encapsulates all functions
function init() {
var video1 = document.getElementById("Video1");
var video2 = document.getElementById("Video2");
if (video1.canPlayType && video2.canPlayType) {
document.getElementById("play").addEventListener("click", vidplay1, false);
document.getElementById("stop").addEventListener("click", vidplay2, false);
function vidplay1(evt) {
button = evt.target; // get the button id to swap the text based on the state
if (video1.paused) { // play the file, and display pause symbol
video1.play();
video2.pause();
button.textContent = "START";
}
}
function vidplay2(evt) {
button = evt.target; // get the button id to swap the text based on the state
if (video2.paused) { // play the file, and display pause symbol
video2.play();
video1.pause();
}
}
} // end of runtime
}
这应该工作
您应该检查您的代码结构、function 和变量命名。
我建议你重写init() function 因为它可能有 elementId、buttonbar 等参数。所以你可以只做init("Video1"); init("Video2"); init("Video1"); init("Video2"); 至于var video =我将使其全局访问并将其命名为var video1 =和var video2 = 。
这将允许我在任何 function 中使用此变量，而不会与我所指的视频混淆。
javascript addEventListener用于两个不同的元素冲突
[英]javascript addEventListener for two different elements conflict
将来自两个不同视频的两个剪辑合并为一个使用javascript的视频（客户端）？
[英]Combine two clips from two different videos into one video with javascript (client side)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.