Se solicita Programador HTML, JS, PHP (Básico)

Excedente · 28 Dic 2019

Buenas, tengo un sitio de películas (en el cual he estado optimizando la experiencia del usuario lo máximo posible últimamente), la cuestión es que tengo algo de conocimiento en SEO, Diseño Web y optimizando Wordpress, pero no soy tan hábil con el Código, últimamente he visto que las webs de películas que tienen mejores posiciones en Google utilizan un sistema interesante para no sobrecargar la pagina con los iframes de las opciones de reproducción, este método en cuestión consiste en colocar una imagen y un botón de "reproducir" el cual luego de ser presionado genera la carga del iframe o los iframes en cuestión, así el usuario nota mayor velocidad en la web, menos tasa de rebote y por ende mejor posicionamiento, en fin.

El sistema en cuestión lo tienen las webs: Cuevanago.com Repelisgo.net, Pelisplusgo.com y Repelishd.tv.

Yo, un poco audaz intente copiar el formato de los 3 primeros, me quedó cualquier cosa, dejo la url de las pruebas que realicé: https://waload.com/p2.html

En si en diseño y funcionamiento ese código que "extraje" de las 3 primeras no esta tan mal, la idea es que el background sea automático (Utilizo el theme Diddli) colocándole style="background-image:url(<?php image_show($backdrop_path, "url", "w780"); ?>)" en el div del background.

Intenté durante horas mezclar ese html de pruebas con el theme diddli pero no lo logré, en Diddli, el llamado al reproductor es así:

<?php if(function_exists('repromt_get')){repromt_get($post->ID);} ?>

Yo quisiera que se muestre, digamos, algo similar a ese archivo de pruebas para evitar la carga de todos los iframes hasta que el usuario no de clic en ese botón de "reproducir" o "play", serviría tanto que se oculte todo el reproductor con los idiomas, como que queden los idiomas por encima, en si lo que pido es un reproductor lo mas similar posible a el que utiliza cuevanago.com, por ejemplo, para implementar en el Theme de wordpress Diddli.

Dejo el archivo que utilicé de pruebas hasta ahora, por si les sirve:

HTML:

<html><head>  <link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/> <meta data-n-head="true" charset="utf-8"/> <style>

      iframe {
        border: none;
        max-width: 100%;
        z-index:9999;
      }
      #video {
        height: 0;
        padding: 0 0 56.25%; /* 16:9 */
        position: relative;
       
      }
      .material-icons[data-icon]:before {
    content: attr(data-icon);
}
      .video-iframe,
      #button {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
     
      }
      #button {
    align-items: center;
    color: white;
    cursor: pointer;
    border: none;
    text-shadow: #111111 2px 2px;
    display: flex;
    outline: none;
    background-repeat: no-repeat;
    justify-content: center;
    background-size: 100% 100%;
    background-position: center;
       
      }
      .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
      ._1xB9e {
    flex: 1;
    margin-left: 14px;
    text-align: left;
}
._3jNjw {
    color: #fff;
    font-size: 1.2em;
    margin-bottom: 3px;
}
.T4eLv {
    align-items: center;
    color: hsla(0,0%,100%,.65);
    display: flex;
}
._3Ievt {
    font-weight: 700;
}
.lzy[lazy], img[lazy] {

    transition: opacity .2s ease-out;
}
.PHRDZ:hover ._3b-OZ {
    -webkit-transform: scale3d(1.04,1.04,1.04);
    transform: scale3d(1.04,1.04,1.04);
}
._17liB {
    background-size: 100% 100%;
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
   
}
.PHRDZ {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
}
      ._3b-OZ {
    -webkit-transform: scale3d(1.001,1.001,1.001);
    align-items: center;
    background: rgba(30,30,30,.9);
    border: 2px solid #000;
    border-radius: 4px;
    box-shadow: 0 0 7px rgba(0,0,0,.7);
    display: flex;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 14px;
    transform: scale3d(1.001,1.001,1.001);
    transition: -webkit-transform .2s cubic-bezier(.2,1.49,.68,1.63);
    transition: transform .2s cubic-bezier(.2,1.49,.68,1.63);
    transition: transform .2s cubic-bezier(.2,1.49,.68,1.63),-webkit-transform .2s cubic-bezier(.2,1.49,.68,1.63);
}
._3b-OZ:hover {
    -webkit-transform: scale3d(1.08,1.08,1.08)!important;
    transform: scale3d(1.08,1.08,1.08)!important;
}
._3b-OZ>i {
    border: 1px solid #d2d2d2;
    border-radius: 50%;
    color: #fff;
    font-size: 40px;
    padding: 5px;
}
     
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#button').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" class="video-iframe" src="https://jplayer.club/v/8egndu8wpmnk6kd" width="700" height="450"></iframe>');
        }
    });  
});
</script>
</head><body>    

