Flutter is unable to display video
Update:
Nota Bene: In the sample below, you can comment out the line trying to load the srt subtitles file (
closedCaptionFile: _loadCaptions,
).
Change the following in your pubspec.yaml to video_player: ^2.1.15
Note - Also, are you trying to run this in iOS or Android? Make sure you open the Runner.xcworkspace file and perform the standard Xcode routines. Make sure that the Runner project and the pods project is visible. Try running
flutter build ios
from the terminal.
Then re-run flutter pub get
or click get Dependencies in the UI. I'd also make a demo project (stub - flutter create --org com.yoursite stub01
) and add the sample provided to see if the online sample is working.
Original:
Here is the complete sample from the plugin website for the video_player. You can paste it into your environment to be certain that everything is working. You should also make sure that you are following the setup steps where you give your iOS/Android app permission to access the internet (see the installation notes on the readme section of the website). I'd also make sure to run flutter upgrade
on your terminal.
// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// ignore_for_file: public_member_api_docs
/// An example of using the plugin, controlling lifecycle and playback of the
/// video.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() {
runApp(
MaterialApp(
home: _App(),
),
);
}
class _App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
key: const ValueKey<String>('home_page'),
appBar: AppBar(
title: const Text('Video player example'),
actions: <Widget>[
IconButton(
key: const ValueKey<String>('push_tab'),
icon: const Icon(Icons.navigation),
onPressed: () {
Navigator.push<_PlayerVideoAndPopPage>(
context,
MaterialPageRoute<_PlayerVideoAndPopPage>(
builder: (BuildContext context) => _PlayerVideoAndPopPage(),
),
);
},
)
],
bottom: const TabBar(
isScrollable: true,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud),
text: "Remote",
),
Tab(icon: Icon(Icons.insert_drive_file), text: "Asset"),
Tab(icon: Icon(Icons.list), text: "List example"),
],
),
),
body: TabBarView(
children: <Widget>[
_BumbleBeeRemoteVideo(),
_ButterFlyAssetVideo(),
_ButterFlyAssetVideoInList(),
],
),
),
);
}
}
class _ButterFlyAssetVideoInList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
_ExampleCard(title: "Item a"),
_ExampleCard(title: "Item b"),
_ExampleCard(title: "Item c"),
_ExampleCard(title: "Item d"),
_ExampleCard(title: "Item e"),
_ExampleCard(title: "Item f"),
_ExampleCard(title: "Item g"),
Card(
child: Column(children: <Widget>[
Column(
children: <Widget>[
const ListTile(
leading: Icon(Icons.cake),
title: Text("Video video"),
),
Stack(
alignment: FractionalOffset.bottomRight +
const FractionalOffset(-0.1, -0.1),
children: <Widget>[
_ButterFlyAssetVideo(),
Image.asset('assets/flutter-mark-square-64.png'),
]),
],
),
])),
_ExampleCard(title: "Item h"),
_ExampleCard(title: "Item i"),
_ExampleCard(title: "Item j"),
_ExampleCard(title: "Item k"),
_ExampleCard(title: "Item l"),
],
);
}
}
/// A filler card to show the video in a list of scrolling contents.
class _ExampleCard extends StatelessWidget {
const _ExampleCard({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: const Icon(Icons.airline_seat_flat_angled),
title: Text(title),
),
ButtonBar(
children: <Widget>[
TextButton(
child: const Text('BUY TICKETS'),
onPressed: () {
/* ... */
},
),
TextButton(
child: const Text('SELL TICKETS'),
onPressed: () {
/* ... */
},
),
],
),
],
),
);
}
}
class _ButterFlyAssetVideo extends StatefulWidget {
@override
_ButterFlyAssetVideoState createState() => _ButterFlyAssetVideoState();
}
class _ButterFlyAssetVideoState extends State<_ButterFlyAssetVideo> {
late VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller = VideoPlayerController.asset('assets/Butterfly-209.mp4');
_controller.addListener(() {
setState(() {});
});
_controller.setLooping(true);
_controller.initialize().then((_) => setState(() {}));
_controller.play();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 20.0),
),
const Text('With assets mp4'),
Container(
padding: const EdgeInsets.all(20),
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
VideoPlayer(_controller),
_ControlsOverlay(controller: _controller),
VideoProgressIndicator(_controller, allowScrubbing: true),
],
),
),
),
],
),
);
}
}
class _BumbleBeeRemoteVideo extends StatefulWidget {
@override
_BumbleBeeRemoteVideoState createState() => _BumbleBeeRemoteVideoState();
}
class _BumbleBeeRemoteVideoState extends State<_BumbleBeeRemoteVideo> {
late VideoPlayerController _controller;
Future<ClosedCaptionFile> _loadCaptions() async {
final String fileContents = await DefaultAssetBundle.of(context)
.loadString('assets/bumble_bee_captions.srt');
return SubRipCaptionFile(fileContents);
}
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4',
// closedCaptionFile: _loadCaptions(),
videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
);
_controller.addListener(() {
setState(() {});
});
_controller.setLooping(true);
_controller.initialize();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Container(padding: const EdgeInsets.only(top: 20.0)),
const Text('With remote mp4'),
Container(
padding: const EdgeInsets.all(20),
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
VideoPlayer(_controller),
ClosedCaption(text: _controller.value.caption.text),
_ControlsOverlay(controller: _controller),
VideoProgressIndicator(_controller, allowScrubbing: true),
],
),
),
),
],
),
);
}
}
class _ControlsOverlay extends StatelessWidget {
const _ControlsOverlay({Key? key, required this.controller})
: super(key: key);
static const _examplePlaybackRates = [
0.25,
0.5,
1.0,
1.5,
2.0,
3.0,
5.0,
10.0,
];
final VideoPlayerController controller;
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
AnimatedSwitcher(
duration: Duration(milliseconds: 50),
reverseDuration: Duration(milliseconds: 200),
child: controller.value.isPlaying
? SizedBox.shrink()
: Container(
color: Colors.black26,
child: Center(
child: Icon(
Icons.play_arrow,
color: Colors.white,
size: 100.0,
),
),
),
),
GestureDetector(
onTap: () {
controller.value.isPlaying ? controller.pause() : controller.play();
},
),
Align(
alignment: Alignment.topRight,
child: PopupMenuButton<double>(
initialValue: controller.value.playbackSpeed,
tooltip: 'Playback speed',
onSelected: (speed) {
controller.setPlaybackSpeed(speed);
},
itemBuilder: (context) {
return [
for (final speed in _examplePlaybackRates)
PopupMenuItem(
value: speed,
child: Text('${speed}x'),
)
];
},
child: Padding(
padding: const EdgeInsets.symmetric(
// Using less vertical padding as the text is also longer
// horizontally, so it feels like it would need more spacing
// horizontally (matching the aspect ratio of the video).
vertical: 12,
horizontal: 16,
),
child: Text('${controller.value.playbackSpeed}x'),
),
),
),
],
);
}
}
class _PlayerVideoAndPopPage extends StatefulWidget {
@override
_PlayerVideoAndPopPageState createState() => _PlayerVideoAndPopPageState();
}
class _PlayerVideoAndPopPageState extends State<_PlayerVideoAndPopPage> {
late VideoPlayerController _videoPlayerController;
bool startedPlaying = false;
@override
void initState() {
super.initState();
_videoPlayerController =
VideoPlayerController.asset('assets/Butterfly-209.mp4');
_videoPlayerController.addListener(() {
if (startedPlaying && !_videoPlayerController.value.isPlaying) {
Navigator.pop(context);
}
});
}
@override
void dispose() {
_videoPlayerController.dispose();
super.dispose();
}
Future<bool> started() async {
await _videoPlayerController.initialize();
await _videoPlayerController.play();
startedPlaying = true;
return true;
}
@override
Widget build(BuildContext context) {
return Material(
elevation: 0,
child: Center(
child: FutureBuilder<bool>(
future: started(),
builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
if (snapshot.data == true) {
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
child: VideoPlayer(_videoPlayerController),
);
} else {
return const Text('waiting for video to load');
}
},
),
),
);
}
}
WJLee9559
Updated on January 01, 2023Comments
-
WJLee9559 over 1 year
import 'package:video_player/video_player.dart'; import 'package:flutter/material.dart'; void main() => runApp(VideoApp()); class VideoApp extends StatefulWidget { @override _VideoAppState createState() => _VideoAppState(); } class _VideoAppState extends State<VideoApp> { VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.network( 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4') ..initialize().then((_) { // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed. setState(() {}); }); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Video Demo', home: Scaffold( body: Center( child: _controller.value.isInitialized ? AspectRatio( aspectRatio: _controller.value.aspectRatio, child: VideoPlayer(_controller), ) : Container(), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _controller.value.isPlaying ? _controller.pause() : _controller.play(); }); }, child: Icon( _controller.value.isPlaying ? Icons.pause : Icons.play_arrow, ), ), ), ); } @override void dispose() { super.dispose(); _controller.dispose(); } }
Even though I had tried adding the dependencies and change the video link to a YouTube link instead, it still the same and does not display the video. May I know how to solve this problem? There are a few errors, I listed it as below:
- The method 'VideoPlayer' isn't defined for the type '_VideoAppState'
- Undefined name 'VideoPlayerController'.
- Undefined class 'VideoPlayerController'.
- Target of URI doesn't exist: 'package:video_player/video_player.dart'
Pubspec.yml below
name: icseat description: A new Flutter project. # The following line prevents the package from being accidentally published to # pub.dev using `pub publish`. This is preferred for private packages. publish_to: 'none' # Remove this line if you wish to publish to pub.dev # 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.12.0 <3.0.0" dependencies: dio: ^4.0.0 file_picker: ^4.0.0 video_player: advance_pdf_viewer: ^2.0.0 flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 http: ^0.13.0 dev_dependencies: flutter_test: sdk: flutter # For information on the generic Dart part of this file, see the # following page: https://dart.dev/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: - images/logoicseat.png - images/person.png # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware. # For details regarding adding assets from package dependencies, see # https://flutter.dev/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.dev/custom-fonts/#from-packages
@Tommie C. The below are the errors that I experienced when running the codes:
Launching lib\View\Video.dart on sdk gphone x86 arm in debug mode... Running Gradle task 'assembleDebug'... √ Built build\app\outputs\flutter-apk\app-debug.apk. Installing build\app\outputs\flutter-apk\app.apk... Debug service listening on ws://127.0.0.1:57805/tl8ztZ-XWag=/ws Syncing files to device sdk gphone x86 arm... W/e.icseattestin( 4832): Accessing hidden method Landroid/media/AudioTrack;->getLatency()I (greylist, reflection, allowed) I/ExoPlayerImpl( 4832): Init bda4bd9 [ExoPlayerLib/2.14.1] [generic_x86_arm, sdk_gphone_x86_arm, Google, 30] I/Choreographer( 4832): Skipped 54 frames! The application may be doing too much work on its main thread. I/OpenGLRenderer( 4832): Davey! duration=921ms; Flags=0, IntendedVsync=313961916316, Vsync=314861916280, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=314868026700, AnimationStart=314868094000, PerformTraversalsStart=314871530500, DrawStart=314873232800, SyncQueued=314874438400, SyncStart=314875924800, IssueDrawCommandsStart=314875998400, SwapBuffers=314879263000, FrameCompleted=314885090400, DequeueBufferDuration=1230100, QueueBufferDuration=3509200, GpuCompleted=0, I/TetheringManager( 4832): registerTetheringEventCallback:com.example.icseattesting I/VideoCapabilities( 4832): Unsupported profile 4 for video/mp4v-es I/OMXClient( 4832): IOmx service obtained D/SurfaceUtils( 4832): connecting to surface 0xe4d1c578, reason connectToSurface I/MediaCodec( 4832): [OMX.android.goldfish.h264.decoder] setting surface generation to 4947969 D/SurfaceUtils( 4832): disconnecting from surface 0xe4d1c578, reason connectToSurface(reconnect) D/SurfaceUtils( 4832): connecting to surface 0xe4d1c578, reason connectToSurface(reconnect) E/ACodec ( 4832): [OMX.android.goldfish.h264.decoder] setPortMode on output to DynamicANWBuffer failed w/ err -1010 I/ACodec ( 4832): codec does not support config priority (err -1010) D/SurfaceUtils( 4832): disconnecting from surface 0xe4d1c578, reason setNativeWindowSizeFormatAndUsage D/SurfaceUtils( 4832): connecting to surface 0xe4d1c578, reason setNativeWindowSizeFormatAndUsage D/SurfaceUtils( 4832): set up nativeWindow 0xe4d1c578 for 1280x720, color 0x13, rotation 0, usage 0x1002900 W/Gralloc4( 4832): allocator 3.x is not supported Lost connection to device.
-
Tommie C. over 2 yearsCan you add your pub spec.yaml file in the question? Also you mentioned the Dio package in your title. I don't see that referenced anywhere.
-
Shadow over 2 yearsThere is no reference to mysql either.
-
WJLee9559 over 2 years@TommieC. I had added the pubspec.yaml file above
-
Tommie C. over 2 yearsAdditional errors would normally be a different question. If the answer with code solved the 4 existing errors please accept the answer and upvote to help others find the solution to the specific question you asked. You can always post a new question with the new error. You will gain new capabilities as you add more questions and accept more answers. Welcome to the site.
-
WJLee9559 over 2 yearsOk, thanks Tommie C
-
WJLee9559 over 2 yearsOk, I try it out. Thanks
-
WJLee9559 over 2 yearsTommie C. I will run this video player in android environment
-
WJLee9559 over 2 yearsTommie C. There is an error when running the code above, I will attach the error in the above section
-
Tommie C. over 2 yearsErrors are common in coding. The errors I ran into while reviewing this sample were related to configuring the system and commenting out the load configuration (fix added to the note). I ran my code on a device and then also on the Android simulator.