flutter开发实战-ijkplayer视频播放器功能

2024-02-04 15:12
文章标签 实战 视频 功能 开发 flutter 播放器 ijkplayer

本文主要是介绍flutter开发实战-ijkplayer视频播放器功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

flutter开发实战-ijkplayer视频播放器功能

使用better_player播放器进行播放视频时候，在Android上会出现解码失败的问题，better_player使用的是video_player，video_player很多视频无法解码。最终采用ijkplayer播放器插件，在flutter上使用fijkplayer插件。
在这里插入图片描述
在这里插入图片描述

一、引入fijkplayer

在使用fijkplayer前可以先看下https://fijkplayer.befovy.com/docs/zh/fijkplayer-api.html

在工程的pubspec.yaml中引入插件

  fijkplayer: ^0.11.0

fijkPlayer 就是对 native C 层 ijkplayer 的一个 dart 包装，接口都保持一致。 FijkPlayer 处理所有播放相关的工作，实际工作都是由 native C 层 ijkplayer 完成，包含检查 dataSource 中的媒体信息，打开解码器和解码线程、打开音频输出设备、将解码后数据输出给音频设备或显示设备。

二、使用fijkplayer

2.1、IJKVideoPlayerController控制常用操作

使用fijkplayer，这里创建了IJKVideoPlayer来嵌套一下FijkView，使用IJKVideoPlayerController来控制常用功能操作

IJKVideoPlayerController如下

import 'dart:async';class IJKVideoPlayerController {FutureOr Function()? stop;FutureOr Function()? pause;FutureOr Function()? play;FutureOr Function(int msec)? seekTo;FutureOr Function(double volume)? setVolume;FutureOr Function(double speed)? setSpeed;FutureOr Function(int loopCount)? setLoop;FutureOr Function()? isPlaying;
}

IJKVideoPlayerController来控制停止、暂停、播放、seek、设置音量、设置播放速率、设置循环次数、获取是否在播放中等。

  • 播放视频
  void play() {if (videoPlayerController.play != null) {videoPlayerController.play!.call();}}
  • 暂停视频播放
  void pause() {if (videoPlayerController.pause != null) {videoPlayerController.pause!.call();}}
  • 停止视频播放
  void stop() {if (videoPlayerController.stop != null) {videoPlayerController.stop!.call();}}
  • seek指定位置
  void seekTo(int msec) {if (videoPlayerController.seekTo != null) {videoPlayerController.seekTo!.call(msec);}}
  • 设置音量
  void setVolume(double volume) {if (videoPlayerController.setVolume != null) {videoPlayerController.setVolume!.call(volume);}}
  • 设置播放速率
  void setSpeed(double speed) {if (videoPlayerController.setSpeed != null) {videoPlayerController.setSpeed!.call(speed);}}
  • 设置循环次数
  void setLoop(int loopCount) {if (videoPlayerController.setLoop != null) {videoPlayerController.setLoop!.call(loopCount);}}
  • 获取是否播放中
  Future<bool?> isPlaying() async {if (videoPlayerController.isPlaying != null) {bool videoIsPlaying = await videoPlayerController.isPlaying!.call();return videoIsPlaying;}return Future.value(null);}

2.2、在ijkplayer设置source，使用FijkPlayer

在设置播放器的时候，需要设置source类型。fijkplayer提供了两种方式，一种是本地工程文件、一种是网络视频地址。

  • 设置网络视频源
  /// usage/// autoPlay 为 true 时等同于连续调用 setDataSource、prepareAsync、startfplayer.setDataSource("http://samplevideo.com/sample.flv", autoPlay: true);
  • 设置本地资源作为播放源
  /// pubspec.yml 中需要指定assets 内容///   assets:///     - assets/butterfly.mp4////// scheme 是 `asset`, `://` 是 scheme 分隔符， `/` 是路径起始符号fplayer.setDataSource("asset:///assets/butterfly.mp4", autoPlay: true);

在setDataSource还有autoPlay（自动播放），showCover（是否显示视频封面，视频默认获取第一帧作为视频封面）

2.3、FijkView显示视频的控件Widget

在fijkplayer中，使用FijkView来显示视频。

  FijkView({required this.player,this.width,this.height,this.fit = FijkFit.contain,this.fsFit = FijkFit.contain,this.panelBuilder = defaultFijkPanelBuilder,this.color = const Color(0xFF607D8B),this.cover,this.fs = true,this.onDispose,});

