Share

Adds a share menu to the player , allowing you to share a link to the video or an iframe embed code.

Available share menu options:

    • share option
    • description
    • iframe
    • iframe-based embed code
    • Link
    • copies a link to clipboard
    • Facebook
    • opens a facebook share-popup
    • Twitter
    • opens a twitter tweet popup

Manual Javscript setup

Include the plugin next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/share.min.js"></script>

Optionally include the message plugin to flash a message on the player when text is copied to clipboard:

<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/message.min.js"></script>

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed player

Add the feature in the Plugins section of the OVP player configurator. You can configure the share options you wish to offer. The OVP configuration will always use the default iframe or link urls.

Configuration

The plugin is configured in top level configuration under share namespace.

Configuration properties:

    • option
    • description
    • iframe string
    • Iframe source url to the iframe embed option. If omitted, this embed option is not shown.
    • link boolean or string
    • string: url to be shared / copied boolean: if set to true, window.location.toString() (the currrent url in the browser) is used.
    • twitter boolean
    • true/false. Whether to show the Twitter option. Value of link is used to determine what to share.
    • facebook boolean
    • true/false. Whether to show the Facebook option. Value of link is used to determine what to share.

Sample code

var player = flowplayer('#container', {
  src: '//edge.flowplayer.org/bauhaus.mp4',
  share: {
    link: true,
    facebook: true,
    twitter: false,
    iframe: 'https://example.com/iframe.html'
  }
})
var player = flowplayer('#container', {
  src: '//edge.flowplayer.org/bauhaus.mp4',
  share: {
    link: 'https://example.com/facebookstandalone.html',
    facebook: true,
    twitter: false,
    iframe: 'https://example.com/iframe.html'
  }
})

Demo

Codepen

Results