Cara Menampilkan Video Dengan Flutter

Initekno.com – Hai teknoria, apa kabarnya, jika anda adalah programmer android native, tidak ada salahnya untuk mencoba belajar flutter. Kali ini saya akan membagikan sebuah tutorial tentang cara menampilkan video di flutter dengan memanfaatkan data cloud dan data lokal. Sebagian orang akan mudah menemukan tutorial tentang menampilkan video di flutter, bahkan pada situs dokumentasi resmi flutter telah dibahas penggunaan video player tersebut. Lantas apa itu video player dalam flutter?…

Video player adalah dependensi yang dibuat dengan flutter untuk mempermudah dalam memanipulasi video, seperti play, pause dan mode full screen. Dalam studi kasus kali ini saya akan menggunakan 2 dependensi sekaligus yaitu video_player dan chewie. Untuk lebih jelasnya silahkan tambahkan kedua dependensi tersebut pada pubspec.yaml letak file tersebut ada di dalam root folder project flutter kamu.

Baca artikel tentang membuat project di flutter

Tutorial Flutter Part 1 # Mengenal dan Instalasi Flutter

Maka isi pubspec.yaml diatas adalah seperti berikut ini:

name: chewie_tutorial
description: A new Flutter project.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  video_player: ^0.10.2+5 #TAMBAHAN INITEKNO.COM

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  chewie: ^0.9.7 #TAMBAHAN INITEKNO.COM


# For information on the generic Dart part of this file, see the
# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets: #TAMBAHAN INITEKNO.COM
   - videos/IntroVideo.mp4 #TAMBAHAN INITEKNO.COM

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.io/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.io/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.io/custom-fonts/#from-packages

name: chewie_tutorial

description: A new Flutter project.

# The following defines the version and build number for your application.

# A version number is three numbers separated by dots, like 1.2.43

# followed by an optional build number separated by a +.

# Both the version and the builder number may be overridden in flutter

# build by specifying --build-name and --build-number, respectively.

# In Android, build-name is used as versionName while build-number used as versionCode.

# Read more about Android versioning at https://developer.android.com/studio/publish/versioning

# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.

# Read more about iOS versioning at

# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html

version: 1.0.0+1

environment:

sdk: ">=2.1.0 <3.0.0"

dependencies:

flutter:

sdk: flutter

video_player: ^0.10.2+5 #TAMBAHAN INITEKNO.COM

# The following adds the Cupertino Icons font to your application.

# Use with the CupertinoIcons class for iOS style icons.

cupertino_icons: ^0.1.2

dev_dependencies:

flutter_test:

sdk: flutter

chewie: ^0.9.7 #TAMBAHAN INITEKNO.COM

# For information on the generic Dart part of this file, see the

# following page: https://www.dartlang.org/tools/pub/pubspec

# The following section is specific to Flutter.

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the material Icons class.

uses-material-design: true

# To add assets to your application, add an assets section, like this:

assets: #TAMBAHAN INITEKNO.COM

- videos/IntroVideo.mp4 #TAMBAHAN INITEKNO.COM

# An image asset can refer to one or more resolution-specific "variants", see

# https://flutter.io/assets-and-images/#resolution-aware.

# For details regarding adding assets from package dependencies, see

# https://flutter.io/assets-and-images/#from-packages

# To add custom fonts to your application, add a fonts section here,

# in this "flutter" section. Each entry in this list should have a

# "family" key with the font family name, and a "fonts" key with a

# list giving the asset and other descriptors for the font. For

# example:

# fonts:

# - family: Schyler

# fonts:

# - asset: fonts/Schyler-Regular.ttf

# - asset: fonts/Schyler-Italic.ttf

# style: italic

# - family: Trajan Pro

# fonts:

# - asset: fonts/TrajanPro.ttf

# - asset: fonts/TrajanPro_Bold.ttf

# weight: 700

# For details regarding fonts from package dependencies,

# see https://flutter.io/custom-fonts/#from-packages

tambahan itu saya tandai dengan komentar #TAMBAHAN INITEKNO.COM, selebihnya itu adalah kode default dari flutter.

Pada folder lib, silahkan cari file main.dart dan ubah kodenya menjadi seperti berikut ini :

