Lettore video/audio in Flutter con potenti controlli

Blog

Lettore video/audio in Flutter con potenti controlli

Lettore video/audio in Flutter con potenti controlli

Come possiamo riprodurre i video in Flutter?

C'è una libreria direttamente dal team di Flutter chiamata semplicemente lettore video . Questa libreria, tuttavia, è completamente ridotta all'osso. Sebbene possa riprodurre video, spetta a te aggiungere controlli di riproduzione video e modificarne lo stile. C'è un'opzione migliore che viene fornita in bundle con l'interfaccia utente come ti aspetteresti sia su Android che su iOS: Chewie. - Chewie utilizza il pacchetto video_player proprietario dietro le quinte. Semplifica solo il processo di riproduzione video.



Configurazione del progetto

Importazione di pacchetti,

dependencies: flutter: sdk: flutter chewie: ^0.9.7

Riproduzione di video

Chewie (e video_player per quella materia) può riprodurre video da 3 fonti: risorse, file e rete. Il bello è che non è necessario scrivere molto codice per modificare l'origine dati. Passare da una risorsa a un video di rete è una questione di pochi tasti. Diamo prima un'occhiata alle risorse.



  • Configurazione dei video delle risorse

Le risorse sono semplicemente file che sono prontamente disponibili per l'utilizzo da parte della tua app. Vengono raggruppati insieme al file dell'app dopo averlo creato per il rilascio. Per configurare le risorse, è sufficiente creare una cartella nella radice del progetto e chiamarla, ad esempio, video. Quindi trascina lì il file video desiderato.

skype per il download di ubuntu



Per far conoscere a Flutter tutte le risorse disponibili, devi specificarle nel file pubspec. qui ho aggiunto tutte le dipendenze necessarie nel progetto.

dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.3 chewie: ^0.9.10 file_picker: ^1.13.0+1 audioplayers: ^0.15.1 fluttertoast: ^7.0.2

Utilizzo del widget Chewie

Ora arriva il momento di iniziare a riprodurre i video. Per questo Chewie fornisce il proprio widget che è, come ho già detto, solo un wrapper in cima a VideoPlayer che proviene direttamente dal team di Flutter.

Poiché vogliamo riprodurre più video visualizzati in un ListView, sarà la cosa migliore per mettere tutte le cose relative alla riproduzione di video nel proprio widget. Inoltre, poiché le risorse del lettore video devono essere rilasciate, è necessario creare uno StatefulWidget per ottenere il metodo dispose().

creiamo videos_list.dart,

