The *Plugin SDK integration with Flowplayer is built off of Flowplayer's JavaScript API, but we’ve done a lot of the work for you. All you need is a link to your video source file or stream, which you can get in a number of ways, depending on where the video is hosted. Just make sure your link points to a downloadable video.
To set up a basic integration, start by including the following scripts and links at the top of your page. This will initialize the player.
If you run into issues you may need to link to newer versions of the Flowplayer API or jQuery. See Flowplayer's JavaScript API documentation for more information.
<!-- 1. skin -->
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.3/skin/functional.css">
<!-- 2. jquery library - required for video tag based installs -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- 3. flowplayer -->
<script src="//releases.flowplayer.org/6.0.3/flowplayer.min.js"></script>
<script type="text/javascript">
// Instantiates flowplayer() JS object:
flowplayer(function (api, root) {
api.on("load", function () {
// do something when a new video is about to be loaded
}).on("ready", function () {
// do something when a video is loaded and ready to play
});
});
</script>
Next, build a video into your Plugin SDK player div by linking to your video source, making sure to add an ID that is identical to your player_id, highlighting in pink below. Note the source tag with a link to a video URL:
<div class="p3sdk-container p3sdk-debug" player_id="flowplayer-6" player_type="flowplayer">
<div id='flowplayer-6' class="flowplayer" data-ratio="0.4167">
<video>
<source type="video/mp4" src="http://videos.3playmedia.com/10013/78983/3aba0b861bfc1a970782b09856fb1ff6.mp4">
</video>
</div>
…
</div>
*The Plugin SDK is sometimes referred to as "P3SDK"