Como Mostrar Un Video de YouTube en Android Studio (Kotlin)

Nube Colectiva

hace 8 meses

Como Mostrar Un Video de YouTube en Android Studio (Kotlin)

En esta página:

Demo Github

Los contenidos multimedia suelen darle video a las aplicaciones móviles creadas en Android Studio.

En ocasiones necesitamos reproducir un video de YouTube en una actividad o activity de nuestra aplicación creada con el lenguaje de programación Kotlin.

En este tutorial te enseñaré a Como Mostrar Un Video de YouTube en Android Studio (Kotlin), vamos con ello.

Los videos de YouTube se pueden ver en cualquier modelo de celular Android

Para mostrar un video de YouTube y que se pueda reproducir al presionarlo, debemos hacer uso de la clase WebView de Android.

Comenzamos con nuestro archivo MainActivity.kt agregando el siguiente código (He colocado comentarios para explicar que hacen las líneas de código más importantes):


package com.example.myapplication

import android.annotation.SuppressLint
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import androidx.activity.ComponentActivity

class MainActivity : ComponentActivity() {

    // Cancelamos alguna advertencia de JavaScript
    @SuppressLint("SetJavaScriptEnabled")

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        // Instanciamos nuestro layout
        setContentView(R.layout.activity_main)

        // Instanciamos el WebView
        val webView: WebView = findViewById(R.id.video)

        // Colocamos el video de YouTube (El ancho y el alto le ponemos en 100%) 
        val video = "<iframe width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/MZRmNCgzl3E?si=eNAb0A2l3iqBIsNo\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"

        // Configuramos el mimeType y la codificación a utf-8
        webView.loadData(video, "text/html", "utf-8")

        // Habilitamos JavaScript en el WebView
        webView.getSettings().javaScriptEnabled = true

        // Usamos el cliente de Google Chrome como contenedor del video
        webView.webChromeClient = WebChromeClient()

    }
}

package com.example.myapplication

import android.annotation.SuppressLint

import android.os.Bundle

import android.webkit.WebChromeClient

import android.webkit.WebView

import androidx.activity.ComponentActivity

class MainActivity : ComponentActivity() {

// Cancelamos alguna advertencia de JavaScript

@SuppressLint("SetJavaScriptEnabled")

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

// Instanciamos nuestro layout

setContentView(R.layout.activity_main)

// Instanciamos el WebView

val webView: WebView = findViewById(R.id.video)

// Colocamos el video de YouTube (El ancho y el alto le ponemos en 100%)

val video = "<iframe width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/MZRmNCgzl3E?si=eNAb0A2l3iqBIsNo\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen></iframe>"

// Configuramos el mimeType y la codificación a utf-8

webView.loadData(video, "text/html", "utf-8")

// Habilitamos JavaScript en el WebView

webView.getSettings().javaScriptEnabled = true

// Usamos el cliente de Google Chrome como contenedor del video

webView.webChromeClient = WebChromeClient()

}

Si te fijas bien, en el código anterior he colocado dentro de la variable video el código del video de YouTube.

Este código lo obtienes presionado el botón Compartir que se encuentra debajo de cada video de YouTube:

Puedes elegir el video de YouTube que desees

En nuestro archivo activity_main.xml agregamos el WebView en donde se mostrará el video de YouTube:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- WebView para mostrar el video de YouTube -->
    <WebView
        android:id="@+id/video"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<WebView

android:id="@+id/video"

android:layout_width="match_parent"

android:layout_height="300dp"/>

</LinearLayout>

Sabías que la clase WebView de Android fue lanzada en la API level 1 en 2008 y aún se mantiene activa.

Por último en nuestro archivo AndroidManifest.xml agregamos los permisos de Internet:


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <!-- Le damos permisos de Internet a nuestra aplicación -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyApplication"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/Theme.MyApplication">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools">

<uses-permission android:name="android.permission.INTERNET"/>

<application

android:allowBackup="true"

android:dataExtractionRules="@xml/data_extraction_rules"

android:fullBackupContent="@xml/backup_rules"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/Theme.MyApplication"

tools:targetApi="31">

<activity

android:name=".MainActivity"

android:exported="true"

android:theme="@style/Theme.MyApplication">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Si ejecutamos la aplicación, podemos ver que el video se reproduce sin problemas en la aplicación Android:

Puedes escuchar el audio del video mediante audífonos, parlantes u otro medio

Así de fácil puedes Mostrar Un Video de YouTube en Android Studio usando el lenguaje de programación Kotlin.

Al inicio de este tutorial he colocado una Demo para que veas el proyecto en acción, asimismo he colocado un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.

Aprende a Como Usar Inteligencia Artificial en Android Studio.

Conclusión

En este tutorial has aprendido a Como Mostrar Un Video de YouTube en Android Studio usando el lenguaje de programación Kotlin.

Te servirá de base para mostrar videos de YouTube y elementos similares en tu aplicación Android.

La practica hace al maestro, por ello recuerda practicar mucho lo aprendido.

Nota(s)

No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.