Reproducir y pausar un video

Reproducir videos es una tarea común en el desarrollo de aplicaciones, y las aplicaciones de Flutter no son una excepción. Para reproducir videos, el equipo de Flutter proporciona el plugin video_player . Puedes usar el plugin video_player para reproducir videos almacenados en el sistema de archivos, como un asset, o desde internet.

En iOS, el plugin video_player hace uso de AVPlayer para manejar la reproducción. En Android, utiliza ExoPlayer.

Esta receta demuestra cómo usar el paquete video_player para transmitir un video desde internet con controles básicos de reproducción y pausa usando los siguientes pasos:

1. Añade la dependencia video_player.
2. Añade permisos a tu aplicación.
3. Crea e inicializa un VideoPlayerController.
4. Muestra el reproductor de video.
5. Reproduce y pausa el video.

Esta receta depende de un plugin de Flutter: video_player. Primero, añade esta dependencia a tu proyecto.

Para añadir el paquete video_player como una dependencia, ejecuta flutter pub add:

$ flutter pub add video_player

A continuación, actualiza tus configuraciones de android y ios para asegurarte de que tu aplicación tenga los permisos correctos para transmitir videos desde internet.

Añade el siguiente permiso al archivo AndroidManifest.xml justo después de la definición de <application>. El archivo AndroidManifest.xml se encuentra en <project root>/android/app/src/main/AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>
​
    </application>
​
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

Para iOS, añade lo siguiente al archivo Info.plist que se encuentra en <project root>/ios/Runner/Info.plist.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Si utilizas videos basados en red, añade el permiso (entitlement) com.apple.security.network.client.

El desarrollo web con Flutter no es compatible con dart:io, así que evita usar el constructor VideoPlayerController.file para el plugin. El uso de este constructor intenta crear un VideoPlayerController.file que lanza un UnimplementedError.

Los diferentes navegadores web pueden tener diferentes capacidades de reproducción de video, como formatos compatibles o reproducción automática. Consulta el paquete video_player_web para obtener más información específica de la web.

La opción VideoPlayerOptions.mixWithOthers no se puede implementar en web, al menos por el momento. Si usas esta opción en web, se ignorará silenciosamente.

Ahora que tienes el plugin video_player instalado con los permisos correctos, crea un VideoPlayerController. La clase VideoPlayerController te permite conectarte a diferentes tipos de videos y controlar la reproducción.

Antes de que puedas reproducir videos, también debes inicializar el controlador. Esto establece la conexión con el video y prepara el controlador para la reproducción.

Para crear e inicializar el VideoPlayerController haz lo siguiente:

1. Crea un StatefulWidget con una clase State complementaria
2. Añade una variable a la clase State para almacenar el VideoPlayerController
3. Añade una variable a la clase State para almacenar el Future devuelto por VideoPlayerController.initialize
4. Crea e inicializa el controlador en el método initState
5. Destruye (dispose) el controlador en el método dispose

class VideoPlayerScreen extends StatefulWidget {
  const VideoPlayerScreen({super.key});
​
  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}
​
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;
​
  @override
  void initState() {
    super.initState();
​
    // Create and store the VideoPlayerController. The VideoPlayerController
    // offers several different constructors to play videos from assets, files,
    // or the internet.
    _controller = VideoPlayerController.networkUrl(
      Uri.parse(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
      ),
    );
​
    _initializeVideoPlayerFuture = _controller.initialize();
  }
​
  @override
  void dispose() {
    // Ensure disposing of the VideoPlayerController to free up resources.
    _controller.dispose();
​
    super.dispose();
  }
​
  @override
  Widget build(BuildContext context) {
    // Complete the code in the next step.
    return Container();
  }
}

Ahora, muestra el video. El plugin video_player proporciona el Widget VideoPlayer para mostrar el video inicializado por el VideoPlayerController. Por defecto, el Widget VideoPlayer ocupa tanto espacio como sea posible. Esto a menudo no es ideal para los videos porque están diseñados para mostrarse en una relación de aspecto específica, como 16x9 o 4x3.

Por lo tanto, envuelve el Widget VideoPlayer en un Widget AspectRatio para asegurarte de que el video tenga las proporciones correctas.

Además, debes mostrar el Widget VideoPlayer después de que se complete el _initializeVideoPlayerFuture(). Usa FutureBuilder para mostrar un indicador de carga hasta que el controlador termine de inicializarse. Nota: la inicialización del controlador no inicia la reproducción.

// Use a FutureBuilder to display a loading spinner while waiting for the
// VideoPlayerController to finish initializing.
FutureBuilder(
  future: _initializeVideoPlayerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the VideoPlayerController has finished initialization, use
      // the data it provides to limit the aspect ratio of the video.
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        // Use the VideoPlayer widget to display the video.
        child: VideoPlayer(_controller),
      );
    } else {
      // If the VideoPlayerController is still initializing, show a
      // loading spinner.
      return const Center(child: CircularProgressIndicator());
    }
  },
)

Por defecto, el video comienza en un estado de pausa. Para iniciar la reproducción, llama al método play() proporcionado por el VideoPlayerController. Para pausar la reproducción, llama al método pause() .

Para este ejemplo, añade un FloatingActionButton a tu aplicación que muestre un icono de reproducción o pausa según la situación. Cuando el usuario toque el botón, reproduce el video si está actualmente pausado, o paúsalo si se está reproduciendo.

FloatingActionButton(
  onPressed: () {
    // Wrap the play or pause in a call to `setState`. This ensures the
    // correct icon is shown.
    setState(() {
      // If the video is playing, pause it.
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // If the video is paused, play it.
        _controller.play();
      }
    });
  },
  // Display the correct icon depending on the state of the player.
  child: Icon(
    _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
  ),
)