Skip to content

Flowplayer

Flowplayer with Peer5 for HLS integration




Flowplayer is a feature rich video player that supports HLS.

The integration with Peer5 plugin is easy and involves two lines of code. In addition to the player script, include Peer5 client and the flowplayer plugin.

Peer5 client and plugins scripts

add these two scripts to the head of your player's page

1
2
<script src="//api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID"></script>
<script src="//api.peer5.com/peer5.flowplayer.plugin.js"></script>

Complete Example

The following information needs to be filled according to your actual data:

  • PEER5_CUSTOMER_ID   your Peer5 Customer ID
  • MANIFEST_FILE   url to your .m3u8 file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Flowplayer Player test</title>
        <!-- peer5 client & plugin -->
        <script src="//api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID"></script>
        <script src="//api.peer5.com/peer5.flowplayer.plugin.js"></script>

        <!-- Flowplayer scripts & styles -->
        <script src="//cdnjs.cloudflare.com/ajax/libs/flowplayer/7.0.4/flowplayer.min.js"></script>
        <link href="//cdnjs.cloudflare.com/ajax/libs/flowplayer/7.0.4/skin/skin.min.css" rel="stylesheet">
    </head>
    <body>
        <div id="player"></div>
        <script>
            var player = flowplayer("#player", {
                clip: {
                    sources: [{
                        type: "application/x-mpegurl",
                        src:  "MANIFEST_FILE"
                    }]
                }
            });
        </script>
    </body>
    </html>

visit here for the full Flowplayer docs