Question

我有一个网站上有视频。它还有三个div。

<div id="top"></div>
<div id="middle> contains table </div>
<div id="bottom></div>

现在，我想做的是将视频放在“顶级”div中，并播放。一旦完成，我希望它转到“底部”div并播放。一旦完成，我希望它回到“顶部”div并播放，依此类推。

我该怎么做呢？因为我似乎无法让它发挥作用。目前我有这个，这不起作用：

<script>
        document.getElementById("myVideo").addEventListener("play", function(){
        var vidTop = document.getElementById('top').appendChild(document.getElementById('myVideo'));
        });

        document.getElementById("myVideo").addEventListener("ended", function(){
        var vidBottom = document.getElementById('bottom').appendChild(document.getElementById('myVideo'));
        var vidLoop = document.getElementById("myVideo");
        function playVid(){
        vidLoop.play();
        }
        });
    </script>

提前致谢！

所以我到目前为止所有这一切都是按照要求提供的：

<!DOCTYPE html>

<div id="top">
    <p>top</p>
</div>

<div id="middle">
    <table style="width:1000px;">
        <tr>
            <td align="center" width="33%"><iframe src="https//slashdot.org" style="width:500px;height:400px;"></iframe></td>
            <td align="center" width="33%"><iframe src="http//slashdot.org" style="width:500px;height:400px;"></iframe></td>
            <td algin="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
        </tr>
        <tr>
            <td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
            <td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
            <td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
        </tr>
    </table>
</div>

<div id="bottom">
    <p>bottom</p>
</div>

<div id="video">
    <video id="myVideo" controls autoplay width="300" height="200">
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</div>

<div id="javascriptSource">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="js/scripts.js"></script>
</div>

<div id="script">
    <script>
        document.getElementById("myVideo").addEventListener("play", function(){
        var vidTop = document.getElementById('top').appendChild(document.getElementById('myVideo'));
        });

        document.getElementById("myVideo").addEventListener("ended", function(){
        var vidBottom = document.getElementById('bottom').appendChild(document.getElementById('myVideo'));
        var vidLoop = document.getElementById("myVideo");
        function playVid(){
        vidLoop.play();
        }
        });
    </script>
</div>

我是JavaScript新手。我尝试使用w3schools的信息，但我显然在某处犯了一些基本的错误。

Answer 1

$(document).ready(function() {

  var computeTime = 0;
  var bottomComputeTime = 0;
  var LoopComputeLimit = 50;
  
  var divVideo = $("<div/>")
    .attr({
      class: "divVideo"
    }).html("<video id=\"myVideo\" controls autoplay width=\"300\" height=\"200\"><source src=\"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\" type=\"video/mp4\"></video>");

  resetPositionToTop();

  $("#myVideo").unbind("ended").bind("ended", function(e) {
    console.log("bottomComputeTime:", bottomComputeTime,"computeTime:",computeTime);

    if (computeTime === 0) {
      resetPositionToBottom();
    }

    if (bottomComputeTime < LoopComputeLimit) {
      bottomComputeTime++;
      $("#myVideo").get(0).play();
    } else if (bottomComputeTime === LoopComputeLimit) {
      bottomComputeTime = 0;
      computeTime = 0;
      resetPositionToTop();
      $("#myVideo").get(0).play();
    }
  });

  function resetPositionToTop() {
    divVideo.appendTo(".top");
  }

  function resetPositionToBottom() {
    divVideo.appendTo(".bottom");
  }

});

*{
  font-family:"arial";
  font-size:12px;
}
div{
  text-align:center;
  margin:5px 0px  ;
}
#divVideo{
  float:left;
}
.top{
  min-height:200px;
  border:1px solid #cccccc;
}
.middle{
  border:1px solid #cccccc;
}
.middle table {
  width:100%;
}
.bottom{
  min-height:200px;
  border:1px solid #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
  <div class="top">
  </div>
  <div class="middle">
    <table>
      <tr>
        <td align="center" width="33%">
          Middle section
        </td>
      </tr>
    </table>
  </div>
  <div class="bottom">
  </div>
</body>

切换视频位置和播放循环

1 个答案: