用于不同视频的两个按钮在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 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;

}

Answer 1

发生这种情况是因为您有两个初始化函数。最后一个是覆盖最初的定义。尝试单个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 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 =这将允许我在任何函数中使用此变量，而不会与我确切引用的视频混淆。