Flutter 中视频的播放

前言：在 flutter 中播放视频，并且可以控制视频的播放！（或者是预览）

 

视频播放插件：video_player ，但是没有视频控制 UI，这边想实现的效果有点类似 微信里面观看视频的效果； 本来是有个插件的 chewie，但是用了下 感觉过于繁琐；下面手写一个 视频 播放控件主要功能有：

• 视频播放 /视频暂停
• 视频进度条， 可以随意跳到指定位置

 

参考：Flutter自定义视频播放器(播放、暂停、倍速、拖动视频进度）_就是三木啊的博客-CSDN博客_flutter播放器Flutter自定义视频播放器在pubspec.yaml 添加video_player、dropdown_button2添加完成后在需要视频的dart文件引入import 'package:video_player/video_player.dart';import 'package:dropdown_button2/dropdown_button2.dart';具体代码//定义一个VideoPlayerControllervar _videoPlayerController;//监听视https://blog.csdn.net/weixin_43783419/article/details/124661562?spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-16-124661562-blog-123168999.pc_relevant_sortByAnswer&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-16-124661562-blog-123168999.pc_relevant_sortByAnswer&utm_relevant_index=21

 效果如下：

pubspec.yaml

添加配置：主要用于视频的播放

video_player: 2.3.0

 

page_preview_video.dart 

界面显示 布局： 

import 'package:examine/utils/app_navigation.dart';
import 'package:examine/utils/app_screen.dart';
import 'package:examine/wrap/extension/extension.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
 
class PagePreviewVideo extends StatefulWidget {
  final String url;
  const PagePreviewVideo({Key? key, required this.url}) : super(key: key);
 
  @override
  _PagePreviewVideoState createState() => _PagePreviewVideoState();
}
 
class _PagePreviewVideoState extends State {
  VideoPlayerController? _videoPlayerController;
  bool _isPlaying = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _videoPlayerController = VideoPlayerController.network(widget.url)
      ..initialize().then((_) {
        _videoPlayerController!.play();
        setState(() {});
      });
 
    _videoPlayerController!.addListener(() {
      setState(() {
        _isPlaying = _videoPlayerController!.value.isPlaying;
      });
    });
  }
 
  @override
  void dispose() {
    _videoPlayerController?.dispose();
    // TODO: implement dispose
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          _videoPlayerController!.value.isInitialized
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    InkWell(
                      onTap: () {
                        if (_isPlaying) {
                          _videoPlayerController!.pause();
                        }
                      },
                      child: Container(
                        constraints:
                            BoxConstraints(maxWidth: 0.85 * AppScreen.height),
                        child: AspectRatio(
                          aspectRatio:
                              _videoPlayerController!.value.aspectRatio,
                          child: VideoPlayer(_videoPlayerController!),
                        ),
                      ),
                    ),
                    SliderTheme(
                      data: SliderTheme.of(context).copyWith(
                        activeTrackColor:
                            Colors.white.withOpacity(0.5), //进度条滑块左边颜色
                        inactiveTrackColor:
                            Colors.white.withOpacity(0.2), //进度条滑块右边颜色
                        thumbColor: Colors.transparent, //滑块颜色
                        overlayColor: Colors.transparent, //滑块拖拽时外圈的颜色
                        trackHeight: 4.cale, //进度条宽度
                        // trackShape: RoundSliderTrackShape(
                        //     radius: 10), //进度条形状,这边自定义两头显示圆角
                      ),
                      child: Slider(
                        max: _videoPlayerController!
                            .value.duration.inMilliseconds
                            .truncateToDouble(),
                        value: _videoPlayerController!
                            .value.position.inMilliseconds
                            .truncateToDouble(),
                        // activeColor: Colors.white.withOpacity(0.5),
                        // inactiveColor: Colors.black.withOpacity(0.5),
                        onChanged: (double value) {
                          _videoPlayerController!.seekTo(
                            Duration(
                              milliseconds: value.truncate(),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                )
              : Center(
                  child: CircularProgressIndicator(
                    valueColor:
                        AlwaysStoppedAnimation(Colors.white.withOpacity(0.7)),
                    backgroundColor: Colors.white.withOpacity(0.4),
                  ),
                ),
          Positioned(
            left: 30.cale,
            top: 100.cale,
            child: InkWell(
              onTap: () {
                AppNavigator().navigateBack();
              },
              child: Icon(
                Icons.cancel,
                color: Colors.white,
                size: 55.cale,
              ),
            ),
          ),
          if (_videoPlayerController!.value.isInitialized && !_isPlaying)
            Center(
              child: GestureDetector(
                onTap: () {
                  _videoPlayerController!.play();
                },
                child: Center(
                  child: Icon(
                    Icons.play_circle_fill_outlined,
                    color: Colors.white,
                    size: 120.cale,
                  ),
                ),
              ),
            )
        ],
      ),
    );
  }
}

调用：

AppNavigator().navigateTo(
    PagePreviewVideo(url: _videoPreview()[index]));