Solution 1 :

That is happening because you have two init functions. And the last one is overriding the initial definition.

Try single one

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
}

This should work

Solution 2 :

You should check your code structure, function and variable naming.

I would recommend you to rewrite init() function for it could have parameters for elementId, buttonbar etc.
So you could do just init("Video1"); init("Video2");
As for var video = I would make it globally accessed and named it var video1 = and var video2 =.

That would allow me to use this variables in any function having no mess with what video I refer to exactly.

Problem :

When you press START, Video1 should start, and when you press the STOP button, Video2 should start and hide Video1. My problem is that the block with Video1 hides and Video2 starts, but when you press the START button, Video1 does not start. If you were to remove part of the script that launches Video2, then Video1 starts and hiding works.

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>

Comments

Comment posted by Jeremy Thille

Because you declare

By

Leave a Reply

Your email address will not be published. Required fields are marked *