<div class="video">
      <div id="iframeHolder"></div>
      <button id="button"><div class="_17liB lzy" data-src="https://image.tmdb.org/t/p/w780/6ogNP2NPN7C1LccE8PhjGaNMvdM.jpg" lazy="loaded" style="background-image: url(https://image.tmdb.org/t/p/w780/6ogNP2NPN7C1LccE8PhjGaNMvdM.jpg);"><div class="PHRDZ"><div class="_3b-OZ"><i data-icon="play_arrow" class="material-icons"></i> <div class="_1xB9e"><div class="_3jNjw">
                  <span class="_3Ievt">Reproducir</span></div> <div class="T4eLv">
                  </div></div></div></div></div></button>
       
   
    </div>
    <script>
      focus();
      document.querySelectorAll('.video').forEach(function (el) {
        const listener = addEventListener('blur', function () {
          const play = el.querySelector('.video-play');
          if (play && document.activeElement === el.querySelector('.video-iframe')) {
            el.removeChild(play);
          }
          removeEventListener('blur', listener);
        });
      });
    </script>
</body>

</html>

Escucho presupuestos por MP, gracias.

Hadrien Rivere · 28 Dic 2019

con js

document.body.style.backgroundImage = "<?php image_show($backdrop_path, "url", "w780"); ?> ')";

Excedente · 28 Dic 2019

Hadrien Rivere dijo:
con js

document.body.style.backgroundImage = "<?php image_show($backdrop_path, "url", "w780"); ?> ')";

Gracias, el tema que tengo es ¿cómo implementar eso?, el código en general en el theme diddli para no cargar el reproductor hasta que el usuario no de a "play", como lo hacen esas webs que mencioné en la publicación.

Muchas gracias

LinkaPro · 28 Dic 2019

Puedes hacerlo por ajax, así cómo lo hace animeflv, que al inicio solo carga una imagen la cual es ligera y no afecta al SEO, cuando clickeeas sobre ella por medio de ajax hace una petición post, que retorna el iframe o url del video en cuestión, y ay se le muestra al usuario para que pueda darle reproducir. Lo mismo para cada option(OPCION 1, OPCION 2) por medio de ajax obtienen el iframe para mostrarlo ya al usuario.

Si estás interesado en que te apoye con eso escríbeme por MP.

Saludos.

Excedente · 28 Dic 2019

darku93 dijo:
Puedes hacerlo por ajax, así cómo lo hace animeflv, que al inicio solo carga una imagen la cual es ligera y no afecta al SEO, cuando clickeeas sobre ella por medio de ajax hace una petición post, que retorna el iframe o url del video en cuestión, y ay se le muestra al usuario para que pueda darle reproducir. Lo mismo para cada option(OPCION 1, OPCION 2) por medio de ajax obtienen el iframe para mostrarlo ya al usuario.

Si estás interesado en que te apoye con eso escríbeme por MP.

Saludos.

Te envío MP

Hadrien Rivere · 28 Dic 2019

JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .mydiv {
        display: none;
    }
</style>
<body>
    <button onclick="mifuncion()">Ve pelicula</button>
    <div class="mydiv"> 
      <iframe class="myiframe" src=""> </iframe>
    <div>
    <script>
    const mifuncion = () => {
       const x = document.querySelector('.myiframe');
       x.src = "https://www.fembed.com/v/q232eiewk5n757z";
       const z = document.querySelector('.mydiv');
       z.style.display = "block";
    }
    </script>
    </body>
</html>

Es muy sencillo no requieres jquery o ajax con vainilia puedes hacer algo como esto.

mhernanj · 28 Dic 2019

Buenas Tardes, puedo ayudarle con su proyecto le tengo una propuesta!

Excedente · 28 Dic 2019

mhernanj dijo:
Buenas Tardes, puedo ayudarle con su proyecto le tengo una propuesta!

Ok

Se solicita Programador HTML, JS, PHP (Básico)

Excedente

Hadrien Rivere

Excedente

LinkaPro

Excedente

Hadrien Rivere

mhernanj

Excedente