Flutter 視頻播放

在 Flutter 里官方提供了一個(gè) video_player插件可以播放視頻。

先安裝依賴:

dependencies:
  video_player: ^0.6.4

基本使用

class _VideoAppState extends State<VideoApp> {
    VideoPlayerController _controller;
    bool _isPlaying = false;
    String url = 'http://vd3.bdstatic.com/mda-ifvq' +
                'u9yp3eaqueep/mda-ifvqu9yp3eaqueep.mp4';

    @override
    void initState() {
        super.initState();
        _controller = VideoPlayerController.network(this.url)
        // 播放狀態(tài)
        ..addListener(() {
            final bool isPlaying = _controller.value.isPlaying;
            if (isPlaying != _isPlaying) {
                setState(() { _isPlaying = isPlaying; });
            }
        })
        // 在初始化完成后必須更新界面
        ..initialize().then((_) {
            setState(() {});
        });
    }

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

下面是在模擬器下看到的效果(略卡)。


video_player 的 controller 有以下方法可用:

  • initialize() - 初始化播放器。
  • dispose() - 釋放播放器資源。
  • notifyListeners() - 監(jiān)聽(tīng)播放消息。
  • addListener(listener) - 添加監(jiān)聽(tīng)器。
  • removeListener(listener) - 移除監(jiān)聽(tīng)器。
  • pause() - 暫停播放。
  • play() - 開(kāi)始播放。
  • position - 播放位置。
  • seekTo(moment) - 指定到某個(gè)位置播放。
  • setLooping(looping) - 是否循環(huán)播放。
  • setVolume(volume) - 設(shè)置音量大小。

使用 chewie

chewie,是一個(gè)非官方的第三方視頻播放組件,看起來(lái)好像是基于 HTML5 播放的組件。chewie 相對(duì) video_player 來(lái)說(shuō),有控制欄和全屏的功能。Chewie 使用 video_player 引擎并將其包裹在友好的 Material 或 Cupertino UI 中!
安裝依賴:

dependencies
  chewie: ^0.6.1

基本使用:

import 'package:chewie/chewie.dart';

new Center(
    child: new Chewie(
        new VideoPlayerController.network(this.url),
        aspectRatio: 16 / 9,
        autoPlay: !true,
        looping: true,
        showControls: true,
        // 占位圖
        placeholder: new Container(
            color: Colors.grey,
        ),

        // 是否在 UI 構(gòu)建的時(shí)候就加載視頻
        autoInitialize: !true,

        // 拖動(dòng)條樣式顏色
        materialProgressColors: new ChewieProgressColors(
            playedColor: Colors.red,
            handleColor: Colors.blue,
            backgroundColor: Colors.grey,
            bufferedColor: Colors.lightGreen,
        ),
    ),
),


chewie 實(shí)際上就是為 video_player 做了一個(gè) UI 上的封裝,因?yàn)?UI 實(shí)在長(zhǎng)得太像。

控制欄樣式?

chewie 并不能自定義控制欄樣式,那只能自己修改源碼了(修改的版本是 v0.6.1)。

首先打開(kāi)文件:chewie/lib/src/material_controls.dart,在里面定義兩個(gè)變量。

const lightColor = Color.fromRGBO(255, 255, 255, 0.85);
const darkColor = Color.fromRGBO(1, 1, 1, 0.35);
接著添加顏色值。

// 在 _buildExpandButton 下,大約 127 行
child: new Icon(
    widget.fullScreen ? Icons.fullscreen_exit : Icons.fullscreen,
    color: lightColor,
),

// 在 _buildHitArea 下,大約 157 行
decoration: new BoxDecoration(
    color: Colors.black54,
    borderRadius: new BorderRadius.circular(48.0),
),
// 167 行
child: new Icon(
    Icons.play_arrow,
    size: 32.0,
    color: lightColor,
),

// 在 _buildMuteButton 下,大約 206 行
child: new Icon(
    color: lightColor,
),

// 在 _buildPlayPause 下,大約 228 行
child: new Icon(
    controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
    color: lightColor,
),

// 在 _buildPosition 下,大約 244 行
style: new TextStyle(
    fontSize: 14.0,
    color: lightColor,
),

// 在 _buildProgressBar 下,尾行
new ChewieProgressColors(
    playedColor: lightColor,
    handleColor: lightColor,
    bufferedColor: Colors.white30,
    backgroundColor: darkColor,
),

此外 chewie 在全屏?xí)r沒(méi)有一個(gè)退出全屏的返回按鈕和標(biāo)題顯示,接著改。

// 在 build 里加一個(gè) _buildHeader(),這個(gè) header 需要自己定義。
@override
Widget build(BuildContext context) {
    return new Column(
        children: <Widget>[
            // 在全屏?xí)r才顯示
            widget.fullScreen ? _buildHeader(context, _title) : new Container(),
            _buildHitArea(),
            _buildBottomBar(context, widget.controller),
        ],
    );
}

AnimatedOpacity _buildHeader(BuildContext context, String title) {
    return new AnimatedOpacity(
        opacity: _hideStuff ? 0.0 : 1.0,
        duration: new Duration(milliseconds: 300),
        child: new Container(
            color: darkColor,
            height: barHeight,
            child: new Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                    new IconButton(
                        onPressed: _onExpandCollapse,
                        color: lightColor,
                        icon: new Icon(Icons.chevron_left),
                    ),
                    new Text(
                        '$title',
                        style: new TextStyle(
                            color: lightColor,
                            fontSize: 18.0,
                        ),
                    ),
                ],
            ),
        ),
    );
}

標(biāo)題是從上下文獲取的,因此要一級(jí)一級(jí)的傳遞下去。

// chewie/lib/src/chewie_player.dart 文件

// 標(biāo)題
final String title;

// 在構(gòu)造函數(shù)處
this.title = '',

// 在 92 行左右,PlayerWithControls 構(gòu)造的時(shí)候(有兩個(gè)位置,兩個(gè)都要加)
title: widget.title,

// chewie/lib/src/player_with_controls.dart 文件

// 標(biāo)題
final String title;

// 在構(gòu)造函數(shù)處
this.title = '',

// 在 92 行左右,MaterialControls 構(gòu)造的時(shí)候
title: widget.title,

// chewie/lib/src/material_controls.dart
final String title;
@required this.title,
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1、通過(guò)CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫(kù)組件 SD...
    陽(yáng)明AGI閱讀 16,003評(píng)論 3 119
  • 想你的時(shí)候 真的是要哭出來(lái)了呢 我什么時(shí)候 才可以云淡風(fēng)輕的說(shuō)一句 啊 又想起你了
    十八只魚閱讀 326評(píng)論 5 4
  • 今天一哥們給我打電話說(shuō)自己要裝監(jiān)控,我問(wèn)他要幾個(gè),他說(shuō),十來(lái)個(gè)吧。我的大兄弟,在哪發(fā)了橫財(cái),買了什么豪宅啊,要這么...
    暖心晴子閱讀 268評(píng)論 0 0
  • 年輕時(shí)總想著有機(jī)會(huì)能乘坐飛機(jī)旅行一次,想象著那是一種多么高端、大氣、上檔次的人生體驗(yàn)。 97年的春天,機(jī)會(huì)終于來(lái)了...
    清淺墨客閱讀 307評(píng)論 0 1