Flutter 视频video_player与缓存flutter_cache_manager

这篇具有很好参考价值的文章主要介绍了Flutter 视频video_player与缓存flutter_cache_manager。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 依赖

  video_player: ^2.6.0
  flutter_cache_manager: ^3.3.1

2. 缓存flutter_cache_manager

参考官方DefaultCacheManager代码,这里引入Config可以指定天数与最大个数.
文件名 video_cache.dart

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

/// The DefaultCacheManager that can be easily used directly. The code of
/// this implementation can be used as inspiration for more complex cache
/// managers.
class MyDefaultCacheManager extends CacheManager with ImageCacheManager {
  static const key = 'libCachedImageData';

  static final MyDefaultCacheManager _instance = MyDefaultCacheManager._();

  factory MyDefaultCacheManager() {
    return _instance;
  }

  MyDefaultCacheManager._()
      : super(Config(
          key,
          stalePeriod: const Duration(days: 7),
          maxNrOfCacheObjects: 20,
          repo: JsonCacheInfoRepository(databaseName: key),
          fileService: HttpFileService(),
        ));
}

3. 视频video_player

使用 await MyDefaultCacheManager().getSingleFile(url)) 即可文章来源地址https://www.toymoban.com/news/detail-722697.html

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

// main.dart可以打开
// void main() {
//   runApp(MyApp());
// }

class MyApp extends StatefulWidget {
  
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late VideoPlayerController controller;
  bool isInitController = false;
  List mediaList = [
    {'type': 'video', 'url': 'https://static.ybhospital.net/test-video-10.MP4'},
    {
      'type': 'image',
      'url': 'https://img-home.csdnimg.cn/images/20230817060240.png'
    },
    {'type': 'video', 'url': 'https://static.ybhospital.net/test-video-6.mp4'},
    {'type': 'video', 'url': 'https://static.ybhospital.net/test-video-4.mp4'}
  ];
  int index = 0;

  
  void initState() {
    super.initState();
    initController();
  }

  initController() async {
    isInitController = false;
    controller = VideoPlayerController.file(
        await MyDefaultCacheManager().getSingleFile(mediaList[index]['url']))
      ..initialize().then((_) {
        setState(() {
          isInitController = true;
        });
        controller.addListener(_videoListener);
        controller.play();
      });
  }

  
  void dispose() {
    if (isInitController != false) {
      controller.removeListener(_videoListener);
      controller.dispose();
    }

    super.dispose();
  }

  _videoListener() {
    if (isInitController == false) return;

    if (controller.value.position == controller.value.duration) {
      next();
    }
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Container(
            child: mediaList[index]['type'] == 'video'
                ? (isInitController
                    ? AspectRatio(
                        aspectRatio: controller.value.aspectRatio,
                        child: VideoPlayer(controller),
                      )
                    : Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          CircularProgressIndicator(),
                          SizedBox(height: 20),
                          Text('Loading'),
                        ],
                      ))
                : Image.network(mediaList[index]['url']),
          ),
        ),
      ),
    );
  }

  next() {
    setState(() {
      if (isInitController != false && controller.value.isInitialized) {
        isInitController = false;
        controller.removeListener(_videoListener);
        controller.dispose();
      }

      index++;
      if (index >= mediaList.length) {
        index = 0;
      }

      if (mediaList[index]['type'] == 'video') {
        initController();
      } else {
        Future.delayed(Duration(seconds: 10), next);
      }
    });
  }

  void prev() {
    setState(() {
      if (index > 0) {
        index--;
      } else {
        index = mediaList.length - 1;
      }

      if (mediaList[index]['type'] == 'video') {
        initController();
      } else {
        Future.delayed(Duration(seconds: 10), next);
      }
    });
  }
}

到了这里,关于Flutter 视频video_player与缓存flutter_cache_manager的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-video_player插件播放抖音直播实现(仅限Android端)

    flutter开发实战-video_player插件播放抖音直播实现(仅限Android端) 在之前的开发过程中,遇到video_player播放视频,通过查看video_player插件描述,可以看到video_player在Android端使用exoplayer,在iOS端使用的是AVPlayer。由于iOS的AVPlayer不支持flv、m3u8格式的直播,这里video_player播放抖音直

    2024年02月05日
    浏览(34)
  • Flutter:文件读取—— video_player、chewie、image_picker、file_picker

    简单学习一下几个比较好用的文件读取库 简介 用于视频播放 官方文档 https://pub-web.flutter-io.cn/packages/video_player 安装 加载网络视频 加载本地视频 设置倍速和进度条 video_player 虽然是官方提供的插件,但是很明显它只适合拿来简单的播放视频,就比如前端的 video 标签功能也很

    2024年02月13日
    浏览(32)
  • Vue视频插件(vue-video-player)

    前言 在新的项目中用到了大量的视频,由此也学习了一款vue的前端视频播放插件,接下来分享一下 vue-video-player安装 文档 vue-video-player 安装完 可以在node_modules中查看 部分视频播放插件 vue-video-player 组件 根据自己的需求进行开发即可 取视频第一帧做背景图 要20岁了,加油

    2024年02月12日
    浏览(32)
  • Unity视频播放之Video Player的简单使用

    使用Unity自带的VideoPlayer来播放视频 一、准备视频 Unity3D常用视频格式:.mov、.mpg、.mpeg、.mp4、.avi、.asf 如果都不识别,试试转换成ogv格式。转换完成之后,将视频素材文件拖入Unity Assets 文件夹内。 二、创建UI及添加组件 创建RenderTexture资源,设置分辨率,跟视频分辨率一致

    2024年01月18日
    浏览(76)
  • Unity2020Video player发布后无法播放视频问题

    我也是小白,用Unity过程中也是遇到很多草蛋问题,我在做demo的时候第一次用到Unity的video player,听说ogv格式能直接播放,我就把视频转了ogv格式,然后放到clip里,编辑器里运行完全没问题,发布打包后就播放不了,黑屏都没有,直接视频没了,百度搜的绝对路径说是放到

    2024年02月15日
    浏览(40)
  • 【vue】 vue 实现视频播放 vue-video-player

    注:用来测试的在线视频url地址 1.下载依赖 vue2 推荐下载指定版本依赖,不然可能下载不下来报错。 2.全局注册main.js 3.新建vue文件 下班`

    2024年02月16日
    浏览(29)
  • 前端实现视频播放功能----vue-video-player --save

    步骤一: npm安装插件 : npm install vue-video-player --save 如果报错 安装具体版本 如下所示: npm install --save vue-video-player@4.0.6  如果package.json文件内显示则为安装成功 步骤二: 局部引入---这里因为只有一个页面需要所有采用的局部引入 在需要的页面引入(这里注意路径不要写错

    2024年02月10日
    浏览(30)
  • vue-video-player,springboot实现视频分段下载播放

    事情的起因是在博主把项目部署到服务器上后,发现由于视频太大,加上服务器太垃圾,导致稍微大点的视频加载很久才能播放(指十多分钟…),然后就上网查找资料,看下咋实现。 这里涉及到有关http请求的知识“HTTP Header里的Range和Content-Range参数,Range是在请求头里 Ra

    2023年04月13日
    浏览(50)
  • vue 使用vue-video-player加载视频(铺满容器)

    安装 main.js 引入 使用 使视频铺满容器

    2024年02月13日
    浏览(30)
  • Unity零基础到进阶 ☀️| 视频播放器 Video Player组件 详解

    🎬 博客主页:

    2024年02月13日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包