TransWikia.com

Como reproducir videos locales en diferentes ventanas modal - jquery -js

Stack Overflow en español Asked by JoseFranc on October 14, 2020

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:

introducir la descripción de la imagen aquí

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('');
        });
javascriptjquerywordpress

One Answer

Quizás mi ejemplo no luzca tan bonito como tu proyecto (además de que no cuento con la mayoría de los estilos que utilizas), pero funciona:

$(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
    $("#localVideoModal2 video").attr('src', videoId);
        $("#localVideoModal2").modal('show');
    //$('#localVideoModal2 video').get(0).play(); // reproduce el video
});

//cerrar el modal
$("#localVideoModal2 .btn").click(function() {

    $("#localVideoModal2 video").get(0).pause(); // detiene el video
  //elimina la url del video en la etiqueta <source>
  $("#localVideoModal2 video").attr('src', '');
  //elimina la etiqueta <source> en <video>
  //$('#localVideoModal2 video').html('');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-6 col-lg-4">
  <div class="prev-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="https://www.w3schools.com/html/mov_bbb.mp4"><i class="fas fa-play"></i></div>
      <!--esto es para el thumbnail del video:-->
      <video class="videoId">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
      <canvas class="canvasId"></canvas>
    </div>
    <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="https://www.w3schools.com/html/movie.mp4"><i class="fas fa-play"></i></div>
      <!--esto es para el thumbnail del video:-->
      <video class="videoId">
        <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
      </video>
      <canvas class="canvasId"></canvas>
    </div>
  </div><!--prev-video-->
</div><!--col-->

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

<div id="localVideoModal2" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!--<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>-->
      <div class="modal-body">
        <video id="localVideo" controls autoplay loop class="local-video" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
        </video>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Nota: Para reproducir los videos, dale click al icono de play

Ah, por cierto, como no se PHP, tuve que agregar los 2 videos en el HTML.

Answered by Sagnalrac on October 14, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP