时间戳

首页 > 解决方案 > javascript中不同视频的两个按钮冲突

javascript - 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>

标签： javascripthtml

解决方案

发生这种情况是因为您有两个 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
}

这应该工作

推荐阅读