接上一篇文章Flutter实现一个简单的音视频App（四），由于我有段时间没有更新博客了（做项目去了），不过后面的博客会更新比较快一点，而且我都会录好视频，欢迎关注我的公众号dongda_5g和加QQ群（174353204），有任何问题我都会回复。

进入正题：

我们先做一个简单的视频播放demo，github地址：https://github.com/jishaofeng89/video_player_demo。

1. 我们先引入插件，这里我用的是video_player插件，截至作者写作时，最新版本为0.11.0。

     video_player: ^0.11.0
   

2. 上代码

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

class VideoPlayerPage extends StatefulWidget {
  VideoPlayerPage({Key key}) : super(key: key);

  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {

  VideoPlayerController _videoPlayerController;

  // 解码url
  String url = "https://v.360inhands.com/%E3%80%90iOS%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83%E3%80%91%E7%AC%AC%E4%B8%83%E5%9B%9E%20%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E8%A6%81%E4%BB%8E%E7%BD%91%E7%BB%9C%E4%B8%8B%E8%BD%BD%EF%BC%8C%E5%B1%95%E7%8E%B0%E6%95%B0%E6%8D%AE%E9%9C%80%E8%A6%81%E6%9C%AC%E5%9C%B0%E8%A7%A3%E6%9E%90%20-%201.1%28Av6497757%2CP1%29.mp4";
  bool _isPlaying = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _videoPlayerController = VideoPlayerController.network(url);
    _videoPlayerController.initialize().then((value) {
      // 界面重新渲染
      setState(() {
        
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _videoPlayerController.value.initialized ?
      AspectRatio(
        aspectRatio: _videoPlayerController.value.aspectRatio,
        child: Stack(
          children: [
            VideoPlayer(
              _videoPlayerController
            ),
            Positioned(
              bottom: 0,
              child: GestureDetector(
                child: Icon(
                  _isPlaying ? Icons.pause : Icons.play_arrow,
                  color: Colors.blueAccent,
                ),
                onTap: () {
                  if(_isPlaying) {
                    _videoPlayerController.pause();
                  } else {
                    _videoPlayerController.play();
                  }
                  setState(() {
                    _isPlaying = ! _isPlaying;
                  });
                },
              ),
            ),
          ],
        ),
      )
      : Container(
        child: Center(
          child: Text('加载中。。。'),
        ),
      ),
    );
  }
}

3.使用

import 'package:flutter/material.dart';
import 'package:video_player_demo/video_player_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  final String url = "https://v.360inhands.com/%E3%80%90iOS%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83%E3%80%91%E7%AC%AC%E4%B8%83%E5%9B%9E%20%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E8%A6%81%E4%BB%8E%E7%BD%91%E7%BB%9C%E4%B8%8B%E8%BD%BD%EF%BC%8C%E5%B1%95%E7%8E%B0%E6%95%B0%E6%8D%AE%E9%9C%80%E8%A6%81%E6%9C%AC%E5%9C%B0%E8%A7%A3%E6%9E%90%20-%201.1%28Av6497757%2CP1%29.mp4";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: VideoPlayerPage(url: url),
    );
  }
}

注意事项

• video_player这个插件在iOS上不能直接播放，需要用真机调试，原因跟iOS的AVPlayer有关。
• 在iOS需要配置info.plist

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

github地址：https://github.com/jishaofeng89/video_player_demo

视频地址：https://www.bilibili.com/video/BV1x54y1k7Ce/