CMS & PLAYERS control - btn Return doesn't stop the video

hi there !

I’m currently designing a video portfolio website with many players populated in CMS. Menus are working, but I’ve some difficulties to manage the players with my buttons which are CMS driven.
I’m new to JS /Jquery (please be indulgent :slight_smile: ).

On “Home” page which is also the “films” tab, you can click on a project title. to launch the corresponding film. I use some custom code to directly play the player after a click on each big title (.Titre) of the fullscreen menu.
when the player is launched, I’m using PLYR https://github.com/sampotts/plyr , a customised player to control my vimeo contents.

I’m sure I can get a nicer/shorter code to get this automativ play of the player but this is working by repeating the code for each player.

Now, the problem is, when One player is in play, I’m trying to stop automatically my player when I’m clicking on the Cross (.ButtonReturn.Film) at the top of the page to exit the page. I tried with the same code as the automatic play but this time, to stop the player. but it doesn’t work.
actually if I click on this return btn the player continue to play.

So my code on click on “#btnreturn-3” stop the player[[2]]" code doesn’t work.

I’ve 2 places for the code.
1/ I’ve put some embed code on .code4buttonID to rename each button with a specific ID using the help of CMS field “order number” These code are working as expect, but the console tell me there is these error :
"TypeError: null is not an object (evaluating ‘titr .id = “titre-1”’)
and
"TypeError: null is not an object (evaluating ‘btret .id = “btnreturn1”’)

2/and Main Code is on the before body of the Home page


<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script>
          document.addEventListener('DOMContentLoaded', () => {
          // Controls (as seen below) works in such a way that as soon as you explicitly define (add) one control
          // to the settings, ALL default controls are removed and you have to add them back in by defining those below.
          // For example, let's say you just simply wanted to add 'restart' to the control bar in addition to the default.
          // Once you specify *just* the 'restart' property below, ALL of the controls (progress bar, play, speed, etc) will be removed,
          // meaning that you MUST specify 'play', 'progress', 'speed' and the other default controls to see them again.
      const controls = [
                'play-large', // The large play button in the center
                'restart', // Restart playback
             // 'rewind', // Rewind by the seek time (default 10 seconds)
                'play', // Play/pause playback
            //  'fast-forward', // Fast forward by the seek time (default 10 seconds)
                'progress', // The progress bar and scrubber for playback and buffering
                'current-time', // The current time of playback
          //    'duration', // The full duration of the media
                'mute', // Toggle mute
                'volume', // Volume control
             // 'captions', // Toggle captions
            //  'settings', // Settings menu
           //   'pip', // Picture-in-picture (currently Safari only)
           //   'airplay', // Airplay (currently Safari only)
           //   'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
                'fullscreen' // Toggle fullscreen
       ];
         
//init (player marche pour un seul)
// const player = new Plyr('#player1', { controls }); // GOOD ONE pour avoir controls et btn!!

// version pour plusieurs players, mais les buttons ext ne fonctionnent pas pour le moment avec "const PLAYERS" 
const players = Array.from(document.querySelectorAll('.player_js')).map(p => new Plyr(p,{ controls }));

 // Expose player so it can be used from the console
  window.player = players;

 // Bind event listener (seems doesn't work - do I need this???)
  function on(selector, type, callback) {
   document.querySelector(selector).addEventListener(type, callback, false);
 }

// Start play on click to .titre (work) 


  on('#titre-2', 'click', () => { 
  player[0].play();
  });
     
      on('#titre-3', 'click', () => { 
 player[1].play();
     });
     
      on('#titre-4', 'click', () => { 
 player[2].play();
     });
     
      on('#titre-5', 'click', () => { 
 player[3].play();
     });
     
      on('#titre-6', 'click', () => { 
 player[4].play();
     });
     
      on('#titre-7', 'click', () => { 
 player[5].play();
     });
          
      on('#titre-8', 'click', () => { 
 player[6].play();
     });
     
player.onplaying = (event) => {
  console.log('Video is no longer paused.');
};     
          
 // Stop (doesn't work)  	
    
    
  on('#btnreturn2', 'click', () => { 
player[0].pause();
player[0].currentTime = 0;
console.log('player[0].stop');
  });
  
 // or ? 
 
 // on('#btnreturn2', 'click', () => { 
   // player[0].stop();
 // });
  
  on('#btnreturn3', 'click', () => { 
player[1].pause();
player[1].currentTime = 0;
console.log('player[Ø].stop');
  });
  
    on('#btnreturn4', 'click', () => { 
    player[2].stop();
  });
  
    on('#btnreturn5', 'click', () => { 
    player[3].stop();
  });
  
    on('#btnreturn6', 'click', () => { 
    player[4].stop();
  });
    on('#btnreturn7', 'click', () => { 
    player[5].stop();
  });
  
    on('#btnreturn8', 'click', () => { 
    player[6].stop();
  });
  
      on('#btnreturn9', 'click', () => { 
		player[7].stop();
     });

     
/* 
  // stop on scroll (doesn't work)
 on ('.player_js', 'onscroll', () => { 
    player[0].stop(); 

 
  // stop on scroll (doesn't work)
 on ('.player_js', 'onscroll', () => { 
    players.stop();

*/

// to stop the player at the end of the video 
// code not finished - doesn't work 

  player[0].on('ended', function(event) {
  player[0].stop();
    // players[0].play(); // infinite loop
});

});

</script>

would you have a solution to make the cross btn (.ButtonReturn.Film) stop the player (on click) ?

thank you a lot.


Here is my site Read-Only: Webflow - Julien Widmer Website

And Here is the page (click on first project “shell advance” to get the player and test .ButtonReturn.Film btn): https://julienwidmer.webflow.io

In two words,

Why this is working :



  on('#titre-2', 'click', () => { 
  player[0].play();
  });
     
      on('#titre-3', 'click', () => { 
 player[1].play();
     });
     

And the same for stop, is not working !?

on('#btnreturn2', 'click', () => { 
player[0].pause();
player[0].currentTime = 0;
console.log('player[0].stop');
  });

Could someone have an idea ?