美文网首页
Flutter videoplayer 实现播放功能小部件

Flutter videoplayer 实现播放功能小部件

作者: 曾经也是个少年 | 来源:发表于2019-12-05 15:37 被阅读0次

    废话不说,先上代码

    import 'package:flutter/material.dart';
    import 'package:video_player/video_player.dart';
    
    class VideoShowWidget extends StatefulWidget {
      final String video;
      VideoShowWidget({Key key, this.video,}) : super(key: key);
    
      @override
      _VideoShowWidgetState createState() => _VideoShowWidgetState();
    }
    
    class _VideoShowWidgetState extends State<VideoShowWidget> {
      VideoPlayerController _controller;
      bool _isPlaying = false;
      // String _selectType = '高清';
      String _url= '';
      @override
      void initState() {
          super.initState();
          this._url = widget.video;
          _controller = VideoPlayerController.network(this._url)
          // 播放状态
          ..addListener(() {
            if(_controller != null){
              final bool isPlaying = _controller.value.isPlaying;
              if (isPlaying != _isPlaying) {
                  setState(() { _isPlaying = isPlaying; });
              }
            }
          })
          // 在初始化完成后必须更新界面
          ..initialize().then((_) {
              setState(() {});
          })
          ..setLooping(true);
      }
      @override
      void dispose() {
        super.dispose();
        if(_controller.value.isPlaying){
          _controller.pause();
        }
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
              body: Container(
                child: Stack(
                  children: <Widget>[
                    Positioned(
                      child: Container(
                        child: _controller.value.initialized
                            // 加载成功
                            ? new AspectRatio(
                                aspectRatio: _controller.value.aspectRatio,
                                child: VideoPlayer(_controller),
                            ) : new Container(),
                        ),
                    ),
                    Positioned(
                      child: Container(
                        padding: EdgeInsets.fromLTRB(16, 24, 16, 16),
                        color: Colors.white24,
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            GestureDetector(
                              onTap: (){
                                Navigator.pop(context);
                              },
                              child: Icon(Icons.arrow_back_ios,color: Colors.white,size: 24,),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                 
                              ],
                            )
                          ],
                        ),
                      ),
                    )
                  ],
                ),
              ),
              
              floatingActionButton: new FloatingActionButton(
                  backgroundColor: Colors.white,
                  onPressed: (){
                    if(_controller.value.isPlaying){
                      _controller.pause();
                    }else{
                      _controller.play();
                    }
                  },
                  child: new Icon(
                      _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
                      color: Colors.black,
                      size: 40,
                  ),
              ),
          );
      }
    }
    

    copy以上代码,传入视频地址 video,就ok了,


    image.png

    相关文章

      网友评论

          本文标题:Flutter videoplayer 实现播放功能小部件

          本文链接:https://www.haomeiwen.com/subject/zyndgctx.html