import 'package:chewie_tutorial/chewie_list_item.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Kajian Ust.Muhtarom'),
      ),
      body: ListView(
        children: <Widget>[
          ChewieListItem(
            // url video 1
            //load video pada folder videos di lokal
            videoPlayerController: VideoPlayerController.asset(
              'videos/IntroVideo.mp4',
            ),
          ),
          ChewieListItem(
            // url video 2
            videoPlayerController: VideoPlayerController.network(
              'https://r5---sn-npoeeney.googlevideo.com/videoplayback?expire=1574366772&ei=1JnWXZ2MMvrBz7sPm7KZ4AQ&ip=183.88.16.231&id=o-ALa8v8EKrsgged494My0jBkybmDknGXJEX00o4Lah9fs&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=122624327&ratebypass=yes&dur=2734.265&lmt=1418986260803611&fvip=8&fexp=23842630,23860862&c=WEB&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRAIgY1_J9LcFG96gPi3wajQPdK0d5M1BpUhQ1HyE0Y9-ks4CIH53vy9uFLeenJvht-wRmoB4z5LlUg5rAuMnaVsDVVww&video_id=H0YN4As_yks&title=Kajian+Apabila+Sudah+Ada+Dalil+Maka+Batal+Seluruh+Pendapat+-+Ustadz+Muhtarom+-+10+Juli+2014&rm=sn-w5nuxa-jxpe7r,sn-w5nuxa-c33ld7r,sn-30ald76&req_id=552463c409cba3ee&redirect_counter=3&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=30&mn=sn-npoeeney&ms=nxu&mt=1574345081&mv=m&mvi=4&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgEN6gZkPci4YVRJl6BpSTnz1hNdGTHA0Ymv3_pf2XdckCIQChHSFHxnfzzcuSGigk2_sddL5By13SmAndJhWVfm_SzQ==',
            ),
          ),
          ChewieListItem(
            // url video 3
            videoPlayerController: VideoPlayerController.network(
              'https://r2---sn-npoe7ney.googlevideo.com/videoplayback?expire=1574368929&ei=QaLWXZinBLHmhAem6L6IDw&ip=81.171.74.160&id=o-AN8sCgvBW0oJ80FqQdWcKer31PaJS1MXoXVOn8DMsEBD&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=295091921&ratebypass=yes&dur=6372.507&lmt=1540449603285657&fvip=2&fexp=23842630,23860862&c=WEB&txp=5431432&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRQIhAJKSMgCTYEf5wUA6z6Lehe9qlp-Ejw-GBN50Zdk3teIhAiAwp2I4O_yRiaak-kPQlZT10tIDyNOx-sIxwr5fCbeQ4Q%3D%3D&video_id=empVFNXobRo&title=Ustadz+Muhtarom-+Telah+Nyata+Sabda+Rasulullah&redirect_counter=1&rm=sn-aiges77l&req_id=c729fa43caaca3ee&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=31&mn=sn-npoe7ney&ms=au&mt=1574347198&mv=m&mvi=1&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRAIgZNbytxMvyYwCZMCoQ9gnpvkCVemHxaKSCYSPd91QeHwCIHtMiRr-TdKkz0iNYI9CcUtnOqLllzTUxq0-Bshyf3RE',
            ),
          ),
          ChewieListItem(
            // url video 4
            videoPlayerController: VideoPlayerController.network(
              'https://r1---sn-npoe7nes.googlevideo.com/videoplayback?expire=1574368074&ei=6p7WXZmiN5L-owOS_4LIDg&ip=119.76.173.7&id=o-ANBmrIicgWJIsfJ8eksyIGtFAox--OJDvK7Fa_3E-RP_&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=239544974&ratebypass=yes&dur=5386.866&lmt=1573931204148990&fvip=1&fexp=23842630&c=WEB&txp=1311222&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRQIgNtGM--fz8IDN7pclfGSyEUB2NG5mqJtrzoLTbuQbidkCIQC0-MP9wAQZtBfguEzhSIhjQx4-n-oYGlTHFV6Voro1Vw%3D%3D&video_id=M_VbeOS8do4&title=Ustadz+Muhtarom-+Wasiat+Rasulullah&rm=sn-5np5po4v-c33s77e,sn-npos77e&req_id=2a4e37c325bda3ee&redirect_counter=2&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=30&mn=sn-npoe7nes&ms=nxu&mt=1574346339&mv=m&mvi=0&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgZd6_TaH67TeYc5OwCOIvlXyXEZpDuSs0D7ahYoaxZgACIQDF9BcKeAOayGFHtsIIsIR0-ednxJdjG0BDBmoFrCaI1g==',
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:chewie_tutorial/chewie_list_item.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.teal,

home: MyHomePage(),

);

}

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('List Kajian Ust.Muhtarom'),

body: ListView(

children: <Widget>[

ChewieListItem(

// url video 1

//load video pada folder videos di lokal

videoPlayerController: VideoPlayerController.asset(

'videos/IntroVideo.mp4',

ChewieListItem(

// url video 2

videoPlayerController: VideoPlayerController.network(

'https://r5---sn-npoeeney.googlevideo.com/videoplayback?expire=1574366772&ei=1JnWXZ2MMvrBz7sPm7KZ4AQ&ip=183.88.16.231&id=o-ALa8v8EKrsgged494My0jBkybmDknGXJEX00o4Lah9fs&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=122624327&ratebypass=yes&dur=2734.265&lmt=1418986260803611&fvip=8&fexp=23842630,23860862&c=WEB&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRAIgY1_J9LcFG96gPi3wajQPdK0d5M1BpUhQ1HyE0Y9-ks4CIH53vy9uFLeenJvht-wRmoB4z5LlUg5rAuMnaVsDVVww&video_id=H0YN4As_yks&title=Kajian+Apabila+Sudah+Ada+Dalil+Maka+Batal+Seluruh+Pendapat+-+Ustadz+Muhtarom+-+10+Juli+2014&rm=sn-w5nuxa-jxpe7r,sn-w5nuxa-c33ld7r,sn-30ald76&req_id=552463c409cba3ee&redirect_counter=3&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=30&mn=sn-npoeeney&ms=nxu&mt=1574345081&mv=m&mvi=4&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgEN6gZkPci4YVRJl6BpSTnz1hNdGTHA0Ymv3_pf2XdckCIQChHSFHxnfzzcuSGigk2_sddL5By13SmAndJhWVfm_SzQ==',

ChewieListItem(

// url video 3

videoPlayerController: VideoPlayerController.network(

'https://r2---sn-npoe7ney.googlevideo.com/videoplayback?expire=1574368929&ei=QaLWXZinBLHmhAem6L6IDw&ip=81.171.74.160&id=o-AN8sCgvBW0oJ80FqQdWcKer31PaJS1MXoXVOn8DMsEBD&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=295091921&ratebypass=yes&dur=6372.507&lmt=1540449603285657&fvip=2&fexp=23842630,23860862&c=WEB&txp=5431432&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRQIhAJKSMgCTYEf5wUA6z6Lehe9qlp-Ejw-GBN50Zdk3teIhAiAwp2I4O_yRiaak-kPQlZT10tIDyNOx-sIxwr5fCbeQ4Q%3D%3D&video_id=empVFNXobRo&title=Ustadz+Muhtarom-+Telah+Nyata+Sabda+Rasulullah&redirect_counter=1&rm=sn-aiges77l&req_id=c729fa43caaca3ee&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=31&mn=sn-npoe7ney&ms=au&mt=1574347198&mv=m&mvi=1&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRAIgZNbytxMvyYwCZMCoQ9gnpvkCVemHxaKSCYSPd91QeHwCIHtMiRr-TdKkz0iNYI9CcUtnOqLllzTUxq0-Bshyf3RE',

ChewieListItem(

// url video 4

videoPlayerController: VideoPlayerController.network(

'https://r1---sn-npoe7nes.googlevideo.com/videoplayback?expire=1574368074&ei=6p7WXZmiN5L-owOS_4LIDg&ip=119.76.173.7&id=o-ANBmrIicgWJIsfJ8eksyIGtFAox--OJDvK7Fa_3E-RP_&itag=18&source=youtube&requiressl=yes&mime=video%2Fmp4&gir=yes&clen=239544974&ratebypass=yes&dur=5386.866&lmt=1573931204148990&fvip=1&fexp=23842630&c=WEB&txp=1311222&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cmime%2Cgir%2Cclen%2Cratebypass%2Cdur%2Clmt&sig=ALgxI2wwRQIgNtGM--fz8IDN7pclfGSyEUB2NG5mqJtrzoLTbuQbidkCIQC0-MP9wAQZtBfguEzhSIhjQx4-n-oYGlTHFV6Voro1Vw%3D%3D&video_id=M_VbeOS8do4&title=Ustadz+Muhtarom-+Wasiat+Rasulullah&rm=sn-5np5po4v-c33s77e,sn-npos77e&req_id=2a4e37c325bda3ee&redirect_counter=2&cms_redirect=yes&ipbypass=yes&mip=180.242.182.248&mm=30&mn=sn-npoe7nes&ms=nxu&mt=1574346339&mv=m&mvi=0&pl=22&lsparams=ipbypass,mip,mm,mn,ms,mv,mvi,pl&lsig=AHylml4wRQIgZd6_TaH67TeYc5OwCOIvlXyXEZpDuSs0D7ahYoaxZgACIQDF9BcKeAOayGFHtsIIsIR0-ednxJdjG0BDBmoFrCaI1g==',

);

}

Buat file baru lagi, simpan pada folder lib dan beri nama file itu dengan chewie_list_item.dart kemudian tuliskan kode seperti berikut ini :

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class ChewieListItem extends StatefulWidget {
  final VideoPlayerController videoPlayerController;
  final bool looping;

  ChewieListItem({
    @required this.videoPlayerController,
    this.looping,
    Key key,
  }) : super(key: key);

  @override
  _ChewieListItemState createState() => _ChewieListItemState();
}

class _ChewieListItemState extends State<ChewieListItem> {
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    _chewieController = ChewieController(
      videoPlayerController: widget.videoPlayerController,
      aspectRatio: 16 / 9,
      autoInitialize: true,
      errorBuilder: (context, errorMessage) {
        return Center(
          child: Text(
            errorMessage,
            style: TextStyle(color: Colors.white),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Chewie(
        controller: _chewieController,
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    widget.videoPlayerController.dispose();
    _chewieController.dispose();
  }
}

import 'package:chewie/chewie.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

class ChewieListItem extends StatefulWidget {

final VideoPlayerController videoPlayerController;

final bool looping;

ChewieListItem({

@required this.videoPlayerController,

this.looping,

Key key,

}) : super(key: key);

@override

_ChewieListItemState createState() => _ChewieListItemState();

}

class _ChewieListItemState extends State<ChewieListItem> {

ChewieController _chewieController;

@override

void initState() {

super.initState();

_chewieController = ChewieController(

videoPlayerController: widget.videoPlayerController,

aspectRatio: 16 / 9,

autoInitialize: true,

errorBuilder: (context, errorMessage) {

return Center(

child: Text(

errorMessage,

style: TextStyle(color: Colors.white),

);

}

@override

Widget build(BuildContext context) {

return Padding(

padding: const EdgeInsets.all(8.0),

child: Chewie(

controller: _chewieController,

);

}

@override

void dispose() {

super.dispose();

widget.videoPlayerController.dispose();

_chewieController.dispose();

}

Nah, jangan lupa untuk memberikan permission internet kepada file AndroidManifest.xml

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

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

Letaknya ada pada direktori android/app/main

Terakhir, buat folder dengan nama videos dan pastikan terdapat video di dalamnya. video itu nantinya akan kita load pada kode berikut ini :

 ChewieListItem(
            // url video 1
            //load video pada folder videos di lokal
            videoPlayerController: VideoPlayerController.asset(
              'videos/IntroVideo.mp4',
            ),
          ),

ChewieListItem(

// url video 1

//load video pada folder videos di lokal

videoPlayerController: VideoPlayerController.asset(

'videos/IntroVideo.mp4',

Letak kode ini ada di dalam main.dart

dan konsekuensinya anda harus menambahkan video tersebut pada pubspec.yaml agar bisa di load videonya.

# To add assets to your application, add an assets section, like this: 
 assets: #TAMBAHAN INITEKNO.COM 
  - videos/IntroVideo.mp4 #TAMBAHAN INITEKNO.COM

# To add assets to your application, add an assets section, like this:

assets: #TAMBAHAN INITEKNO.COM

- videos/IntroVideo.mp4 #TAMBAHAN INITEKNO.COM

Sekarang coba jalankan aplikasi yang kamu buat dengan cara ketik pada terminal

flutter run

1	flutter run

Pastikan semua komponen berjalan dengan baik, caranya cek dengan mengetik pada terminal

flutter doctor

1	flutter doctor

Akhir-akhir ini flutter sering melakukan upgrade engine mereka, alangkah baiknya kamu coba upgrade dulu, ketik pada terminal kode seperti berikut ini :

flutter upgrade --force

1	flutter upgrade --force

Sekian artikel yang singkat ini, semoga bermanfaat buat kamu. jika ada error dalam kode kamu silahkan tulis di komentar atau bisa kirim email ke saefulmujab.nf@gmail.com. Mungkin jika kamu berminat untuk mempelajari lebih lanjut tentang flutter, kamu bisa bermain kode project yang saya buat di sini :

My Portofolio # Aplikasi Mobile Android dan ios Megatim1App

Tinggalkan Balasan Batalkan balasan