Flutter video_player视频播放器简单实用

1.支持Android、ios、web三平台
2.在使用的页面加入下面的代码

import 'package:auto_orientation/auto_orientation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shoolcloudvideo/utils/loading.dart';
import 'package:shoolcloudvideo/utils/my_toast_utils.dart';
import 'package:video_player/video_player.dart';

import '../../utils/widget_utils.dart';
import '../colors/my_colors.dart';

///监控视频详情页面
const String VIDEO_URL = '视频地址';

class VideoMorePage extends StatefulWidget {
  const VideoMorePage({Key? key}) : super(key: key);

  
  State<VideoMorePage> createState() => _VideoMorePageState();
}

class _VideoMorePageState extends State<VideoMorePage> {
  late VideoPlayerController _controller;
  late var _appbar;
  //是否全屏
  bool _isFullScreen = false;
  }

  
  void initState() {
    super.initState();
    AutoOrientation.portraitUpMode();
    _appbar = WidgetUtils.getAppBar('视频监控', true, context,false);
    Loading.show();
    _controller = VideoPlayerController.network(VIDEO_URL)
      ..initialize().then((_) async {
        await Future.delayed(Duration(seconds: 2));
        Loading.dismiss();
        setState(() {
          playOrPauseVideo();
        });
      }).catchError((err) {
        // if (stop) {
        //   return;
        // }
        Loading.dismiss();
        MyToastUtils.showToastBottom("加载出错,请重新打开");
        print('加载出错,请重新打开! e $err');
        // doPlayInitAndAutoPlay(urlToStreamVideo, stop: true);
      });
  }

  
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  void playOrPauseVideo() {
    setState(() {
      if (_controller.value.isPlaying) {
        _controller.pause();
      } else {
        // If the video is paused, play it.
        _controller.play();
      }
    });
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:_appbar,
      backgroundColor: Colors.black,
      body:Column(
        children: [
          SizedBox(
            height: 300,
            width: double.infinity,
            child: _controller.value.isInitialized
                ? AspectRatio(
              aspectRatio: 16 / 9,
              // aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )

            //如果视频没有加载好或者因网络原因加载不出来则返回Container 组件
            //一般用于放置过渡画面
                : const Text("没有要播放的视频"),
          ),
          const SizedBox(height: 15,),
          SizedBox(
            height:  ScreenUtil().setHeight(40),
            child: Row(
              children: <Widget>[
                Padding(
                  padding:
                  EdgeInsets.only(left: ScreenUtil().setSp(40)),
                ),
                Container(
                  alignment: Alignment.bottomLeft,
                  height: ScreenUtil.screenWidth,
                  child: GestureDetector(
                      child: _controller.value.isPlaying == false
                          ? const Icon(
                        Icons.pause,
                        color: Colors.white,
                      )
                          : const Icon(
                        Icons.play_arrow,
                        color: Colors.white,
                      ),
                      onTap: () => {playOrPauseVideo()}),
                ),
                Expanded(
                  child: Container(),
                ),
                Container(
                  alignment: Alignment.bottomRight,
                  height: ScreenUtil.screenWidth,
                  child: GestureDetector(
                    child: _isFullScreen
                        ? const Icon(
                      Icons.fullscreen_exit,
                      color: Colors.white,
                    )
                        : const Icon(
                      Icons.fullscreen,
                      color: Colors.white,
                    ),
                    onTap: () {
                      _toggleFullScreen();
                    },
                  ),
                ),
                const Padding(
                  padding: EdgeInsets.only(right: 10),
                ),
              ],
            ),
          ),
        ],
      )
    );
  }


  void _toggleFullScreen() {
    setState(() {
      if (_isFullScreen) {
        /// 如果是全屏就切换竖屏
        AutoOrientation.portraitAutoMode();
        // _appbar = WidgetUtil.getAppBar(title: widget.title ?? '播放器');

        ///显示状态栏,与底部虚拟操作按钮
        SystemChrome.setEnabledSystemUIOverlays(
            [SystemUiOverlay.top, SystemUiOverlay.bottom]);

        _appbar = AppBar(
          //标题居中
          centerTitle: true,
          title: const Text(
            '视频监控',
            style: TextStyle(
                overflow: TextOverflow.ellipsis, color: Colors.white),
          ),
          elevation: 0, //去掉Appbar底部阴影
          //背景颜色
          backgroundColor: Colors.blue,
        );
      } else {
        AutoOrientation.landscapeAutoMode();
        _appbar = null;

        ///关闭状态栏,与底部虚拟操作按钮
        SystemChrome.setEnabledSystemUIOverlays([]);
      }
      _isFullScreen = !_isFullScreen;
    });
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
A:以下是一个简单Flutter video_player 视频播放器模板供参考: ```dart import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { VideoPlayerController _controller; @override void initState() { super.initState(); _controller = VideoPlayerController.asset('videos/sample.mp4') ..initialize().then((_) { setState(() {}); }); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Video Player'), ), body: Center( child: _controller.value.initialized ? 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(); } } ``` 在本例中,我们使用 asset 目录下的示例视频文件来初始化 VideoPlayerController。在 initState() 生命周期中,我们调用 initialize() 方法来初始化该控制器,并在该过程完成后(即视频准备就绪后)调用 setState() 来更新 UI。在 build() 方法中,我们检查视频控制器的 initialized 属性,如果视频已经准备就绪,则使用 AspectRatio 和 VideoPlayer 将视频呈现为全屏可见的占位符。我们还在右下方添加了一个 FloatingActionButton,允许用户播放或暂停视频。最后,我们在 dispose() 生命周期中释放了视频控制器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A HandSome Man

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值