Destroy Player

[OctavioXIII]

Hi,

I'm working on a laravel project integrating a VOD part, I'm trying to dynamically load content, using the Youtube video ID to create a new player, destroy the old one and dynamically load it in modals so that every time If you click on a thumbnail, load this content dynamically, but so far I have not been successful in doing this process. I saw someone try to do the same in angular, but in the documentation so far I only find references to dispose in version 1.0.

Example.

         <div class="row">
            <div class="col">    
              <!-- Reproductor principal -->
              <div class="row justify-content-center">
                <div class="col col-content">
                  <div class="row">&nbsp;</div>
                  <div class="embed-responsive embed-responsive-16by9">
                    <div id="player" class="embed-responsive-item">
                        <vm-player id="main-player" :key="videoKey">
                        <!-- Provider component is placed here. -->
                        <vm-youtube showFullscreenControl="false" poster="{{ asset('img/poster.png?v=5') }}" video-id="{{ Setting::get('videoPlayer.url', '') }}"></vm-youtube>    
                        <vm-ui>
                          <!-- UI components are placed here. -->
                          <vm-poster></vm-poster>
                          <vm-dbl-click-fullscreen></vm-dbl-click-fullscreen>
                          <vm-scrim gradient="up"></vm-scrim>
                          <vm-click-to-play></vm-click-to-play>
                          <vm-loading-screen>
                            <!-- Pass in content here such as a logo (optional). -->
                          </vm-loading-screen>
                          <vm-controls full-width>
                            <vm-control-group>
                              <vm-scrubber-control></vm-scrubber-control>
                            </vm-control-group>
                            <vm-control-group space="top">
                              <vm-playback-control></vm-playback-control>
                              <vm-volume-control></vm-volume-control>
                              <vm-control-spacer></vm-control-spacer>
                              <vm-fullscreen-control></vm-fullscreen-control>
                            </vm-control-group>
                          </vm-controls>
                          <vm-click-to-play></vm-click-to-play>
                        </vm-ui>
                      </vm-player>
                    </div>
                  </div>
                  <div class="row">&nbsp;</div>
                </div>
              </div>
                          
              <!-- Videos bajo demanda -->
              <div class="row">
                <div class="col-12">
                  <h2>Videos bajo demanda</h2>
                </div>
                <div class="col-12">
                  <div class="row">
                    <!-- Video 1 -->
                    <div class="col-md-4">
                      <a href="#" class="video-thumbnail" data-video-id="1Q2YXsF5vDk">
                        <img class="w-100" src="{{ asset('img/poster.png?v=5') }}" alt="Thumbnail del Video 1">
                      </a>
                    </div>
          
                    <!-- Video 2 -->
                    <div class="col-md-4">
                      <a href="#" class="video-thumbnail" data-video-id="b6G3tN9ESbE">
                        <img class="w-100" src="{{ asset('img/poster.png?v=5') }}" alt="Thumbnail del Video 2">
                      </a>
                    </div>
          
                    <!-- Video 3 -->
                    <div class="col-md-4">
                      <!-- Contenido del video 3 -->
                    </div>
          
                    <!-- Agrega más columnas de video según sea necesario -->
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Modal con reproductor -->
            <div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                    <div class="embed-responsive embed-responsive-16by9">
                        <div id="modalPlayer" class="embed-responsive-item">
                        <vm-player id="modal-player" :key="videoKey">
                            <vm-youtube id="modal-video" showFullscreenControl="false" poster="{{ asset('img/poster.png?v=5') }}"></vm-youtube>
                            <!-- Resto del código del reproductor -->
                            <vm-ui>
                                <!-- UI components are placed here. -->
                                <vm-poster></vm-poster>
                                <vm-dbl-click-fullscreen></vm-dbl-click-fullscreen>
                                <vm-scrim gradient="up"></vm-scrim>
                                <vm-click-to-play></vm-click-to-play>
                                <vm-loading-screen>
                                  <!-- Pass in content here such as a logo (optional). -->
                                </vm-loading-screen>
                                <vm-controls full-width>
                                  <vm-control-group>
                                    <vm-scrubber-control></vm-scrubber-control>
                                  </vm-control-group>
                                  <vm-control-group space="top">
                                    <vm-playback-control></vm-playback-control>
                                    <vm-volume-control></vm-volume-control>
                                    <vm-control-spacer></vm-control-spacer>
                                    <vm-fullscreen-control></vm-fullscreen-control>
                                  </vm-control-group>
                                </vm-controls>
                                <vm-click-to-play></vm-click-to-play>
                              </vm-ui>
                        </vm-player>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>

and this is an example of the JS that I am using

$('.video-thumbnail').on('click', function(e) {
            e.preventDefault();  

            var videoId = $(this).data('video-id');  

            $('#modal-video').attr('video-id', videoId);  

            $('#videoModal').modal('show'); 
        });

        $('#videoModal').on('hidden.bs.modal', function (e) {
            // Destruye el reproductor
            var player = document.getElementById('modal-player');
            player.dispose();
        });

[OctavioXIII]

Does anyone know how to solve destroying the player to recycle it and be able to use it again in php/laravel when using it with youtube?

[ByMykel]

@OctavioXIII ufff I might be late and not accurate, have you try to change the key attribute in vm-player when you try to destroy the player?