用于不同视频的两个按钮在javascript中发生冲突

Question

当您按“开始”时，Video1 应启动，而当您按下“停止”按钮时，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 functionsfunction 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;}

Answer 1

发生这种情况是因为您有两个初始化函数。最后一个是覆盖最初的定义。

尝试单个

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

}

这应该有效

Answer 2

您应该检查代码结构，函数和变量命名。

我建议你重写函数，因为它可以有元素Id，按钮栏等的参数。所以你可以做，就像我会让它全局访问并命名它和.init()init("Video1"); init("Video2");var video =var video1 =var video2 =

这将允许我在任何函数中使用此变量，而不会与我确切引用的视频混淆。