可以设置显示fit、全屏的fit、背景颜色color、封面图（设置之后会显示在视频播放的上面）、是否全屏等。

在这里我们如果需要自定义样式，可以替换掉panelBuilder。

2.4、自定义控件IJKVideoPanel

在这里我们如果需要自定义样式，可以替换掉panelBuilder。我们自定义一个IJKVideoPanel，这个大部分代码来源default，这里调整了部分样式。

IJKVideoPanel完整代码如下

import 'dart:async';
import 'dart:math';import 'package:fijkplayer/fijkplayer.dart';
import 'package:flutter/material.dart';class IJKVideoPanel extends StatefulWidget {const IJKVideoPanel({super.key,required this.player,required this.buildContext,required this.viewSize,required this.texturePos,});final FijkPlayer player;final BuildContext buildContext;final Size viewSize;final Rect texturePos;@overrideState<IJKVideoPanel> createState() => _IJKVideoPanelState();
}class _IJKVideoPanelState extends State<IJKVideoPanel> {FijkPlayer get player => widget.player;Duration _duration = Duration();Duration _currentPos = Duration();Duration _bufferPos = Duration();bool _playing = false;bool _prepared = false;String? _exception;// bool _buffering = false;double _seekPos = -1.0;StreamSubscription? _currentPosSubs;StreamSubscription? _bufferPosSubs;//StreamSubscription _bufferingSubs;Timer? _hideTimer;bool _hideStuff = true;double _volume = 1.0;final barHeight = 40.0;@overridevoid initState() {super.initState();_duration = player.value.duration;_currentPos = player.currentPos;_bufferPos = player.bufferPos;_prepared = player.state.index >= FijkState.prepared.index;_playing = player.state == FijkState.started;_exception = player.value.exception.message;// _buffering = player.isBuffering;player.addListener(_playerValueChanged);_currentPosSubs = player.onCurrentPosUpdate.listen((v) {setState(() {_currentPos = v;});});_bufferPosSubs = player.onBufferPosUpdate.listen((v) {setState(() {_bufferPos = v;});});}void _playerValueChanged() {FijkValue value = player.value;if (value.duration != _duration) {setState(() {_duration = value.duration;});}bool playing = (value.state == FijkState.started);bool prepared = value.prepared;String? exception = value.exception.message;if (playing != _playing ||prepared != _prepared ||exception != _exception) {setState(() {_playing = playing;_prepared = prepared;_exception = exception;});}}void _playOrPause() {if (_playing == true) {player.pause();} else {player.start();}}@overridevoid dispose() {super.dispose();_hideTimer?.cancel();player.removeListener(_playerValueChanged);_currentPosSubs?.cancel();_bufferPosSubs?.cancel();}void _startHideTimer() {_hideTimer?.cancel();_hideTimer = Timer(const Duration(seconds: 3), () {setState(() {_hideStuff = true;});});}void _cancelAndRestartTimer() {if (_hideStuff == true) {_startHideTimer();}setState(() {_hideStuff = !_hideStuff;});}Widget _buildVolumeButton() {IconData iconData;if (_volume <= 0) {iconData = Icons.volume_off;} else {iconData = Icons.volume_up;}return IconButton(icon: Icon(iconData, color: Colors.white),padding: EdgeInsets.only(left: 10.0, right: 10.0),onPressed: () {setState(() {_volume = _volume > 0 ? 0.0 : 1.0;player.setVolume(_volume);});},);}AnimatedOpacity _buildBottomBar(BuildContext context) {double duration = _duration.inMilliseconds.toDouble();double currentValue =_seekPos > 0 ? _seekPos : _currentPos.inMilliseconds.toDouble();currentValue = min(currentValue, duration);currentValue = max(currentValue, 0);return AnimatedOpacity(opacity: _hideStuff ? 0.0 : 0.8,duration: Duration(milliseconds: 400),child: Container(height: barHeight,decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.transparent, Colors.black45],begin: Alignment.topCenter,end: Alignment.bottomCenter,),),child: Row(children: <Widget>[_buildVolumeButton(),Padding(padding: EdgeInsets.only(right: 5.0, left: 5),child: Text('${_duration2String(_currentPos)}',style: TextStyle(fontSize: 14.0, color: Colors.white),),),_duration.inMilliseconds == 0? Expanded(child: Center()): Expanded(child: Padding(padding: EdgeInsets.only(right: 0, left: 0),child: FijkSlider(value: currentValue,cacheValue: _bufferPos.inMilliseconds.toDouble(),min: 0.0,max: duration,onChanged: (v) {_startHideTimer();setState(() {_seekPos = v;});},onChangeEnd: (v) {setState(() {player.seekTo(v.toInt());print("seek to $v");_currentPos =Duration(milliseconds: _seekPos.toInt());_seekPos = -1;});},),),),// duration / position_duration.inMilliseconds == 0? Container(child: const Text("LIVE")): Padding(padding: EdgeInsets.only(right: 5.0, left: 5),child: Text('${_duration2String(_duration)}',style: TextStyle(fontSize: 14.0, color: Colors.white),),),//             IconButton(
//               icon: Icon(widget.player.value.fullScreen
//                   ? Icons.fullscreen_exit
//                   : Icons.fullscreen),
//               padding: EdgeInsets.only(left: 10.0, right: 10.0),
// //              color: Colors.transparent,
//               onPressed: () {
//                 widget.player.value.fullScreen
//                     ? player.exitFullScreen()
//                     : player.enterFullScreen();
//               },
//             )//],),),);}@overrideWidget build(BuildContext context) {// Rect rect = player.value.fullScreen//     ? Rect.fromLTWH(0, 0, widget.viewSize.width, widget.viewSize.height)//     : Rect.fromLTRB(//     max(0.0, widget.texturePos.left),//     max(0.0, widget.texturePos.top),//     min(widget.viewSize.width, widget.texturePos.right),//     min(widget.viewSize.height, widget.texturePos.bottom));Rect rect =Rect.fromLTWH(0, 0, widget.viewSize.width, widget.viewSize.height);return Positioned.fromRect(rect: rect,child: GestureDetector(onTap: _cancelAndRestartTimer,child: AbsorbPointer(absorbing: _hideStuff,child: Column(children: <Widget>[Container(height: barHeight),Expanded(child: GestureDetector(onTap: () {_cancelAndRestartTimer();},child: Container(color: Colors.transparent,height: double.infinity,width: double.infinity,child: Center(child: _exception != null? Text(_exception!,style: TextStyle(color: Colors.white,fontSize: 25,),): (_prepared ||player.state == FijkState.initialized)? AnimatedOpacity(opacity: _hideStuff ? 0.0 : 0.85,duration: Duration(milliseconds: 400),child: IconButton(iconSize: barHeight * 2,icon: Icon(_playing? Icons.pause: Icons.play_arrow,color: Colors.white,size: 44,),padding: EdgeInsets.only(left: 10.0, right: 10.0),onPressed: _playOrPause)): SizedBox(width: barHeight * 1.5,height: barHeight * 1.5,child: CircularProgressIndicator(valueColor: AlwaysStoppedAnimation(Colors.white)),)),),),),_buildBottomBar(context),],),),),);}
}String _duration2String(Duration duration) {if (duration.inMilliseconds < 0) return "-: negtive";String twoDigits(int n) {if (n >= 10) return "$n";return "0$n";}String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));int inHours = duration.inHours;return inHours > 0? "$inHours:$twoDigitMinutes:$twoDigitSeconds": "$twoDigitMinutes:$twoDigitSeconds";
}

