¿Cómo obtener datos de video de YouTube usando la API de datos de YouTube y PHP?

Posted on by Rudeus Greyrat

Las miniaturas se utilizan para obtener una vista previa de una sola entidad multimedia o de un grupo de ellas en una sola ventana del explorador. 
Ahorra tiempo y brinda un mejor enfoque a la atención del usuario y nos ayuda a captar la atención y educar al espectador mejorando el proyecto de diseño web.

La descripción es unas pocas palabras más que el título. Cuantas más palabras haya en la descripción del video de YouTube, mayor será la posibilidad de representar palabras clave más exactas, lo cual es muy importante para que lo encuentren en los motores de búsqueda. 
Los canales de video deben conocer los datos sobre el video para clasificarse mejor y obtener más vistas públicas porque nadie puede ver qué hay exactamente en el contenido del video, por lo que necesita datos.

El objetivo principal del título es representar y describir cada resultado de la mejor manera y que pueda relacionarse con la consulta de búsqueda del usuario. El título es la información más importante que se utiliza para decidir en qué enlace hacer clic, por lo que es importante recuperar títulos bien entendidos en sus páginas web.

Los títulos ayudan al motor de búsqueda a rastrear los datos relevantes. 

El título y la descripción juegan un papel clave para hacer que el video sea importante y para los factores de clasificación de los motores de búsqueda.

Propósito: el artículo muestra el título, la descripción y la miniatura de un enlace URL de YouTube en particular. El formulario HTML solicita una URL de video de YouTube para la entrada dada. 

Cuando el usuario pega la URL en el campo de entrada y la envía, esta variable de URL se enviará al archivo PHP. Después de obtener los datos de la URL, se previsualizará en el navegador. 
 

Clave de API de datos de video de YouTube: 

  • La API de datos de YouTube está disponible de forma gratuita para su uso. 
  • Necesitamos la clave API de datos de YouTube para la implementación del siguiente programa de ejemplo. 
  • Cada video de YouTube tendrá una identificación específica asociada y esta identificación se pasa a la llamada API para la recuperación de datos. Veamos paso a paso cómo crear una clave API de datos de YouTube. 

Acercarse:

  • Vaya al enlace de la Consola para desarrolladores de Google e inicie sesión en su propia cuenta de Google. 
  • Después de iniciar sesión, vaya al enlace y haga clic en el botón de color azul CREAR PROYECTO. 
  • Tenemos que esperar un tiempo hasta que Google prepare el proyecto de los desarrolladores.
create project

  • Rellene el nombre del proyecto de su propia elección. 

write project

  • En Google API Console, haga clic en ‘Seleccionar un enlace de proyecto’.
  • Luego haga clic en el botón más (+) para crear un proyecto. 

select project

  • Ingrese el nombre del proyecto de su propia elección y seleccione otras opciones >> Haga clic en el botón crear.
  • Se tarda unos segundos en configurar el nuevo proyecto de un desarrollador. Una vez hecho esto, seleccione su proyecto.
  • Haga clic en el enlace de la biblioteca en el menú de navegación izquierdo. En la sección API de YouTube, haga clic en el enlace API de datos de YouTube .
  • Habilite YouTube Data API v3 para acceder a los datos de YouTube haciendo clic en el botón HABILITAR en mayúsculas. 

youtube data API

  • Haga clic en el enlace Credenciales en el menú de navegación de la izquierda. Presione el botón «Crear credenciales» seleccionando la clave API.
  • Aparecerá un cuadro de diálogo con su clave API recién creada. Usa esta clave de API en la solicitud de la API v3 de la API de datos de YouTube .

Código HTML: el siguiente código muestra el formulario HTML para solicitar la URL del video de YouTube para la entrada dada. Cuando el usuario pega la URL en el campo de entrada, esta variable de URL se enviará al archivo «showDetails.php». Después de obtener los datos de la URL, se previsualizará en el navegador.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <br />
  
    <p>
        Please enter the youtube 
        URL in the input
    </p>
  
  
    <div id="divID" class="container-class">
        <form method="post" action="showDetails.php">
            <input class="input-class" 
                type="text" name="url" 
                placeholder="Enter your URL">
            <br />
            <br />
            <input class="submit-class" 
                type="submit" name="submit" 
                value="Submit URL">
        </form>
    </div>
</body>
  
</html>

Código PHP: El siguiente código muestra el archivo “showDetails.php” utilizado en la página web HTML anterior.

html

<?php
    error_reporting (E_ALL ^ E_NOTICE); 
   
    /*Just for your server-side code*/
    header('Content-Type: text/html; charset=ISO-8859-1');
?>
<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <style>
        .thumbnail-class {
            width: 50%;
            margin: 10px;
            padding: 5px;
            border-radius: 1px;
        }
  
        #titleDescID {
            width: 50%;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<br />
  
<body>
    <div id="thumbnailID" class="thumbnail-class">
        <?php
        if (isset($_POST['submit'])){
            $url = $_POST['url'];
            /* Extracting the v element from the link*/
            $vString = explode("v=", $url);
            $youtubeId = $vString[1];
        }
        ?>
  
        <div id="videoDivID" 
            style="width:600px;height:317px;">
            <iframe id="iframe" 
                style="width:100%;height:100%"
                src=
"https://www.youtube.com/embed/<?php echo $youtubeId; ?>"
                data-autoplay-src="
https://www.youtube.com/embed/<?php echo $youtubeId; ?>?autoplay=1">
            </iframe>
        </div>
    </div>
    <?php
        //Its different for all users
        $myApiKey = 'ENTER YOUR API KEY'; 
        $googleApi = 
            'https://www.googleapis.com/youtube/v3/videos?id ='
            . $youtubeId . '&key=' . $myApiKey . '&part=snippet';
  
        /* Create new resource */
        $ch = curl_init();
   
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        /* Set the URL and options  */
        curl_setopt($ch, CURLOPT_URL, $googleApi);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
        curl_setopt($ch, CURLOPT_VERBOSE, 0);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        /* Grab the URL */
        $curlResource = curl_exec($ch);
   
       /* Close the resource */
        curl_close($ch);
   
        $youtubeData = json_decode($curlResource);
   
        $youtubeVals = json_decode(
            json_encode($youtubeData), true);
   
        $urlTitle = $youtubeVals
            ['items'][0]['snippet']['title'];
              
        $description = $youtubeVals
            ['items'][0]['snippet']['description'];
              
    ?>
    <div id="titleDescID">
        <?php
            echo '<b>Title: ' . $urlTitle . '</b>';
            echo '<b>Description: </b>' . $description;
        ?>
    </div>
</body>
  
</html>

Código CSS: El siguiente código muestra el archivo «style.css» utilizado en el código HTML anterior.

CSS

body{
    font-family: Sans-serif,Arial;
    width: 600px;
}     
.container-class{
    background: #e9e9e9;
    border: #B3B2B2 1px solid;
    border-radius: 2px;
    margin: 20px;
    padding: 40px;
}    
.input-class{
    width: 100%;
    border-radius: 2px;
    padding: 20px;
    border: #e9e9e9 1px solid;
}
.submit-class{
    padding: 10px 20px;
    background: #000;        
    color: #fff;
    font-size: 0.8em;
    width: 110px;
    border-radius: 4px;
    cursor:pointer;
    border: black 2px solid;
}

Producción: 

La siguiente imagen muestra la pantalla antes de que el usuario haga clic en el botón «Enviar URL»:

La siguiente imagen se muestra después de que el usuario ingresa y envía el enlace de YouTube:

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *