Contenido

• Cómo incrustar videos de YouTube en tu aplicación de Android
• Recuperando la identificación de un video de YouTube
• Obtenga la huella digital SHA-1 de su proyecto
• Regístrese con la consola API de Google
• Descargue la API del reproductor de Android de YouTube
• Actualiza tu manifiesto
• Construyendo el diseño del reproductor de YouTube
• Implementando el reproductor de YouTube
• 1. Extienda YouTubeBaseActivity
• 2. Inicialice el reproductor de YouTube
• 3. Implemente onInitializationSuccess y onInitializationFailure
• Reproducción de un video de YouTube: código completado
• Probar la API del reproductor de Android de YouTube
• Mostrar contenido de Dailymotion en un WebView
• Obtenga la identificación de video de Dailymotion
• Agregar el SDK Dailymotion
• Solicitar acceso a internet
• Agregar el widget PlayerWebView de Dailymotion
• Configurando nuestro Dailymotion PlayerWebView
• Incrustar un video de Vimeo
• Actualización del manifiesto
• Agregar un WebView a nuestra interfaz de usuario
• Elige tu video
• Mostrar una página web en su aplicación de Android
• Probar tu aplicación Vimeo
• Terminando

Una vez que el MediaController está visible en la pantalla, puede reproducir, pausar, rebobinar y avanzar rápidamente el video, y saltar a cualquier punto dentro del clip arrastrando la barra de progreso del MediaController.

Cómo incrustar videos de YouTube en tu aplicación de Android

Incrustar un archivo de video en su aplicación es una excelente manera de garantizar que el video siempre esté disponible, independientemente de la conexión a Internet del dispositivo. Sin embargo, incrustar múltiples videos grandes de alta resolución en su aplicación también es una excelente manera de aumentar el tamaño de su APK.

Si le preocupa el tamaño del APK, o si su aplicación incluye videos que son extras adicionales agradables, puede publicar esos videos en una plataforma en línea y luego transmitirlos a través de su aplicación en tiempo de ejecución.

Cuando se trata de publicar videos en línea, hay un sitio web que me viene a la mente al instante, así que en esta sección te mostraré cómo insertar ninguna Video de YouTube en su aplicación, usando la biblioteca de cliente API de YouTube Android Player.

Recuperando la identificación de un video de YouTube

Para comenzar, debe decidir qué video de YouTube desea mostrar y luego recuperar su ID de video única.

Puede usar cualquier video de YouTube, pero estoy optando por la "tecnología favorita de 2018". Cargue el video elegido y eche un vistazo a su URL en la barra de direcciones de su navegador, por ejemplo, la URL del video es:

youtube.com/watch?v=hJLBcViaX8Q

La ID es la parte de la URL que identifica de manera única este video, que es la cadena de caracteres al final de la URL (básicamente, todo después del símbolo "="). La identificación del video es:

hJLBcViaX8Q

Tome nota de la identificación de su video, ya que la usaremos más adelante.

Obtenga la huella digital SHA-1 de su proyecto

Para acceder a la API del reproductor Android de YouTube, deberá generar una clave API con restricciones de Android. Esto implica vincular la clave API con el nombre único del paquete y la huella digital del certificado (SHA-1) de su proyecto.

Puede recuperar la huella digital SHA-1 de su proyecto, a través de la consola Gradle:

• Seleccione la pestaña Gradle en el lado derecho de la ventana de Android Studio.
• Seleccione el módulo "aplicación", seguido de "Tareas> Android> firmaReporte".

• Abra la pestaña Gradle Console que aparece en la esquina inferior derecha de la pantalla.
• La consola Gradle se abrirá automáticamente. Encuentre el valor SHA-1 en esta ventana y anótelo.

Estamos utilizando una huella digital de certificado de depuración, que solo es adecuada para probar una aplicación. Antes de publicar una aplicación, siempre debe generar una nueva clave API basada en el certificado de lanzamiento de esa aplicación.

Regístrese con la consola API de Google

Antes de poder usar la API del reproductor Android de YouTube, debe registrar su aplicación en la Consola API de Google:

• Dirígete a la consola API.
  En el encabezado, seleccione el nombre de su proyecto actual (donde se encuentra el cursor en la siguiente captura de pantalla).

• En la ventana siguiente, seleccione "Nuevo proyecto".
• Dé un nombre a su proyecto y luego haga clic en "Crear".
• En el menú de la izquierda, seleccione "Credenciales".
• Haga clic en el botón azul "Crear credenciales" y luego seleccione "Clave API".
• Su clave API ahora aparecerá en una ventana emergente, que incluye un mensaje para restringir esta clave API. Las claves restringidas son más seguras, por lo que, a menos que requiera específicamente una clave API sin restricciones, opte por "Restringir clave".
• En la pantalla siguiente, asigne a su clave API un nombre distintivo.
• Seleccione el botón de opción "Aplicaciones de Android".
• Haga clic en "Agregar nombre del paquete y huella digital".
• Copie / pegue la huella digital SHA-1 de su proyecto en la sección siguiente y luego ingrese el nombre del paquete de su proyecto (que aparece en la parte superior de cada archivo de clase Java y en el Manifiesto de su proyecto).
• Cuando esté satisfecho con la información que ingresó, haga clic en "Guardar".

Descargue la API del reproductor de Android de YouTube

A continuación, deberá descargar la biblioteca de cliente de la API de YouTube Android Player Player. Al usar esta biblioteca, se recomienda que habilite ProGuard, para ayudar a mantener su APK lo más ligero posible.

Para agregar la biblioteca de YouTube a su proyecto:

• Dirígete al sitio web de YouTube Android Player y descarga la última versión.
• Descomprima el archivo zip posterior.
• Abra la carpeta recién descomprimida y navegue a su subcarpeta "libs"; debe contener un archivo "YouTubeAndroidPlayerApi.jar".
• En Android Studio, cambie a la vista "Proyecto".
• Para asegurarte de que la biblioteca de YouTube esté incluida en tu ruta de compilación, deberás importar el .jar en el proyecto "/ libs "directorio. Abra la carpeta "app / libs" de su proyecto y luego arrastre y suelte el .jar en su posición.

• Abra su archivo build.gradle y agregue la biblioteca de YouTube como una dependencia del proyecto:

