Destroy Player #370
Description
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"> </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"> </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();
});