57Flutter vide0_Player视频播放

最新推荐文章于 2024-11-15 10:33:01 发布

原创最新推荐文章于 2024-11-15 10:33:01 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

Flutter 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了Flutter的video_player插件，用于在iOS、Android和Web平台上播放视频。详细讲解了依赖配置、权限设置、常用方法及播放信息的获取。通过实例展示了如何播放本地和网络视频，包括播放控制、音量调整、循环播放等功能。同时提醒注意不同平台的播放速度限制和性能优化建议。

Flutter vide0_Player视频播放

1.简介

vide_Player适用于iOS，Android和Web的Flutter插件，用于在Widget曲面上播放视频。官网维护的一套

注意：此插件仍在开发中，某些API可能尚不可用。后续会添加上来

2.使用

1.依赖

dependencies:
  video_player: ^2.1.1

import 'package:video_player/video_player.dart';

2.IOS

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

3.android

<uses-permission android:name="android.permission.INTERNET"/>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

注意：在Android 29以上的版本，需要添加该配置

    <application
      android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_first"
        android:requestLegacyExternalStorage="true"
        android:usesCleartextTraffic="true"
        android:icon="@mipmap/ic_launcher">

3.常用方法说明

_controller.seekTo(position); //设置视频播放位置跳转至指定时间（duration类型）
_controller.pause();//暂停
_controller.play(); //播放
_controller.setVolume(volume);  //设置视频的音量（double类型）
_controller.setLooping(looping);//设置是否循环播放（bool类型）
_controller.addListener(() { });//监听，可以应用于进度条的监听刷新等等场景
_controller.dispose(); //关闭Gui页面，一般有固定写法
_controller.setPlaybackSpeed(speed);//设置播放数据

——————————注意：使用addListener时，尽量使用局部刷新，而不是全局刷新，提升UI性能

注意问题：

设置this的播放速度。
speed表示速度值，不同的平台接受不同的速度值范围。在speed必须大于0。
这些值将按以下方式处理：
在网络上，当浏览器确定声音不再有用时，音频将以某种速度静音。例如，“壁虎将范围外的声音静音0.25为5.0”（请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate）。
在Android上，某些非常极端的速度将无法正确播放。取而代之的是，您的视频仍会播放，但ExoPlayer会限制速度（但该值是由播放器允许的，例如在Web上）。
在iOS上，有时您无法超过2.0视频的播放速度。如果不支持该选项，将引发错误。也有可能您的特定视频无法放慢速度，在这种情况下，该插件还会报告错误。

4.播放信息获取

 //获取当前视频播放的信息
    VideoPlayerValue videoPlayerValue = _videoPlayerController.value;

    //是否初始化完成
    bool initialized = videoPlayerValue.initialized;
    //是否正在播放
    bool isPlaying = videoPlayerValue.isPlaying;
    //当前播放的视频的宽高比例
    double aspectRatio = videoPlayerValue.aspectRatio;
    //当前视频是否缓存
    bool isBuffer = videoPlayerValue.isBuffering;
    //当前视频是否循环
    bool isLoop = videoPlayerValue.isLooping;
    //当前播放视频的总时长
    Duration totalDuration = videoPlayerValue.duration;
    //当前播放视频的位置
    Duration currentDuration = videoPlayerValue.position;
    if (initialized) {
      // 视频已初始化
      if (isPlaying) {
        // 正播放 --- 暂停
        _videoPlayerController.pause();
      } else {
        //暂停 ----播放
        _videoPlayerController.play();
      }
      setState(() {});
    } else {
      //未初始化
      _videoPlayerController.initialize().then((_) {
        // videoPlayerController.play();
        // setState(() {});
      });
    }

播放本地asset视频和File

    _videoPlayerController =
        VideoPlayerController.asset('assets/Butterfly-209.mp4');

VideoPlayerUI.file

代码如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoDemo(),
    );
  }
}

class VideoDemo extends StatefulWidget {
  @override
  _VideoDemoState createState() => _VideoDemoState();
}

class _VideoDemoState extends State<VideoDemo> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
    ..initialize().whenComplete((){
      setState(() {
        print('准备好了1${_controller.value.isInitialized}');
      });
    });

    _controller.setLooping(true);//循环播放
    Duration duration = Duration(seconds: 10);
    _controller.seekTo(duration);
    _controller.setVolume(3.0);
    _controller.addListener(() {
      print('播放');
      print('${_controller.value.duration}');
    });

    // _controller =
    //     VideoPlayerController.asset("asset资源路径");

  }

  @override
  Widget build(BuildContext context) {
    print('准备好了2${_controller.value.isInitialized}');
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
              : Container(color: Colors.red),
        ),
        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();
  }
}