Estoy realizando una página con wordpress en el cual tengo secciones donde hay varios videos en el que el usuario puede elegir x numero de videos para mostrar. Lo que me piden es que se muestre un thumbnail del video elegido en dicha sección y al dar click sobre el ícono de 'play', el video se abra en un modal. La vista en la página es como esta:
En el boton play(ícono) obtengo la url del video local establecido en data-srcLocalVideo
que al dar click en play obtengo ese valor para luego establecerlo al modal en la etiqueta video.
1. El problema es que cuando doy click por ejemplo en video1 abre el modal y reproduce el video normal, luego lo cierro y abro el video2, sigue reproduciendo el video anterior. Lo mismo sucede si primero reproduzco el video2 y luego el video1. Lo que pensé es que no estaba pasando la url del video correcto cuando se reproduce el segundo video, pero al inspeccionar si lo tiene bien.
Este es el codigo html para obtener todos los videos elegidos por el usuario:
<?php foreach($video_content as $single_video): ?>
<div class="col-md-6 col-lg-4">
<div class="prev-video">
<?php if($single_video['select_video_from'] == 'local-video'): ?>
<div>
<img class="thumbnailLocalVideo" src="" alt="">
//establezco la url del video en data-srcLocalVideo
<div class="play-video-icon btn-play-local-video" data-srcLocalVideo="<?php echo $single_video['local_video']['url'];?>"><i class="fas fa-play"></i></div>
//esto es para el thumbnail del video:
<video class="videoId">
<source src="<?php echo $single_video['local_video']['url'];?>" type="video/mp4">
</video>
<canvas class="canvasId"></canvas>
</div>
<?php endif; ?>
</div><!--prev-video-->
</div><!--col-->
<?php endforeach; ?>
Esta es la estructura del modal para los videos:
<div id="localVideoModal" class="video-modal local-video-modal">
<div class="video-container">
<div class="btn-close-video-modal"></div>
<div class="embed-responsive embed-responsive-16by9">
<video id="localVideo" controls autoplay loop class="local-video" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
</video>
</div>
</div>
</div>
Este es el codigo jQuery:
$(document).on('click', '.btn-play-local-video, .play-local-video-icon', function(e) {
e.preventDefault();
var videoId = $(this).attr('data-srcLocalVideo'); //obtiene url del video en el boton 'Play video'
//establece en <video> la etiqueta <soruce> con la url del video.
$('video').html("<source class='attr-video-modal' src='" + videoId +"' type='video/mp4'>");
$(".local-video-modal").fadeIn(); //abre modal
$('#localVideo')[0].play(); // reproduce el video
});
//cerrar el modal
$(".btn-close-video-modal, .video-modal").click(function () {
$(".video-modal").fadeOut(); // oculta modal
$('#localVideo')[0].pause(); // detiene el video
//elimina la url del video en la etiqueta <source>
$('#localVideoModal video .attr-video-modal').attr('src', null);
//elimina la etiqueta <source> en <video>
$('#localVideoModal video').html('');
});