come controllare la stringa vuota in javascript
import 'package:chewie/chewie.dart'; import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; class VideosList extends StatefulWidget { final VideoPlayerController videoPlayerController; final bool looping; const VideosList( {Key key, @required this.videoPlayerController, this.looping}) : super(key: key); @override _VideosListState createState() => _VideosListState(); } class _VideosListState extends State { ChewieController videosController; @override void initState() { super.initState(); videosController = ChewieController( videoPlayerController: widget.videoPlayerController, aspectRatio: 16 / 9, autoInitialize: true, looping: widget.looping, errorBuilder: (context, errorMessage) { return Center(child: progressBar() ); }, ); } Widget progressBar() { return CircularProgressIndicator(); } @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(8.0), child: Chewie( controller: videosController, ), ); } @override void dispose() { super.dispose(); // IMPORTANT to dispose of all the used resources // widget.videoPlayerController.dispose(); videosController.dispose(); } }

Per riprodurre i video all'interno di un ListView, non è necessario eseguire molto lavoro aggiuntivo. Con tutte le cose chewie nel suo widget separato, creiamo un MyHomePage StatelessWidget.

in main.dart, aggiunti tutti i componenti necessari necessari nel progetto

import 'package:audioplayers/audioplayers.dart'; import 'package:file_picker/file_picker.dart'; import 'package:flutter/material.dart'; import 'package:video_app/videos_list.dart'; import 'package:video_player/video_player.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), debugShowCheckedModeBanner: false, ); } } int status = 0; AudioPlayer player = AudioPlayer(); class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.purple[50], appBar: AppBar( leading: Icon( Icons.play_circle_filled, size: 45, ), backgroundColor: Colors.deepPurple, title: Text('Music Player'), actions: [ IconButton(icon: Icon(Icons.next_week), onPressed: () {}), IconButton( icon: Icon(Icons.new_releases), onPressed: () { Fluttertoast.showToast( msg: 'New features coming soon!', toastLength: Toast.LENGTH_LONG, gravity: ToastGravity.BOTTOM, timeInSecForIosWeb: 1, backgroundColor: Colors.deepPurple, textColor: Colors.white, fontSize: 16.0); }), ], ), body: Stack(children: [ ListView( children: [ VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/Ansible.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/Specialist_In_Python.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/AnsiblePro.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.network( 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/OpenShift.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/Flutter.MP4', ), looping: true, ), ], ), ]), floatingActionButton: FloatingActionButton( child: Icon(Icons.audiotrack), elevation: 15, backgroundColor: Colors.deepPurple, onPressed: () async { if (status == 1) { status = await player.stop(); status = 0; } else { String filePath = await FilePicker.getFilePath(); status = await player.play(filePath, isLocal: true); //also can be played from the assets... //but users must have choices so local file is used!! } }, )); } }

Qui abbiamo aggiunto alcuni video dalle risorse e alcuni dalla rete

VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/Ansible.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/Specialist_In_Python.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/AnsiblePro.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.network( 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/OpenShift.MP4', ), looping: true, ), VideosList( videoPlayerController: VideoPlayerController.asset( 'videos/Flutter.MP4', ), looping: true, ),

Per riprodurre l'audio

hai due opzioni

noi usiamo lettori audio collegare.

1) è facile da implementare, ma qui in questo progetto abbiamo usato un approccio diverso all'audioplayer. poiché volevo rendere questa app un'app a pagina singola, non ho usato l'intento di passare da un'attività all'altra, la riproduzione del nemico e l'interruzione dell'audio ho usato il pulsante mobile singolo con quel livello di capacità, ecco il frammento di codice per questo,
floatingActionButton: FloatingActionButton( child: Icon(Icons.audiotrack), elevation: 15, backgroundColor: Colors.deepPurple, onPressed: () async { if (status == 1) { status = await player.stop(); status = 0; } else { String filePath = await FilePicker.getFilePath(); status = await player.play(filePath, isLocal: true); //also can be played from the assets... //but users must have choices so local file is used!! } }, )
2) qui ho implementato l'interfaccia utente dedicata per l'audio e le sue funzionalità come i pulsanti di riproduzione, pausa e arresto con durata,

per il poster audio per ora stiamo usando immagini statiche, aggiungi le tue immagini nella cartella principale delle immagini in questo modo,

laravel 8 make:auth

e aggiungi anche il percorso delle risorse al tuo file pubspec.yml,

Per l'implementazione delle funzionalità audio e dell'interfaccia utente, fare riferimento a audio.dart,

import 'pacchetto:audioplayers/audioplayers.dart'; import 'pacchetto:file_picker/file_picker.dart'; import 'pacchetto:flutter/material.dart'; import 'pacchetto:flutter/rendering.dart'; myApp() { return MaterialApp( home: HomePage(), debugShowCheckedModeBanner: false, ); } class HomePage estende StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState estende State { AudioPlayer player = AudioPlayer(); bool isPlaying = false; String currentTime = '0:00:00'; Stringa completeTime = '0:00:00'; @override void initState() { super.initState(); player.onAudioPositionChanged.listen((Duration duration) { setState(() { currentTime = duration.toString().split('.')[0]; }); }); player.onDurationChanged.listen((Durata durata) { setState(() { completeTime = duration.toString().split('.')[0]; }); }); } Widget build(BuildContext context) { return Scaffold( body: Container( width: double.infinity, height: double.infinity, color: Colors.blueGrey[200], child: Column( children: [ Card( shadowColor: Colors.deepPurple) [900], elevazione: 20, margine: EdgeInsets.only (in alto: 40, a sinistra: 30, a destra: 30), figlio: Image.asset('images/wallhaven.jpg'>   

come riparare il mio facebook

Chewie è un pacchetto Flutter volto a semplificare il processo di riproduzione dei video. Invece di dover gestire i pulsanti di avvio, arresto e pausa, facendo la sovrapposizione per visualizzare l'avanzamento del video, Chewie fa queste cose per te.

Ecco l'output finale del nostro progetto

Clic qui per l'uscita sonora.

funzionalità future da aggiungere

  • può aggiungere audio/video dall'URL di rete (input utente).
  • aggiungi la riproduzione/pausa e la durata in minuti alla parte audio.
  • condividere gli screenshot dell'app.
  • notifica di ciò che stai giocando.

Alcune risorse per iniziare:

Per assistenza su come iniziare con Flutter, consulta il nostro documentazione in linea , che offre esercitazioni, esempi, indicazioni sullo sviluppo per dispositivi mobili e un riferimento completo all'API.

Scarica i dettagli:

Autore: hrshmistry

Codice sorgente: https://github.com/hrshmistry/Video-Player

#flutter #dart #mobile-apps