2.5、嵌套FijkView的IJKVideoPlayer

在使用时候，使用了IJKVideoPlayer来封装了一层FijkView。
在IJKVideoPlayer中设置了videoPlayerController控制播放的操作 如停止、暂停、播放、seek、设置音量、设置播放速率、设置循环次数、获取是否在播放中。

IJKVideoPlayer完整代码如下

  import 'package:fijkplayer/fijkplayer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demolab/ijk_player/ijk_video_panel.dart';import 'ijk_video_player_controller.dart';/// usage
/// autoPlay 为 true 时等同于连续调用 setDataSource、prepareAsync、start
/// fplayer.setDataSource("http://samplevideo.com/sample.flv", autoPlay: true);
///
/// 设置本地资源作为播放源，
/// pubspec.yml 中需要指定assets 内容
///   assets:
///     - assets/butterfly.mp4
///
/// scheme 是 `asset`, `://` 是 scheme 分隔符， `/` 是路径起始符号
/// fplayer.setDataSource("asset:///assets/butterfly.mp4", autoPlay: true);class IJKVideoPlayer extends StatefulWidget {const IJKVideoPlayer({super.key,required this.path,this.autoPlay = false,this.showCover = true,this.fit = FijkFit.contain,this.cover,this.color = Colors.black,this.width,this.height,this.videoPlayerController,});final double? width;final double? height;final String path;final bool autoPlay;final bool showCover;final FijkFit fit;final Widget? cover;final Color color;final IJKVideoPlayerController? videoPlayerController;@overrideState<IJKVideoPlayer> createState() => _IJKVideoPlayerState();
}class _IJKVideoPlayerState extends State<IJKVideoPlayer> {final FijkPlayer player = FijkPlayer();@overridevoid initState() {super.initState();player.setDataSource(widget.path,autoPlay: widget.autoPlay,showCover: widget.showCover,);addVideoPlayerFun();}void addVideoPlayerFun() {if (widget.videoPlayerController != null) {widget.videoPlayerController!.play = () {// 触发播放player.start();};widget.videoPlayerController!.stop = () {// 触发停止player.stop();};widget.videoPlayerController!.pause = () {// 触发暂停player.pause();};widget.videoPlayerController!.setLoop = (int loopCount) {// 触发setLoopif (loopCount < 0) {loopCount = 1;}player.setLoop(loopCount);};widget.videoPlayerController!.seekTo = (int msec) {// 触发seekif (msec < 0) {msec = 0;}player.seekTo(msec);};widget.videoPlayerController!.setVolume = (double volume) {// 触发setVolumeif (volume < 0.0) {volume = 0.0;}player.setVolume(volume);};widget.videoPlayerController!.setSpeed = (double speed) {// 触发setSpeedif (speed < 0.0) {speed = 1.0;}player.setSpeed(speed);};widget.videoPlayerController!.isPlaying = () {// 触发setVolumeif (FijkState.started == player.state) {return true;} else {return false;}};}}@overridevoid dispose() {super.dispose();player.release();}void onIJKDispose(FijkData fijkData) {}@overrideWidget build(BuildContext context) {return Container(alignment: Alignment.center,child: Stack(alignment: Alignment.center,children: [widget.cover != null ? widget.cover! : Container(),FijkView(width: widget.width,height: widget.height,player: player,fit: widget.fit,fsFit: widget.fit,color: widget.color,onDispose: onIJKDispose,panelBuilder: (FijkPlayer player, FijkData data,BuildContext context, Size viewSize, Rect texturePos) {return IJKVideoPanel(player: player,buildContext: context,viewSize: viewSize,texturePos: texturePos,);},),],),);}
}

三、最后使用IJKVideoPlayer的IJKVideoPage页面

这里我创建了一个IJKVideoPage来使用IJKVideoPlayer视频播放，IJKVideoPlayer中需要path与videoPlayerController

IJKVideoPage完整代码如下

  import 'dart:async';import 'package:flutter/material.dart';import 'ijk_player/ijk_video_player.dart';
import 'ijk_player/ijk_video_player_controller.dart';class IJKVideoPage extends StatefulWidget {const IJKVideoPage({super.key,required this.url,});final String url;@overrideState<IJKVideoPage> createState() => _IJKVideoPageState();
}class _IJKVideoPageState extends State<IJKVideoPage> {final IJKVideoPlayerController videoPlayerController =IJKVideoPlayerController();@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {Size size = MediaQuery.of(context).size;return Scaffold(appBar: AppBar(title: Text("Fijkplayer Example")),body: Center(child: Container(width: size.width,height: size.width * 9.0 / 16.0,alignment: Alignment.center,child: IJKVideoPlayer(path: widget.url,videoPlayerController: videoPlayerController,color: Colors.black,),),),);}@overridevoid dispose() {super.dispose();}
}

如果外面的页面跳转到播放页面，需要设置url

  void testIJKVideoPage(BuildContext context) {Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return IJKVideoPage(url: "https://vd2.bdstatic.com/mda-maif0tt1rirqp27q/540p/h264_cae/1611052585/mda-maif0tt1rirqp27q.mp4");}));}

https://brucegwo.blog.csdn.net/article/details/136024588

四、小结

flutter开发实战-ijkplayer视频播放器功能

学习记录，每天不停进步。

这篇关于flutter开发实战-ijkplayer视频播放器功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/677925。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台，是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力，在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术，能够处理多种视频流格式，并以多种格式（RTMP、RTSP、HTTP-FLV、WebS
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2