John Davidson

Message:

I have an embedded video player inside a DIV... I have 4 buttons that open 4 different PHP pages (with a video player on each) that open inside a single DIV. The idea is to have a player that changes flawlessly between those 4 channels. My problem is that when I click on the buttons, only the first page (and video) stays open and playing. If I click a different button, only the first page stays open. The problem seems to be that my Javascript works only for one link. How can I implement that, when I click on a different button, the first page stops to let the second page load.

<script language="javascript">

$(function(){

  $(".button").click(function(){

    $("#pantalla").load("/screen-spa.php");

  });

});

</script>

        

<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-eng.php', 'pantalla');">Music videos</a></span>



        

<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-mov.php', 'pantalla');">Movie clips</a></span>    





<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-tvs.php', 'pantalla');">TV shows</a></span>





<span class="button"><a href="javascript:ajaxpage(rootdomain+'/screen-spa.php', 'pantalla');">Música en español</a></span>

---

My Answer:
To solve this issue, you can modify your JavaScript code to stop the currently playing video when a new button is clicked. You can achieve this by adding a function to stop the video before loading the new PHP page. Here's an example of how you can modify your code:

javascript
$(function(){
$(".button").click(function(){
$("#video-player").empty(); // Clear the current video player
$("#pantalla").load($(this).attr("href")); // Load the new PHP page
return false; // Prevent the default link behavior
});
});


In this code, we first empty the `#video-player` div to stop the currently playing video. Then, we load the new PHP page using the `href` attribute of the clicked button. Finally, we use `return false` to prevent the default link behavior and stop the page from reloading.

Make sure to replace `#video-player` with the ID of your video player div in your HTML code.

With this modification, clicking on a different button will stop the currently playing video and load the new video from the corresponding PHP page.