Скрыть / показать элемент видео на основе нажатия кнопки с javascript

Question

В настоящее время у меня есть HTML такие настройки:

<video  autoplay="on" id="videoNohighlight" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/02/videonohighlight.mp4"></video>
<video  autoplay="on" id="video_Q1" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q1.mp4"></video>
<video  autoplay="on" id="video_Q2" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q2.mp4"></video>
<video  autoplay="on" id="video_Q3" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q3.mp4"></video>
<video  autoplay="on" id="video_Q4" style="display:none;" muted src="<?php echo get_site_url(); ?>/wp-content/uploads/2020/03/Q4.mp4"></video>

<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q1">Q1</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q2">Q2</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q3">Q3</a>
<a href="#case_scroll_to" onClick="reply_click(this.id)" class="qtr_selector btn btn-light" id="_Q4">Q4</a>

и Javascript вот так

function reply_click(clicked_id){
    var video = document.getElementById("video" + clicked_id);
    var videoNohighlight = document.getElementById("videoNohighlight");

    if (video.style.display === "none") {
        video.style.display = "block";
        videoNohighlight.style.display = "none";
    } else {
        video.style.display = "none !important"; 
    }               
}   

Ссылка JSFiddle: https://jsfiddle.net/7x82vsah/1/

Если кто-то нажимает на все кнопки, кнопки действуют как переключатели, а не показывают одно видео, а затем, когда нажимается следующая кнопка, скрывают предыдущее видео и показывают новое на его месте. Что нужно изменить, чтобы это стало возможным?

Спасибо

Answer 1

В настоящее время, когда нажата кнопка, вы просто показываете или скрываете это конкретное c видео, но что необходимо сделать одновременно, так это скрыть все другие видео при нажатии определенной c кнопки видео. что вы можете сделать, так это добавить класс ко всем элементам видео и l oop через них при каждом нажатии кнопки.

function reply_click(clicked_id){
  var videos = document.getElementsByClassName("video-tabs") // video-tabs is the class you give to all your video elements
  var videoNohighlight = document.getElementById("videoNohighlight");  
  for (var i=0; i<= videos.length -1; i++){
    if (videos[i].id == "video_"+clicked_id) {
      var isVisible = videos[i].style.display
      videos[i].style.display = isVisible === "none" ? "block" : "none";
      videoNohighlight.style.display = isVisible === "none" ? "block" : "none";
    } else {
      videos[i].style.display = "none";
    }
  }

}

Answer 2

Вам нужно только изменить вашу функцию:

function reply_click(clicked_id){
  var videos = document.getElementsByTagName('video');

  for (var ctr = 0; ctr < videos.length; ctr++) {
    videos[ctr].style.display= 'none';      
  }

  var video = document.getElementById("video" + clicked_id);  
  video.style.display= 'block';
}