Tengo un reproductor de video incorporado dentro de un DIV... Tengo 4 botones que abren 4 páginas PHP diferentes (con un reproductor de video en cada una) que se abren dentro de un solo DIV. La idea es tener un reproductor que cambie sin problemas entre esos 4 canales. Mi problema es que cuando hago clic en los botones, solo la primera página (y el video) permanecen abiertos y en reproducción. Si hago clic en un botón diferente, solo la primera página permanece abierta. El problema parece ser que mi Javascript solo funciona para un enlace. ¿Cómo puedo implementar eso, cuando hago clic en un botón diferente, la primera página se detiene para permitir que se cargue la segunda página?
<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>Decidí enviar otra respuesta con más especificaciones.
Paso 1
Crea tus botones con el atributo data-lang con el valor de tu idioma. Llamémoslo channels.php :
<!-- data-lang="en": English --> <button class="btn" data-lang="en">English</button> <!-- data-lang="fa": Persian (farsi) --> <button class="btn" data-lang="fa">Persian</button> <!-- data-lang="fr": French --> <button class="btn" data-lang="fr">French</button> Paso 2
Agregue algo de jQuery a su archivo channel.php :
<script> $(".btn").click(function(){ // Get data-lang attribute from clicked element let lang = $(this).attr("data-lang"); // Send a GET request to your ajax.php file $("#page").load("ajax.php?lang=" + lang); // or it can be the URL of your ajax file // it's something like this: http://example.com/ajax.php?lang=en }); </script> Paso 3 Ahora tu ajax.php debería ser algo como esto:
# check if the lang parameter is set in the URL or set "en" language by default $lang = $_GET['lang'] ?? "en"; # If the language is English if( $lang == "en" ){ echo "English content"; } # If the language is Farsi else if( $lang == "fa" ){ echo "Farsi content"; } # If the language is French else if( $lang == "fr" ){ echo "French content"; } Tienes que reemplazar tu contenido con echo "... content"; para cada idioma.
No estoy seguro de cuánto sabe sobre php, pero puede poner algunos códigos HTML entre PHP sin usar echo , simplemente cierre la etiqueta de PHP, escriba su HTML y luego vuelva a abrir la etiqueta de php:
<?php # some php codes ?> <h1>HTML content</h1> <?php # Some more php contents ?>en este caso, es algo como esto:
if( true ){ # Closing PHP tag ?> <!-- Writing HTML contents --> <h1>HTML content</h1> <?php # Then reopen PHP tag }Finalmente, puede colocar su reproductor de Youtube HTML incrustado en su lugar usando echo:
if( $lang == "en" ){ ?> <iframe width="560" height="315" src="https://youtube.com/vide/url?autoplay=1" frameborder="0" allowfullscreen></iframe> <?php }Espero que esto haya sido útil
No estoy seguro de entender lo que está tratando de hacer, pero debe obtener la URL de la página de su atributo.
<script language="javascript"> $(function(){ $(".button").click(function(){ var address = $(this).attr("data-address"); $("#pantalla").load(address); }); }); </script> <button class="button" data-address="/screen-eng.php">Music videos</button> <button class="button" data-address="/screen-mov.php">Movie clips</button> ... Agregue el atributo data-address con el valor de la dirección de su página
Obtenga el atributo actual usando $(this).attr("data-address")
Pero recomiendo usar este código en su lugar:
<!-- index.html --> <button class="btn" data-lang="en">English</button> <button class="btn" data-lang="fa">Persian</button> <button class="btn" data-lang="fr">French</button> <div id="page"></div> <script> $(".btn").click(function(){ let lang = $(this).attr("data-lang"); $("#page").load("ajax.php?lang=" + lang); }); </script>luego, en su lado del servidor, maneje la solicitud:
// ajax.php # check if the lang parameter is set in the URL or set "en" language by default $lang = $_GET['lang'] ?? "en"; if( $lang == "en" ){ ?> <iframe width="560" height="315" src="https://youtube.com/embed/D6Ac5JpCHmI?autoplay=1" frameborder="0" allowfullscreen></iframe> <?php } else if( $lang == "fa" ){ ?> <iframe width="560" height="315" src="https://youtube.com/another/video?autoplay=1" frameborder="0" allowfullscreen></iframe> <?php } else if( $lang == "fr" ){ ?> <iframe width="560" height="315" src="https://youtube.com/one/more/video?autoplay=1" frameborder="0" allowfullscreen></iframe> <?php }Simplemente agregue un reproductor de video incrustado de YouTube en su PHP y adminístrelo enviando GET a su servidor.
No es necesario crear varias páginas para cada video, simplemente agregue la URL de su video como este código y obtenga lo que desee enviando una solicitud GET como esta:
http://example.com/ajax.php?lang=en