Actualmente, tengo una configuración de HTML como esta:
<video autoplay="on" id="videoNohighlight" muted src="https://stackoverflow.com/questions/62005785/<?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>
y Javascript como este
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";
}
}
Enlace JSFiddle: https://jsfiddle.net/7x82vsah/1/
Si alguien hace clic en todos los botones, los botones actúan como conmutadores en lugar de mostrar un video, luego, cuando se hace clic en el siguiente botón, ocultan el video anterior y muestran el nuevo en su lugar. ¿Qué hay que cambiar para habilitar esto?
Gracias
.