[Resolved] Video player function

[Author]

Posts

[darmaJ-2]

Hi, before I have a ticket to ask about audio player function to be paused when clicking each tabs and slide using bootstrap tabs and slick carousel, in this thread : https://toolset.com/forums/topic/the-audio-player-function/. And Christian already help me through it perfectly.

Now I encounter another things when using video custom field.

So to summarize :
1. I have a CPT to create a module page
2. Inside that CPT I have a RFG to create pages inside that module, and to views the pages I am using slick carousel so each page will treated as 1 slide.
3. And inside a page I have another RFG to create a subpage, and to view the subpage I am using Bootstrap tabs
4. For the subpage there is Audio and Video custom field (not all the subpages have Audio or Video custom field filled) and to load it in the frontend I am using the views shortcode to embed player.
5. In the previous thread, Christian already help me to pause the audio player when navigating through other slide or tabs

Now, for my next question is :
a. I want the audio and video play when the their respective slide is in focus, when I try to add the audio & video field using views shortcode and enable autoplay, it plays at the beginning of the page load. Is there any custom code for this one?
b. For the previous thread I am asking for the audio player got paused when navigating through tabs and slide, but what about the video player? do you have any jquery that I can use for this one?

[Jamal]

Hello and thank you for contacting the Toolset support.

The code that shared Christian looks for all the audio tags and pause them. In this case, we'll need to "pause" the audio and video from the current slide and play those of the next slide. Instead of looking for all audio tags, we'll look for those of the current slide and the next one. This code might work:

jQuery('.main-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
	var current = jQuery(currentSlide);
	var next = jQuery(nextSlide);
	
	// audios
	current.find('audio').each(function(){
		this.pause();
	});
	next.find('audio').each(function(){
		this.play();
	});
	
	// Videos
	current.find('video').each(function(){
		this.pause();
	});
	next.find('video').each(function(){
		this.play();
	});
});

I hope this helps. Otherwise, please let me know where the slider is used and allow me temporary access to check it on the backend. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Thank you for these details.

The custom code that I shared was wrong, because "currentSlide" and "nextSlide" are actually the indexes of the slides rather than the HTML elements. So regarding videos the following Javascript should work:

jQuery('.main-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var current = jQuery(slick.$slides[currentSlide]);
    var next = jQuery(slick.$slides[nextSlide]);
     
    current.find('video').each(function(){
        this.pause();
    });
    next.find('video').each(function(){
        this.play();
    });
});

Regarding the audios, we'll need to play the audio only if it is in the current Bootstrap tab, the following code should work for it:

jQuery('.main-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var current = jQuery(slick.$slides[currentSlide]);
    var next = jQuery(slick.$slides[nextSlide]);
     
    // audios
    current.find('audio').each(function(){ this.pause(); });
    next.find('.tab-pane.active audio').each(function(){ this.play(); });
});

Then, we'll need to rely on Bootstrap events on these tabs to play/pause the audio of the next/current tab, the following code should work:

$(document).on('shown.bs.tab', function (e) {
  var new_tab = $(e.target);
  var old_tab = $(e.relatedTarget);
  var new_tab_id = new_tab.attr('aria-controls');
  var old_tab_id = old_tab.attr('aria-controls');
  
  jQuery('#' + old_tab_id + ' audio').each(function(){ this.pause() })
  jQuery('#' + new_tab_id + ' audio').each(function(){ this.play() })
});

I am sure you will understand that this is custom code and is therefore beyond the scope of the support forum, if you are not comfortable with Javascript programming, I'll suggest hiring a developer or contacting one of our certified partners https://toolset.com/contractors/

[darmaJ-2]

Thanks Jamal, yes I am very grateful that you can help me to this step, the code works perfectly!