Flutter VideoPlayer 视频播放

flutter的VideoPlayer 需要引入第三方框架来实现

//依赖
video_player: ^0.10.11

三方框架原地址

VideoPlayer的简单使用

class MyHome extends StatefulWidget {     //必须写在有状态组件内
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  VideoPlayerController _controller;      //先定义一个VideoPlayer的控制器变量
  @override
  void initState() {    //重写组件初始化方法
    // TODO: implement initState
    super.initState();           
    _controller=VideoPlayerController.network(//定义连接器内容，这里初学者可能有点难懂下面详细讲
      "http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
    )..initialize().then((a){
      setState(() {

      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('视频测试'),
      ),
      body: Center(
        child: _controller.value.initialized ? AspectRatio(   //     这里和上面是联动的，下面详细讲
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        ):Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        )
      ),
      floatingActionButton: FloatingActionButton(   //随便定义一个按钮用于测试
        onPressed: () {
          setState(() {
            _controller.value.isPlaying   //设置播放状态
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

使用起来还是挺简单的，但是初学者的话，我标出来的那两个地方感觉还是挺难懂的，我下面会详细说一下

 void initState() {    //重写组件初始化方法
    // TODO: implement initState
    super.initState();           
    _controller=VideoPlayerController.network(//定义连接器内容，
      "http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
    )..initialize().then((a){
      setState(() {

      });
    });
  }

这里是创建了一个网络连接的VideoPlayerController挺好懂的，然后后面通过级联的方式调用了控制器里面的初始化方法initialize()，因为得需要网络连接，所以这个初始化方法是一个异步方法返回一个布尔值，记住这里是异步下面会说，然后调用Then()等这个异步方法执行完毕后，进行一个页面刷新

Center(
        child: _controller.value.initialized ? AspectRatio(   //三元运算符
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        ):Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        )
      ),

上面这里是组件初始化的时候，进行一个三目运算，判断初始化返回的布尔值，如果为true返回一个AspectRatio控件显示视频，如果不为true我反回了一个长宽100的蓝色方块，下面看运行效果

image.png

可以看见刚运行的时候显示的是一个蓝色的方块

image.png

短暂延迟后显示的视频播放控件，因为我们VideoPlayer控制器初始化过程是一个异步过程，前面给控制器赋值的时候，等初始化完毕了进行页面刷新的异步操作，所以下面的三目运算，刚加载的时候会加载我们的蓝色方块，然后等初始化完毕，执行了刷新页面方法，三目运算就会返回咱们的视频播放控件，然后就可以播放了

代码是三方库的示例代码，基本用法就是这些大家可以尽情扩展，定义自己的播放器，例如可以把现在的蓝色方块替换成圆形进度条，有兴趣的可以去三方库查看源码，上面挂了地址

展示效果.gif

简单的实现了一些功能，加载视频的时候圆形进度，横向全屏，点击暂停等，代码在下面

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

void main(){

  return runApp(MyApp2());
}


class MyApp2 extends StatefulWidget {
  @override
  _MyApp2State createState() => _MyApp2State();

}

class _MyApp2State extends State<MyApp2> {
  @override
  void initState() {
    super.initState();
    // Add code after super
    OrientationPlugin.forceOrientation(DeviceOrientation.landscapeRight);   //强制切换屏幕方向
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Video",
      home: MyHome(),
    );
  }
}




class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  VideoPlayerController _controller;  //定义一个控制器变量
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller=VideoPlayerController.network(
      "http://shuixian.nihaozuida.com/20200622/5973_858fd5b6/index.m3u8"
    )..initialize().then((a){
      setState(() {
        _controller.play();
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    int dyone=0;
    var isPlay=_controller.value.isPlaying;
    List<Widget> a1=List();
    a1.add(Center(
        child:GestureDetector(
            onTap: (){
              setState(() {
                _controller.value.isPlaying?
                _controller.pause():_controller.play();
              });
            },
            child:  _controller.value.initialized ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            ):CircularProgressIndicator(backgroundColor: Colors.white,))
    ));
    if(_controller.value.initialized&&!isPlay){
      a1.add(Icon(Icons.arrow_drop_down_circle,size: 100));
    }
    return new Stack(
      alignment: Alignment.center,
      children:a1,
    );
  }
}