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

3 minuto(s)

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.

Video de YouTube reproduciéndose en una aplicación Android — 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()

    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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:

Obteniendo el código de un 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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<?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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<?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>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

</manifest>

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

Video de YouTube colocado en una 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.

Android
21-03-2024
21-03-2024
Crear un Post - Eventos Devs - Foro

Todas Nuestras Páginas y Categorías:

Agile Android Android Studio Angular Anuncios Apache Cassandra API REST APIs Apple WWDC Arduino Arq. de Software Articulos Axios Backend Bases de Datos Blockchain Bootstrap C# CDNs Chrome Dev Tools Ciberseguridad Cloud Computing CSS DApps Dart Data Mining Data Science (Ciencia de Datos) DevOps Devs Devs Hardware Django Docker Editores de Código Electron JS Entretenimiento Eventos Dev Experimental Firebase Flutter Frontend Game Dev Gin Git GitHub GitOps Google IO GraphQL Hacking Ético HTML 5 Inteligencia Artificial Ionic iOS JAMStack Java JavaScript jQuery Kotlin Kubernetes Laravel Linux Machine Learning Marketing Digital Material Design Micro Frontend MongoDB Móvil MS SQL Server MySQL News NFT Node JS Oracle DB Pentesting PHP PostgreSQL Premium Principal Python Ranking BD Ranking Lenguajes Raspberry Pi React JS React Native Recursos Redis Ruby Ruby on Rails Rust Seguridad SEO Servidores Social Media Socket IO Spring SQL SQLite Stack Overflow Svelte Swift Tailwind CSS Tecnología Tendencias GitHub Testing Tutoriales Tutoriales de Go TypeScript UI Unicode Unity UX Vite JS VPS Vue JS Web 3.0 Wordpress

Partners

Utilizamos cookies para proporcionar y mejorar nuestros servicios. Al navegar por nuestro sitio, usted acepta las cookies. Política de Cookies | Política de Privacidad