3分钟快速实现Flutter当中播放视频方案 支持Android iOS 通用

这篇文章介绍一下在Flutter当中播放视频,我们用到了第三方到一个插件,目前flutter上面还没有原生支持,可以在pub.dev上面找一些插件来解决。

本头条核心宗旨

欢迎来到「技术刚刚好」头条,本头条是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。

技术刚刚好经历

近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。希望跟大家一起学习,一起进步!

本文核心要点

video_player是一个用于Flutter语言当中的一个插件,有了它我们就很快实现在Fluttter当中实现视频到播放效果,插件地址:https://pub.dev/packages/video_player 效果如下:

我觉得目前运用这个插件就够了,能解决我们大部分到视频播放。

3分钟快速实现Flutter当中播放视频方案 支持Android iOS 通用

效果图

IOS底层运用了avplayer进行播放

做之前可以看看这个播放器到地址:https://developer.apple.com/documentation/avfoundation/avplayer

了解一下这个播放器支持哪些格式,其实就是原生到播放器来播放到。

Android底层播放用到了ExoPlayer播放器

播放器地址:https://exoplayer.dev/

这个播放器也是google自己家出的

安装video_player播放器

首先,在pubspec.yaml文件中添加video_player为依赖项。

iOS

警告:视频播放器在iOS模拟器上不起作用。开发/测试期间必须使用iOS设备。

将以下条目添加到您的Info.plist文件中<project>/ios/Runner/Info.plist:/<project>

NSAppTransportSecurity
<dict>
NSAllowsArbitraryLoads
<true>
/<dict>

此项允许您的应用通过URL访问视频文件。

Android

确保位于以下位置的Android清单文件中存在以下权限<project>/android/app/src/main/AndroidManifest.xml:/<project>

<uses-permission>

Flutter项目模板将其添加,因此它可能已经存在。

支持的格式

  • 在iOS上,后备播放器是AVPlayer。支持的格式取决于iOS的版本,AVURLAsset类具有audiovisualTypes,您可以查询支持的av格式。
  • 在Android上,后备播放器是ExoPlayer,有关支持的格式列表,请参阅此处。

例子

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


void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
@override
_VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<videoapp> {
VideoPlayerController _controller;

@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}


@override
void dispose() {
super.dispose();
_controller.dispose();
}
}/<videoapp>

总结

这篇文章运用了插件方案来解决在Flutter跨平台播放视频到解决方案,一般到需求能够应付,很多公司开发重要到时业务流程,只要能够快速实现运用要求,尽快上线才是王道。

谢谢观看技术刚刚好头条文章,本头条是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。


分享到:


相關文章: