美文网首页
Flutter 视频缩略图

Flutter 视频缩略图

作者: 技术混子 | 来源:发表于2020-08-26 16:41 被阅读0次

    在做即时通讯前整理了一个视频缩略图的工具类,可供码农直接放入项目中使用,涉及到的插件:

    video_player: ^0.10.11+2

    话不多说代码如下:

    import 'package:flutter/material.dart';
    import 'package:spanners/cTools/vedioPalyer.dart';
    import 'package:video_player/video_player.dart';
    
    class AddVideoFirstImage extends StatefulWidget {
     final String videoUrl;
    
    const AddVideoFirstImage({Key key, this.videoUrl}) : super(key: key);
     @override
     _AddVideoFirstImageState createState() => _AddVideoFirstImageState();
     }
    
    class _AddVideoFirstImageState extends State<AddVideoFirstImage> {
     //视频 缩略图
    VideoPlayerController _controller;
    Future _initializeVideoPlayerFuture;
    @override
    Widget build(BuildContext context) {
    @override
    void initState() {
      // TODO: implement initState
      setState(() {
        //视频缩略图
        _controller =
            VideoPlayerController.network(widget.videoUrl); //网络视频,也可以是file
        _controller.setLooping(true);
        _initializeVideoPlayerFuture = _controller.initialize();
      });
      super.initState();
    }
    
    return Stack(
      children: [
        Padding(
          padding: EdgeInsets.all(0),
          child: ConstrainedBox(
            constraints: BoxConstraints.expand(),
            child: FutureBuilder(
              //显示缩略图
              future: _initializeVideoPlayerFuture,
              builder: (context, snapshot) {
                print(snapshot.connectionState);
                if (snapshot.hasError) print(snapshot.error);
                if (snapshot.connectionState == ConnectionState.done) {
                  return AspectRatio(
                    aspectRatio: 2 / 3,
    //                      aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  );
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ),
        ),
        /* 播放 按钮所在位置 大小 可根据实际项目 需要 调整 */
        Padding(
            padding: EdgeInsets.fromLTRB(
                MediaQuery.of(context).size.width / 2 - 30 / 2 - 20,
                151 / 2 - 20,
                MediaQuery.of(context).size.width / 2 - 30 / 2 - 20,
                151 / 2 - 20),
            child: InkWell(
              onTap: () {
                /*  视频上传成功后 点击播放视频  */
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new videoPalyer(
                              url: widget.videoUrl,
                            )));
              },
              child: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 40,
                ),
              ),
            )),
      ],
    );
     }
    }
    

    相关文章

      网友评论

          本文标题:Flutter 视频缩略图

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