Две кнопки для разных видео конфликтуют в javascript - PullRequest
Новая
       0

Две кнопки для разных видео конфликтуют в javascript

0 голосов
/ 26 мая 2020

Когда вы нажимаете 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>

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Это происходит потому, что у вас есть две функции инициализации. И последнее отменяет исходное определение.

Попробуйте одно 

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
}

Это должно работать

0 голосов
/ 26 мая 2020

Вы должны проверить структуру своего кода, функцию и имя переменной.

Я бы рекомендовал вам переписать функцию init(), поскольку она может иметь параметры для elementId, buttonbar и c. Таким образом, вы можете сделать просто init("Video1"); init("Video2");. Что касается var video =, я бы сделал его глобально доступным и назвал его var video1 = и var video2 =.

Это позволило бы мне использовать эти переменные в любой функции, не беспокоясь о том, какое именно видео я имею в виду.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...