Flowplayer Setup

embedded javascript version

The easiest way to add the showtag plugin to flowplayer is by using the embedded JavaScript version, with this version you only need to add the showtagEnabled JavaScript file to your webpage and assign an id to the player. The rest is done in the flowplayer environment.

1. ShowtagEnabled.js

place the ShowtagEnabled.js as the last file to load on your page. Just before the Body-End.


<script src="~/Scripts/ShowtagEnabled.js">
</body>
</html>
    

2. add an id

Add and "id=" to the flowplayer embedded code, the id can have any name and does not need to be "myplayer"


<div id="myplayer" data-player-id="cdcc4202-ef0b-4e03-a43a-d1fcf6d83157">
<script src="//cdn.flowplayer.com/players/ffdf2c44-aa29-4df8-a270-3a199a1b119e/native/flowplayer.async.js">
                      { "src": "f576651c-4cc6-4664-84fa-bb3b35ef1aba" }
</script>
</div>
    

3. login to your Flowplayer account

upload a video the same way you always do



4. edit metadata

Flowplayer includes standard metadata that is available for all customers as part of their product and also custom metadata fields that you can add based on your needs and preferences for each of your workspaces/sites. To Enable the ShowtagEnabled layer add in the metadata screen in the tags section the unique code that is combined out of your unique clientcode and your unique ProgramCode separated with a dash: "Clientcode-programcode". The programcode is a string and can be exactly the same as you use within your video archive.

IMPORTANT when using Showtag you can't add additional tags.




5. play the video

When the video loads is will validate your clientcode and it will check on the Showtag server if the programcode exists. If the program exists the available information is added to the video. Now just press pause to access the Showtag Enabled content