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 createState() {
    return FullScreenVideoListState();
  }
}

class FullScreenVideoListState extends State {
  List

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 createState() {
    return PlayerState();
  }
}

class PlayerState extends State {
  static List 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