Question

我的问题是，当我通过点击第一个按钮显示<video>并点击另一个按钮而不切换第一个按钮时，两个视频一起显示，我是如何解决的？

当我点击另一个按钮时，我希望自动关闭和隐藏第一个按钮。

JavaScript代码：

<script> 
  function display(id) {
    var vid = document.getElementById(id);
    if (vid.style.display == 'block') {
      vid.style.display = 'none';
      vid.pause();
    } else {
      vid.style.display = 'block';
    }
  }
</script>

HTML code：

<section class="vid">
  <h3>Double click on the buttons to display the videos:</h3>
  <div><a onclick="display('ch1');"><span>Video tutorual Ch1</span></a></div>
  <div><a onclick="display('ch2');"><span>Video tutorial Ch2</span></a></div>
  <div><a onclick="display('ch3');"><span>Video tutorial Ch3</span></a></div>
  <div><a onclick="display('ch4');"><span>Video tutorial Ch4</span></a></div>
  <div><a onclick="display('ch5');"><span>Video tutorial Ch5</span></a></div>
  <div><a onclick="display('ch6');"><span>Video tutorial Ch6</span></a></div>
</section>
<video controls="" height="600px" id="ch1" src="V.mp4" width="940px"></video> 
<video controls="" height="600px" id="ch2" src="V.mp4" width="940px"></video> 
<video controls="" height="600px" id="ch3" src="V.mp4" width="940px"></video> 
<video controls="" height="600px" id="ch4" src="V.mp4" width="940px"></video> 
<video controls="" height="600px" id="ch5" src="V.mp4" width="940px"></video> 
<video controls="" height="600px" id="ch6" src="V.mp4" width="940px"></video>

Answer 1

在点击功能中，您需要先停止所有视频，然后显示并播放用户通过点击功能参数选择的一个视频。示例代码如下，可以帮助进一步提升。在页面加载时，您可以调用hideAndStopAll()方法停止并隐藏它们。

   function display(id) {
            hideAndStopAll()
            var vid = document.getElementById(id);
            vid.style.display = 'block';
            vid.play();
           
         }

         var ids= ['ch1','ch2','ch3','ch4','ch5','ch6']

         function hideAndStopAll(){

             for(i=0;i<ids.length;i++){
                 var video = document.getElementById(ids[i]);
                 video.pause();
                 video.style.display='none'
             }

         }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <div> <a onclick="display('ch1');"> <span>Video tutorual Ch1</span> </a> </div> 
    <div> <a onclick="display('ch2');"> <span>Video tutorial Ch2</span> </a> </div>
    <div> <a onclick="display('ch3');"> <span>Video tutorial Ch3</span> </a> </div>
    <div> <a onclick="display('ch4');"> <span>Video tutorial Ch4</span> </a> </div>
    <div> <a onclick="display('ch5');"> <span>Video tutorial Ch5</span> </a> </div>
    <div> <a onclick="display('ch6');"> <span>Video tutorial Ch6</span> </a> </div>


    <video id="ch1"   src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls  width="940px" height="600px"> </video>
<video id="ch2"   src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls  width="940px" height="600px"> </video>
<video id="ch3"   src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls  width="940px" height="600px"> </video>
<video id="ch4"   src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls  width="940px" height="600px"> </video>
<video id="ch5"   src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls  width="940px" height="600px"> </video>
<video id="ch6"   src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls  width="940px" height="600px"> </video>
    
</body>
</html>

当点击另一个“<video>”时，JavaScript关闭/隐藏视频

1 个答案: