Categories: 未分類

FlowPlayerでHLSを再生

flowplayer flash版でhls再生してみる。

rtmpで受信したければこちらを参照
https://www.techlive.tokyo/archives/1364

flowplayer flash版の無償ダウンロードはこちら
https://flowplayer-releases.s3.amazonaws.com/flowplayer/flowplayer-3.2.18.zip

flowplayer flashhlsのプラグインはこちら
https://github.com/mangui/flashls

利用するflowplayer本体、プラグインは、flowplayerディレクトリにまとめて格納

ls flowplayer
flashlsFlowPlayer.swf flowplayer-3.2.13.min.js flowplayer-3.2.18.swf flowplayer.controls-3.2.16.swf flowplayer.rtmp-3.2.13.swf

コンフィグの書き方

<head>
<title>FlowPlayer</title>
<script type="text/javascript" src="flowplayer/flowplayer-3.2.13.min.js"></script>
</head>
<body>
<a id="player" style="display:block;width:1280px;height:720px"></a>
<script>
flowplayer("player", 'flowplayer/flowplayer-3.2.18.swf', {
  // Flowplayer configuration options
  // ...
  plugins: {
    httpstreaming: {
      // flashls configuration options
      url: 'flowplayer/flashlsFlowPlayer.swf',
      hls_debug: false,
      hls_debug2: false,
      hls_lowbufferlength: 3,
      hls_minbufferlength: 8,
      hls_maxbufferlength: 60,
      hls_startfromlowestlevel: false,
      hls_seekfromlowestlevel: false,
      hls_live_flushurlcache: false,
      hls_seekmode: 'ACCURATE',
      hls_capleveltostage: false,
      hls_maxlevelcappingmode: 'downscale'
    }
  },
    clip: {
        url: "http://hanako.hoge.jp/hls/jp/stream.m3u8",
        live: true,

        // configure the flashls plugin as the clip's provider and urlResolver
        provider: "httpstreaming",
        urlResolvers: "httpstreaming",
        accelerated: true,

        scaling: "fit"
    }
});
</script>
</body>
</html>

hanakotoko