Flutter(网络)video_player 自动播放
Flutter (web) video_player Autoplay
有人知道我需要做什么才能让我的视频在我的 flutter 网站加载后自动播放吗?
到目前为止,我唯一能做到的就是在我手动刷新页面时让它们到达 play/loop。
我确定这很简单,但是在 3 个月完全不编码之后我有点生疏了...
目前我正在 FutureBuilder
中调用 _videoPlayerController.play()
class VideoWithChild extends StatefulWidget {
final String videoSource;
final FractionalOffset alignment;
final TextAlign textAlign;
final Widget child;
const VideoWithChild(
{Key key, this.videoSource, this.alignment, this.textAlign, this.child})
: super(key: key);
@override
_VideoWithChildState createState() =>
_VideoWithChildState(videoSource, alignment, textAlign, child);
}
class _VideoWithChildState extends State<VideoWithChild> {
final String videoSource;
final TextAlign textAlign;
final Widget child;
final FractionalOffset alignment;
VideoPlayerController _videoPlayerController;
Future<void> _initializeVideoPlayerFuture;
VoidCallback listener;
_VideoWithChildState(
this.videoSource, this.alignment, this.textAlign, this.child);
@override
void initState() {
_videoPlayerController = VideoPlayerController.asset(videoSource);
_initializeVideoPlayerFuture = _videoPlayerController.initialize();
super.initState();
}
@override
Widget build(BuildContext context) {
print('build');
return FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
_videoPlayerController.dataSource.isNotEmpty) {
print('connection state');
_videoPlayerController.play();
_videoPlayerController.setLooping(true);
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
child: Stack(
children: <Widget>[
VideoPlayer(_videoPlayerController),
LayoutBuilder(
builder: (context, constraints) {
return Align(alignment: alignment, child: child);
},
)
],
),
);
} else {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Color(0xff49148c),
),
)),
);
}
},
);
}
@override
void dispose() {
print('dispose');
super.dispose();
_videoPlayerController.dispose();
}
}
Chrome 或其他浏览器可能不允许自动播放视频 here and mentioned by the video_player_web
author here。
但是,如果您将音量设为静音,则可以自动播放。根据 post 的回答,您可以使用 WidgetsBinding.instance.addPostFrameCallback
自动播放您的视频。在您的 initState
方法中尝试添加以下行。
WidgetsBinding.instance.addPostFrameCallback((_) {
// mutes the video
_videoPlayerController.setVolume(0);
// Plays the video once the widget is build and loaded.
_videoPlayerController.play();
});
但是,如果您希望在加载整个网站后播放视频,您可能需要在 javascript 中使用 body
标签 onload
属性如定义 here。
更简单:初始化controller后放在'then'部分
_controller.initialize().then((value) => _controller.play())
有人知道我需要做什么才能让我的视频在我的 flutter 网站加载后自动播放吗?
到目前为止,我唯一能做到的就是在我手动刷新页面时让它们到达 play/loop。
我确定这很简单,但是在 3 个月完全不编码之后我有点生疏了...
目前我正在 FutureBuilder
_videoPlayerController.play()
class VideoWithChild extends StatefulWidget {
final String videoSource;
final FractionalOffset alignment;
final TextAlign textAlign;
final Widget child;
const VideoWithChild(
{Key key, this.videoSource, this.alignment, this.textAlign, this.child})
: super(key: key);
@override
_VideoWithChildState createState() =>
_VideoWithChildState(videoSource, alignment, textAlign, child);
}
class _VideoWithChildState extends State<VideoWithChild> {
final String videoSource;
final TextAlign textAlign;
final Widget child;
final FractionalOffset alignment;
VideoPlayerController _videoPlayerController;
Future<void> _initializeVideoPlayerFuture;
VoidCallback listener;
_VideoWithChildState(
this.videoSource, this.alignment, this.textAlign, this.child);
@override
void initState() {
_videoPlayerController = VideoPlayerController.asset(videoSource);
_initializeVideoPlayerFuture = _videoPlayerController.initialize();
super.initState();
}
@override
Widget build(BuildContext context) {
print('build');
return FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
_videoPlayerController.dataSource.isNotEmpty) {
print('connection state');
_videoPlayerController.play();
_videoPlayerController.setLooping(true);
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
child: Stack(
children: <Widget>[
VideoPlayer(_videoPlayerController),
LayoutBuilder(
builder: (context, constraints) {
return Align(alignment: alignment, child: child);
},
)
],
),
);
} else {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Color(0xff49148c),
),
)),
);
}
},
);
}
@override
void dispose() {
print('dispose');
super.dispose();
_videoPlayerController.dispose();
}
}
Chrome 或其他浏览器可能不允许自动播放视频 here and mentioned by the video_player_web
author here。
但是,如果您将音量设为静音,则可以自动播放。根据 post 的回答,您可以使用 WidgetsBinding.instance.addPostFrameCallback
自动播放您的视频。在您的 initState
方法中尝试添加以下行。
WidgetsBinding.instance.addPostFrameCallback((_) {
// mutes the video
_videoPlayerController.setVolume(0);
// Plays the video once the widget is build and loaded.
_videoPlayerController.play();
});
但是,如果您希望在加载整个网站后播放视频,您可能需要在 javascript 中使用 body
标签 onload
属性如定义 here。
更简单:初始化controller后放在'then'部分
_controller.initialize().then((value) => _controller.play())