videojs-share icon indicating copy to clipboard operation
videojs-share copied to clipboard

Share plugin for video.js

videojs-share

Share plugin for video.js. Allows user to copy video url / embed code and share video to social networks.

List of supported social networks: Facebook, Twitter, Google Plus, LinkedIn, VK, Odnoklassniki, Mail.ru. Supported messengers: Messenger, Telegram, Whatsapp, Viber.

Sharing functioonality provided by vanilla-sharing library. Copying to clipboard is done via clipboard.js.

Build Status Build Status bundlephobia npm npm David David

Table of Contents

  • Version Support

  • Version Support

  • Installation

  • Usage

    • <script> Tag
    • Browserify/CommonJS
    • RequireJS/AMD
    • Plugin initialization

Version Support

This is an advanced plugin and due to that it works on videojs versions 6+ see here.

Installation

npm install --save videojs-share

Usage

To include videojs-share on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-share.min.js"></script>

Browserify/CommonJS

When using with Browserify, install videojs-share via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-share');

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-share'], function(videojs) {
  var player = videojs('my-video');

  player.share();
});

Plugin initialization

var player = videojs('my-video');

var shareOptions = {
  socials: ['fb', 'tw', 'reddit', 'gp', 'messenger', 'linkedin', 'telegram', 'whatsapp', 'viber', 'vk', 'ok', 'mail'],

  url: window.location.href,
  title: 'videojs-share',
  description: 'video.js share plugin',
  image: 'https://dummyimage.com/1200x630',

  // required for Facebook and Messenger
  fbAppId: '12345',
  // optional for Facebook
  redirectUri: window.location.href + '#close',

  // optional for VK
  isVkParse: true,
  
  // optinal embed code
  embedCode : '<iframe src="' + window.location.href + '" width="560" height="315" frameborder="0" allowfullscreen></iframe>'
}

player.share(shareOptions);