JavaScript 在单击另一个""时关闭/隐藏视频<video>

我的问题是当我单击第一个按钮显示<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代码：

<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>

在单击功能中，您需要先停止所有视频，然后显示并播放用户通过点击函数参数选择的一个视频。示例代码在下面，可以进一步增强。您可以在加载页面时调用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>

相关内容

最新更新

热门标签：