? ? ? ?本人做視頻監(jiān)控項目的時候，需要去展示視頻流到用戶端，一開始使用flutter自帶的VideoPlayer播放監(jiān)控視頻，一開始沒有發(fā)現(xiàn)有什么問題，因為使用多的是Android模擬器，一直沒有使用iso模擬器或者真機測試能不能播放，直到開發(fā)接近尾聲，在ios模擬器上測試的時候發(fā)現(xiàn)了問題，視頻流為H264的時候能正常播放，但是視頻流為H265的時候一直轉(zhuǎn)圈，模擬器和真機播放不了（Android模擬器和真機都是可以播放的）。后來就打算換一個三方插件來調(diào)整播放。

1. 在pubspec.yaml導(dǎo)入引用的fijkplayer插件

    # 視頻解碼器 軟解碼
     fijkplayer: ^0.10.1

2. 狀態(tài)詳解

   狀態(tài)名	播放器表現(xiàn)
   idle	閑置狀態(tài)，剛完成構(gòu)造的 FijkPlayer 處于此狀態(tài)。 此狀態(tài)下播放器占用少量內(nèi)存，無額外線程啟動。 idle 狀態(tài)只能通過 setDataSource 轉(zhuǎn)換為 initialized 狀態(tài)
   initialized	初始化完成狀態(tài)，和 idle 狀態(tài)相比，僅是多了輸入媒體數(shù)據(jù)源的信息。 同樣無額外線程打開。
   asyncPreparing	異步準(zhǔn)備狀態(tài)，在 initialized 狀態(tài)調(diào)用 prepareAsync 到達(dá)此狀態(tài)。 這不是一個穩(wěn)定狀態(tài)，此狀態(tài)等待特定任務(wù)完成后自動轉(zhuǎn)化為 prepared 狀態(tài)。 這一狀態(tài)的主要準(zhǔn)備工作是 探測媒體文件類型，打開媒體文件，打開解碼器以及新建解碼線程，新建數(shù)據(jù) read 線程，打開音頻輸出設(shè)備，新建視頻輸出線程等。
   prepared	asyncPreparing 完成指定任務(wù)后自動轉(zhuǎn)化為此狀態(tài)。 此狀態(tài)下已經(jīng)開始緩沖解碼了一部分音視頻數(shù)據(jù)，可以隨時進(jìn)行播放。
   started	媒體（視頻、音頻）正在播放中。
   paused	媒體（視頻、音頻）播放暫停。
   completed	媒體（視頻、音頻）播放完成。 可重新從頭開始播放。
   stopped	播放器各種線程占用資源都已經(jīng)釋放。 音頻設(shè)備關(guān)閉。
   end	播放器中所有需要手動釋放的內(nèi)存都釋放完成。 處于此狀態(tài)的播放器只能等待垃圾回收進(jìn)行內(nèi)存釋放。
   error	播放器出現(xiàn)錯誤。

3. 簡單使用代碼如下

   import 'package:fijkplayer/fijkplayer.dart';
   import 'package:flutter/material.dart';
   
   class VideoScreen extends StatefulWidget {
     final String url;//視頻地址
   
     VideoScreen({@required this.url});
   
     @override
     _VideoScreenState createState() => _VideoScreenState();
   }
   
   class _VideoScreenState extends State<VideoScreen> {
     final FijkPlayer player = FijkPlayer();
   
     _VideoScreenState();
   
     @override
     void initState() {
       super.initState();
       //傳入視頻地址，視頻是否自動播放
       player.setDataSource(widget.url, autoPlay: true);
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
           appBar: AppBar(title: Text("視頻監(jiān)控")),
           body: Container(
             alignment: Alignment.center,
             child: FijkView(
               player: player,
             ),
           ));
     }
   
     @override
     void dispose() {
       super.dispose();
       player.release();
     }
   }

   ?
4. 使用后能夠正常播放，但是你發(fā)現(xiàn)UI界面太丑了，或者功能不夠自己使用，需要更多的功能使用才行，別急！三方提供者早就想到了這里，所以提供了可以自己定的UI界面設(shè)置。需要修改panelBuilder更改UI界面，廢話不多說，上代碼。 首先加入自定的UI界面代碼

   class CustomFijkPanel extends StatefulWidget {
     final FijkPlayer player;
     final BuildContext buildContext;
     final Size viewSize;
     final Rect texturePos;
   
     const CustomFijkPanel({
       @required this.player,
       this.buildContext,
       this.viewSize,
       this.texturePos,
     });
   
     @override
     _CustomFijkPanelState createState() => _CustomFijkPanelState();
   }
   
   class _CustomFijkPanelState extends State<CustomFijkPanel> {
   
     FijkPlayer get player => widget.player;
     bool _playing = false;
   
     @override
     void initState() {
       super.initState();
       widget.player.addListener(_playerValueChanged);
     }
   
     void _playerValueChanged() {
       FijkValue value = player.value;
   
       bool playing = (value.state == FijkState.started);
       if (playing != _playing) {
         setState(() {
           _playing = playing;
         });
       }
     }
   
     @override
     Widget build(BuildContext context) {
       Rect rect = Rect.fromLTRB(
           max(0.0, widget.texturePos.left),
           max(0.0, widget.texturePos.top),
           min(widget.viewSize.width, widget.texturePos.right),
           min(widget.viewSize.height, widget.texturePos.bottom));
   
       return Positioned.fromRect(
         rect: rect,
         child: Container(
           alignment: Alignment.bottomLeft,
           child: IconButton(
             icon: Icon(
               _playing ? Icons.pause : Icons.play_arrow,
               color: Colors.white,
             ),
             onPressed: () {
               _playing ? widget.player.pause() : widget.player.start();
             },
           ),
         ),
       );
     }
   
     @override
     void dispose() {
       super.dispose();
       player.removeListener(_playerValueChanged);
     }
   }

? ? ? ? 這里是使用時候的代碼

FijkView(
  player: player,
  panelBuilder: (FijkPlayer player, FijkData data, BuildContext context, Size viewSize, Rect texturePos) {
    return CustomFijkPanel(
      player: player,
      buildContext: context,
      viewSize: viewSize,
      texturePos: texturePos);
  },
)

到這里就完成了，簡單使用、自定義使用，如果還需要看詳細(xì)信息，可參考他們提供的官方文檔，地址如下：fijkplayer -- Flutter plugin for ijkplayer - fijkplayer -- Flutter plugin for ijkplayer文章來源地址http://www.zghlxwxcb.cn/news/detail-409500.html

到了這里，關(guān)于flutter 視頻解碼器fijkplayer使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！