Question

我有一个非常简单的页面，我们用它来存档以前的视频。我使用了Foundation 5并将其设置为一系列独特的玩家。每个人都可以正常播放 - 但由于我没有其他控制功能而不是每个视频，所以有人可以启动所有视频并同时播放。当有人点击另一个时，显然更愿意停一下。我认为这可以通过一些javascript来实现，这些javascript会“倾听”某人点击另一个视频，然后停止前一个视频 - 但我不知道从哪里开始。这是我到目前为止（仅以两个视频为例）。

 <div class="row">
    <div class="large-12 small-12 columns">        
        <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-2">
          <li>
             <p><strong>DATE - TITLE</strong></p>
             <div class="video-player">
                <div class="video-tree">
                  <video id="myVideo8" poster="myFirstSplashImage.png" controls>
                  <source src="myFirstVideo.mp4" type="video/mp4"> 
                  </video>
                </div> <!-- end video-tree -->
            </div><!-- end video-player -->
        </li>
        <li>
         <p><strong>DATE - TITLE</strong></p>
           <div class="video-player">
            <div class="video-tree">
                <video id="myVideo8" poster="mySecondSplashImage.png" controls>
                  <source src="myFirstVideo.mp4" type="video/mp4"> 
                 </video>
            </div> <!-- end video-tree -->
          </div><!-- end video-player -->
         </li>
      </ul>
    </div> <!-- end columns -->
 </div> <!-- end row -->

在页面结束时，我已经开始使用这个javascript但我不确定要听什么，我想我需要创建一些数组来首先加载所有的视频ID。

<script>
    var vid=document.getElementById('??');

然后我想我需要听一个事件并调用我的函数 vid.addEventListener（“clicked？”，resetVideo，true）;

    function resetVideo() {
    // stop the playing video and start the new one? Or do I just need to stop the prior one as the "clicked" should already be starting the new one?
    this.load()
    }   
</script>

如果有人能给我一个提示，并指出我正确的方向将是伟大的。我不希望有人为我编码 - 我真的想要理解和学习并做到这一点。谢谢！

当点击另一个视频时，是否可以在页面上停止一个视频？

0 个答案: