Flutter仿抖音视频播放

先看效果

709863ea193b578495ae3fac72ae18a5.gif

关键代码

import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'Player.dart';
import 'main.dart';

class FullScreenVideoList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return FullScreenVideoListState();
  }
}

class FullScreenVideoListState extends State {
  List<Video> datas = new List<Video>();
  //滚动监听
  ScrollController scrollController = ScrollController();

  Size size;

  double offset = 0.0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    scrollController.addListener(() {
      //获取滚动范围,计算滚动停止时当前显示的数据位
      this.offset = scrollController.offset;
    });
    loadAsset();
  }


  Future<String> loadAsset() async {
    String data = await rootBundle.loadString('assets/data.json');
    List<dynamic> list = jsonDecode(data);
    list.forEach((element) {
//      print(element["coverImgUrl"]);
//      print(element["url"]);
      datas.add(Video(element["url"],element["coverImgUrl"]));
    });
    setState(() {

    });
  }

  @override
  void didUpdateWidget(covariant StatefulWidget oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
    size = MediaQuery.of(context).size;
    setState(() {});
  }

  int curPlayPosition = 0;

  @override
  Widget build(BuildContext context) {
    return _buildWidget();
  }

  Widget _buildWidget() {
    if (datas.length <= 0 || size == null) {
      return emptyWidgetbuildCupertinoActivityIndicator();
    } else {
      var list = GridView.builder(
          controller: scrollController,
          //关键代码.滑动自动翻页全靠这个实现
          physics: PageScrollPhysics(),
          padding: EdgeInsets.zero,
          itemCount: datas.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //横轴元素个数
              crossAxisCount: 1,
              //纵轴间距
              mainAxisSpacing: 0.0,
              //横轴间距
              crossAxisSpacing: 0.0,
              //子组件宽高长度比例
              childAspectRatio: size.width / size.height),
          itemBuilder: (context, i) {
            if (i == curPlayPosition) {
              return _buildPlay(datas[i]);
            } else {
              return _buildItem(datas[i]);
            }
          });
      return NotificationListener<ScrollEndNotification>(
          onNotification: onscroll, child: list);
    }
  }

  Widget _buildItem(Video data) {
    return Stack(
      children: [
        Image(
            width: size.width,
            height: size.height,
            image: NetworkImage(data.Img),
            fit: BoxFit.cover,
            alignment: Alignment.center)
      ],
    );
  }
  
  //滚动停止回调,在这里计算当前正在显示可播放视频的控件.
  bool onscroll(ScrollEndNotification notification) {
    var playPosition = (offset / size.height).ceil();
    //todo 需要关注这里的问题，算出来的位置会大于实际位置，仅发生在列表最后一个，
    if (playPosition != curPlayPosition && playPosition < datas.length) {
      curPlayPosition = playPosition;
      print("setState");
      print(playPosition);
      print(curPlayPosition);
      setState(() {});
    }
  }

  Widget _buildPlay(Video data) {
    return Player(data);
  }
}

import 'dart:io';
import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:wakelock/wakelock.dart';
import 'PlayerControls.dart';
import 'main.dart';

/***
 * 播放器部分,借鉴了部分(很多)Chewie_video的代码.实现视频播放能力.
 */
class Player extends StatefulWidget {
  Video video;

  Player(this.video);

  @override
  State<StatefulWidget> createState() {
    return PlayerState();
  }
}

class PlayerState extends State<Player> {
  static List<VideoPlayerController> player = new List();
  VideoPlayerController _controller;
  static bool isWakelock = false;

  @override
  void initState() {
    super.initState();
    if (!isWakelock) {
      //这里特殊处理, initState 会在上个视频 dispose 前调用,导致屏幕常亮失效.
      Wakelock.enable();
      isWakelock = true;
    }
    print("Wakelock.enable");
    var url = "assets/v2.mp4";
    print(url);
    _controller = VideoPlayerController.asset(url)
      ..initialize().then((_) {
        _controller.play();
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
    player.add(_controller);
  }

  @override
  Widget build(BuildContext context) {
//监听物理返回按键,做退出App 播放器释放操作
    return WillPopScope(
      onWillPop: ()async {
        await _controller.dispose();
        exit(0);
      },
      child: (_controller != null && _controller.value.initialized)
          ? Stack(
              children: [
                Center(
                  child: AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  ),
                ),
                //底部播控条
                PlayerControls(_controller)
              ],
            )
          : Center(child: CupertinoActivityIndicator()),
    );
  }

  @override
  void dispose() {
    super.dispose();
    print("dispose");
    if (_controller != null) {
      _controller.dispose();
    }
    player.remove(_controller);
    if (isWakelock && player.length <= 0) {
      Wakelock.disable();
      isWakelock = false;
    }
  }
}

依赖部分

//视频播放器底层
 video_player: 0.10.12
//屏幕常亮 
wakelock: ^0.1.4+2

关键说明

//使用 GridView Widget 作为列表父控件
GridView
//使用 NotificationListener 监听滚动停止事件
NotificationListener
//使用 PageScrollPhysics 辅助类实现上下滑动每次翻一页的效果
PageScrollPhysics

总结

1.编码耗时5小时左右,编码体验不错.
2.Flutter 提供的 Physics 相关类解决了原生层需要自定义实现RecycleView LayoutManager的情况,统一了代码实现很Nice.
3.Flutter 层获取设备硬件信息比较繁琐,需要在合适时机调用.
4.Flutter层提供的设备生命周期回调比较少,而播放器的实现比较依赖设备各种生命周期的回调,如果想很好的,极其精准的播放器控制,需要进一步定制原生层接口,不利于跨平台运行.
5.国内flutter镜像站点内容过于陈旧,需要去看flutter官网api文档.
6.实现性能欠佳,与我之前写过的原生版本性能相差太多.
7.后面的主要优化方向是预加载和预缓存方向.

完整代码

github

鸣谢

感谢歪果仁Brian Egan大兄弟贡献的播放器demo,对于flutter视频播放这一块的入门,还是很ok的.
播放器demo
感谢他家提供的免费video转gif服务.
在线视频转gif

联系我

QQ:853151446
微信:K13664884627