dependencias {implementación fileTree (dir: libs, include:) implementación com.android.support:appcompat-v7:28.0.0 implementación com.android.support:design:28.0.0 implementación com.android.support.constraint: restricción-diseño : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Agregue los siguientes // archivos de implementación (libs / YouTubeAndroidPlayerApi.jar)}

• Cuando se le solicite, sincronice sus archivos de Gradle.

Actualiza tu manifiesto

Si su aplicación se va a mostrar ninguna contenido de video en línea, entonces necesitará acceso a Internet.

Abra el manifiesto de su proyecto y agregue el permiso de Internet:

Para darle al usuario una idea de esa experiencia cinematográfica de pantalla panorámica, también estoy configurando MainActivity para que se inicie en modo horizontal:

Construyendo el diseño del reproductor de YouTube

Puede mostrar un video de YouTube usando:

• YouTubePlayerView. Si desea utilizar YouTubePlayerView en su diseño, deberá extender YouTubeBaseActivity en la clase de actividad correspondiente de ese diseño.
• YouTubePlayerFragment. Este es un fragmento que contiene un YouTubePlayerView. Si elige implementar un YouTubePlayerFragment, entonces no tiene que extenderse desde YouTubeBaseActivity.

Usaré YouTubePlayerView, así que abra el archivo "activity_main.xml" de su proyecto y agregue un widget YouTubePlayerView:

Implementando el reproductor de YouTube

A continuación, abra su MainActivity y complete las siguientes tareas:

1. Extienda YouTubeBaseActivity

Como estamos usando un YouTubePlayerView en nuestro diseño, necesitamos extender YouTubeBaseActivity:

clase pública MainActivity extiende YouTubeBaseActivity {

2. Inicialice el reproductor de YouTube

Inicializamos el reproductor de YouTube llamando a initialize () y pasando la clave API que creamos anteriormente:

YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, nuevo YouTubePlayer.OnInitializedListener () {

3. Implemente onInitializationSuccess y onInitializationFailure

Finalmente, debemos especificar cómo debe reaccionar nuestra aplicación, dependiendo de si la inicialización es un éxito o un fracaso. Si el reproductor de YouTube se inicializa con éxito, entonces podemos cargar nuestro video, pasando la identificación única del video:

public void onInitializationSuccess (proveedor YouTubePlayer.Provider, YouTubePlayer youTubePlayer, boolean b) {// Especifique la ID del video // youTubePlayer.loadVideo ("hJLBcViaX8Q");

A continuación, debemos decirle a nuestra aplicación cómo debe manejar las inicializaciones fallidas. Voy a mostrar un brindis:

public void onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Se produjo un error", Toast.LENGTH_SHORT) .show (); }

Reproducción de un video de YouTube: código completado

Agregue todo lo anterior a su MainActivity, y debería terminar con algo como esto:

importar android.os.Bundle; importar android.widget.Toast; importar com.google.android.youtube.player.YouTubeBaseActivity; importar com.google.android.youtube.player.YouTubeInitializationResult; importar com.google.android.youtube.player.YouTubePlayer; importar com.google.android.youtube.player.YouTubePlayerView; // Extiende YouTubeBaseActivity // public class MainActivity extiende YouTubeBaseActivity {// No olvides reemplazar esto con tu propia clave de API única // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inicialice el reproductor de YouTube // youTubePlayerView.initialize (YOUR_API_KEY, new YouTubePlayer.OnInitializedListener () {@Override // Si el reproductor de YouTube se inicializa correctamente ... // public void onInitializationSuccess (YouTubePlayer.Provider proveedor, YouTubePlayer youTubePlayer, boolean b) {//..entonces comience a reproducir el siguiente video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Si la inicialización falla ... // public void onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {//... luego muestra una tostada // Toast.makeText (MainActivity.this, "Se produjo un error", Toast.LENGTH_SHORT) .show ();}}); }}

Probar la API del reproductor de Android de YouTube

Puede probar esta aplicación en un teléfono inteligente o tableta Android, o en un AVD. Si usa un AVD, asegúrese de estar usando una imagen del sistema que incluya los servicios de Google Play. La aplicación de YouTube también debe instalarse en el AVD o dispositivo físico de Android, ya que la API de YouTube se basa en un servicio que se distribuye como parte de la aplicación de YouTube para Android.

Instale el proyecto en su dispositivo, y el video de YouTube debería comenzar a reproducirse automáticamente, tan pronto como se cargue la aplicación. Si toca el video, tendrá acceso a todos los controles familiares de YouTube que puede usar para pausar, reproducir, avanzar y retroceder el video.

Mostrar contenido de Dailymotion en un WebView

Cuando se trata de incrustar videos en su aplicación de Android, hay una amplia gama de plataformas para compartir videos entre las que puede elegir, y algunas plataformas incluso han producido SDK dedicados a ayudarlo a interactuar con su contenido, incluido Dailymotion.

El SDK de Dailymotion Player para Android proporciona una envoltura delgada alrededor del componente WebView de Android, que facilita la inserción de videos de Dailymotion en sus aplicaciones.

En esta sección, le mostraré cómo transmitir cualquier video desde el sitio web de Dailymotion, utilizando el SDK de Dailymotion Player de terceros.

Obtenga la identificación de video de Dailymotion

En primer lugar, dirígete a Dailymotion, busca un video que quieras mostrar y luego recupera su ID de video.

Usaré este video de lapso de tiempo de niebla, que tiene la siguiente URL:

www.dailymotion.com/video/x71jlg3

La ID del video es la cadena única de caracteres al final de su URL, por lo que mi ID de video es: x71jlg3.

Agregar el SDK Dailymotion

Como estamos usando el SDK Dailymotion, debemos declararlo como una dependencia del proyecto. Abra el archivo build.gradle de su proyecto y agregue lo siguiente:

dependencias {implementación fileTree (dir: libs, include:) // Agregue lo siguiente // implementación com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementación com.android.support:appcompat-v7:28.0.0 implementación com.android.support:design:28.0.0 implementación com.android.support.constraint: restrict-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Cuando se le solicite, seleccione "Sincronizar proyecto con archivos Gradle".

Tenga en cuenta que, de forma predeterminada, el SDK de Dailymotion solo le da acceso a los datos públicos de Dailymotion, como el título y la descripción de un video.Puede realizar algunas tareas adicionales registrando su aplicación con la plataforma Dailymotion, pero como solo queremos insertar un video, no debemos preocuparnos por registrar nuestra aplicación.

Si le interesa agregar más funcionalidad de Dailymotion a sus aplicaciones, puede obtener más información sobre cómo registrar su aplicación con Dailymotion, en los documentos oficiales.

Solicitar acceso a internet

Una vez más, estamos transmitiendo contenido desde la World Wide Web, por lo que nuestro proyecto requiere el permiso de Internet:

Cada actividad que muestra el contenido de Dailymotion debe tener un atributo "android: configChanges", por lo tanto, agregue lo siguiente a su MainActivity:

Agregar el widget PlayerWebView de Dailymotion

El componente principal del Dailymotion SDK es un elemento de la interfaz de usuario PlayerWebView, que proporciona una envoltura delgada alrededor del componente WebView de Android.

Exploraremos WebViews con más detalle en la siguiente sección, pero los WebViews esencialmente le brindan una forma de incrustar páginas web en su aplicación. Si no estuviéramos usando PlayerWebView especializado del SDK, entonces podríamos usar el componente WebView de vainilla de Android para mostrar una página web completa de Dailymotion dentro de nuestra aplicación.

En cambio, agreguemos un PlayerWebView a nuestro diseño:

Configurando nuestro Dailymotion PlayerWebView

Ahora que hemos implementado el widget PlayerWebView, necesitamos configurar el reproductor en nuestra clase de actividad correspondiente.

Abra su MainActivity y comience por obtener una referencia a PlayerWebView:

dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);

Luego, llame a "dailyMotionPlayer.load" y pásele el ID de video que recuperamos anteriormente:

dailyMotionPlayer.load ("x71jlg3");

Esto nos da lo siguiente:

importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; importar com.dailymotion.android.player.sdk.PlayerWebView; importar java.util.HashMap; import java.util.Map; clase pública MainActivity extiende AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // Recupere nuestro PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Mapa playerParams = new HashMap <> (); // Cargue el video con nuestros parámetros // playerParams.put ("key", "value"); // Pase el ID de video // dailyMotionPlayer.load ("x71jlg3"); }}

Instale su proyecto en un dispositivo o emulador físico de Android, y su video Dailymotion debería comenzar a reproducirse automáticamente.

Incrustar un video de Vimeo

Cuando se trata de incrustar contenido de video, generalmente querrás usar una API específica de plataforma o un SDK específico de plataforma siempre que sea posible. Pero, ¿qué sucede si no hay un SDK o API disponible para la plataforma de intercambio de videos que tiene en mente?

En estos escenarios, puede usar el componente WebView de Android para mostrar el video como una página web que está incrustada en el diseño de su Actividad. En esta sección final, le mostraré cómo incrustar un video desde la popular plataforma Vimeo, usando un WebView.

Además de mostrar contenido de video, WebViews puede ser útil en otros escenarios. Por ejemplo, imagine que tiene algún contenido que necesita actualizarse regularmente; alojar ese contenido en línea y luego mostrarlo en su aplicación a través de un WebView le brinda la flexibilidad de cambiar ese contenido en línea en cualquier momento, sin tener que publicar una nueva versión de su aplicación. Sin embargo, tenga cuidado al usar WebViews, ya que no admiten muchas de las funciones que normalmente esperaría de un navegador web independiente. En particular, las WebViews carecen de una barra de direcciones o controles de navegación, lo que puede dificultar la interacción de los usuarios con su contenido.

Antes de utilizar un WebView, siempre debe considerar si una solución alternativa podría ser más apropiada, por ejemplo, podría descargar el contenido en el navegador web predeterminado del dispositivo o implementar Chrome Custom Tabs.

Actualización del manifiesto

Como estamos transmitiendo un video desde Internet, necesitamos agregar el permiso de Internet a nuestro Manifiesto:

También voy a lanzar MainActivity en modo horizontal:

Agregar un WebView a nuestra interfaz de usuario

A continuación, agreguemos un WebView a nuestra aplicación. Podemos agregar el WebView al diseño de nuestra Actividad, o convertir toda la Actividad en un WebView, implementándolo en el método onCreate () de nuestra aplicación.

Voy a agregar un WebView al diseño de nuestra aplicación:

Elige tu video

Una vez más, necesitamos un video para mostrar, pero esta vez estamos no usando una identificación de video:

• Dirígete a Vimeo y elige un video que quieras usar; He optado por este lapso de invierno.
• Haga clic en el botón "Compartir".
• Seleccione el icono "Incrustar"; esto le proporcionará un código de inserción que debería verse así:

Este código proporciona la siguiente información:

• iframe Especifica que estamos incrustando otra página HTML dentro del contexto actual.
• src. La ruta del video, para que su aplicación sepa dónde encontrar este video.
• ancho / alto. Las dimensiones del video.
• Frontera del marco. Si se debe mostrar un borde alrededor del marco del video. Los valores posibles son borde (1) y sin borde (0).
• permitir pantalla completa. Esto permite que el video se muestre en modo de pantalla completa.

Voy a agregar este código de inserción a mi proyecto como una cadena, por lo que debe copiar / pegar esta información en la siguiente plantilla:

String vimeoVideo = "TU ENLACE VA AQUÍ';

Frustrantemente, necesitamos hacer algunos cambios antes de que el código de inserción sea compatible con nuestra aplicación de Android. Primero, necesitamos agregar algunos caracteres "" para que Android Studio no se queje de un formato incorrecto:

String vimeoVideo = "';

Finalmente, las dimensiones de video predeterminadas pueden ser demasiado grandes para algunas pantallas de teléfonos inteligentes Android.
En producción, normalmente experimenta con varias dimensiones para ver cuál ofrece los mejores resultados, en tantas configuraciones de pantalla diferentes como sea posible. Sin embargo, para ayudar a evitar que este artículo se salga de control, solo voy a usar lo siguiente, que debería proporcionar buenos resultados en la pantalla de su teléfono inteligente Android "típico":

String vimeoVideo = "';

Mostrar una página web en su aplicación de Android

Ahora que hemos creado nuestro diseño y tenemos nuestro HTML listo, abra su MainActivity y permita implementar nuestro WebView.

Comience agregando la cadena HTML:

String vimeoVideo = "';

A continuación, debemos cargar la página web anterior en nuestro WebView, utilizando el método loadUrl ():

webView.loadUrl (request.getUrl (). toString ());

JavaScript está deshabilitado de forma predeterminada, por lo que tendremos que habilitarlo en nuestra WebView.

Cada vez que crea un WebView, se le asigna automáticamente un conjunto de ajustes web predeterminados. Recuperaremos este objeto WebSettings, usando el método getSettings (), y luego habilitaremos JavaScript, usando setJavaScriptEnabled ().

WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (verdadero);

Después de agregar todo esto a su MainActivity, su código debería verse así:

importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; importar android.webkit.WebResourceRequest; importar android.webkit.WebSettings; importar android.webkit.WebView; importar android.webkit.WebViewClient; clase pública MainActivity extiende AppCompatActivity {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (new WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl (request.getUrl (). ToString ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Probar tu aplicación Vimeo

Ya conoce el ejercicio: instale este proyecto en un dispositivo Android físico o AVD. WebView no está configurado para reproducirse automáticamente, por lo que deberá tocar el video para revelar los controles multimedia de Vimeo. Luego puede reproducir, pausar, rebobinar y adelantar el video para asegurarse de que funciona correctamente.

Terminando

En este artículo, le mostré cómo agregar videos de YouTube, Vimeo y Dailymotion a sus aplicaciones, utilizando API y SDK específicos de la plataforma, y ​​el propio componente WebView de Android. También le mostré cómo agrupar un archivo de video con su aplicación, para que pueda almacenarse y reproducirse localmente.

¿Cuál es su forma favorita de mostrar contenido multimedia a sus usuarios? ¡Háganos saber en los comentarios a continuación!