chewie 视频播放器使用

基本使用1

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late VideoPlayerController
      _videoPlayerController; //声明 VideoPlayerController 对象
  late Future<void> _initializeVideoPlayerFuture; //声明所需的异步任务 Future 对象

  @override
  void initState() {
    super.initState();
    // 初始化 VideoPlayerController
    // ignore: deprecated_member_use
    _videoPlayerController = VideoPlayerController.network(
        'https://dashanbook.oss-cn-shenzhen.aliyuncs.com/av/2023/12/04/86e70d8117914e369b93ec8f2b5b5aef.mp4');

    // 初始化 video_player，等待视频加载完成
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
  }

  @override
  void dispose() {
    // 释放资源
    _videoPlayerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          // 判断视频加载状态
          if (snapshot.connectionState == ConnectionState.done) {
            // Chewie 组件用于展示和控制视频播放
            return Chewie(
              controller: ChewieController(
                // 将 VideoPlayerController 传递给 ChewieController
                videoPlayerController: _videoPlayerController,
                aspectRatio: 16 / 9, // 视频宽高比
                autoPlay: false, // 是否自动播放
                looping: true, // 是否循环播放
              ),
            );
          } else {
            // 正在加载视频时显示加载指示器
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

基本使用2

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class ChewieVideoPage extends StatefulWidget {
  const ChewieVideoPage({super.key});
  @override
  State<ChewieVideoPage> createState() => _ChewieVideoPageState();
}

class _ChewieVideoPageState extends State<ChewieVideoPage> {
  late VideoPlayerController videoPlayerController;
  late ChewieController chewieController;
  @override
  void initState() {
// TODO: implement initState
    super.initState();
    _initVideo();
  }

  _initVideo() async {
    videoPlayerController = VideoPlayerController.network(
        'https://dashanbook.oss-cn-shenzhen.aliyuncs.com/av/2023/12/04/c9283ebc3ae44c9f90f7c19549b934eb.mp4');
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2, //视频宽高比
      autoPlay: true,
      looping: true,
    );
  }

/*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('在线视频播放'),
      ),
      body: Center(
          child: SizedBox(
        child: AspectRatio(
          aspectRatio: 3 / 2,
          child: Chewie(
            controller: chewieController,
          ),
        ),
      )),
    );
  }
}

使用字幕

class ChewieVideoPage extends StatefulWidget {
  const ChewieVideoPage({super.key});
  @override
  State<ChewieVideoPage> createState() => _ChewieVideoPageState();
}

class _ChewieVideoPageState extends State<ChewieVideoPage> {
  late VideoPlayerController videoPlayerController;
  late ChewieController chewieController;
  @override
  void initState() {
// TODO: implement initState
    super.initState();
    _initVideo();
  }

  _initVideo() async {
    videoPlayerController = VideoPlayerController.network(
        'https://dashanbook.oss-cn-shenzhen.aliyuncs.com/av/2023/12/04/c9283ebc3ae44c9f90f7c19549b934eb.mp4');
    chewieController = ChewieController(
        videoPlayerController: videoPlayerController,
        aspectRatio: 3 / 2, //视频宽高比
        autoPlay: true,
        looping: true,
        subtitle: Subtitles([ //创建的字幕列表
          Subtitle(
              index: 0, //字幕的索引（从0开始）
              start: Duration.zero, //字幕开始的时间戳
              end: Duration(seconds: 10), //字幕结束的时间戳
              text: "How are you?"),   //字幕的文本内容
          Subtitle(
              index: 1,
              start: Duration(seconds: 10),
              end: Duration(seconds: 20),
              text: "这是字幕")
        ]));
  }

/*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('在线视频播放'),
      ),
      body: Center(
          child: SizedBox(
        child: AspectRatio(
          aspectRatio: 3 / 2,
          child: Chewie(
            controller: chewieController,
          ),
        ),
      )),
    );
  }
}

播放速度的汉化

class ChewieVideoPage extends StatefulWidget {
  const ChewieVideoPage({super.key});
  @override
  State<ChewieVideoPage> createState() => _ChewieVideoPageState();
}

class _ChewieVideoPageState extends State<ChewieVideoPage> {
  late VideoPlayerController videoPlayerController;
  late ChewieController chewieController;
  @override
  void initState() {
// TODO: implement initState
    super.initState();
    _initVideo();
  }

  _initVideo() async {
    videoPlayerController = VideoPlayerController.network(
        'https://dashanbook.oss-cn-shenzhen.aliyuncs.com/av/2023/12/04/c9283ebc3ae44c9f90f7c19549b934eb.mp4');
    chewieController = ChewieController(
        videoPlayerController: videoPlayerController,
        aspectRatio: 3 / 2, //视频宽高比
        autoPlay: true,
        looping: true,
        optionsBuilder: (context, chewieOptions) async{  //视频上方三个点
          await showModalBottomSheet(context: context, builder: (context){
                  return SizedBox(
                    height: 200,
                    child: ListView(
                    children:  [
                      ListTile(title: Text("播放速度"),onTap: (){
                        chewieOptions[0].onTap!(); //播放速度的汉化
                      },),
                      ListTile(title: Text("取消"),onTap: (){
                        Navigator.pop(context);
                      },),
                    ],
                  ),
                  );
          });
        },
        );
  }

/*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('在线视频播放'),
      ),
      body: Center(
          child: SizedBox(
        child: AspectRatio(
          aspectRatio: 3 / 2,
          child: Chewie(
            controller: chewieController,
          ),
        ),
      )),
    );
  }
}