Try Free

Deliver Broadcast Quality Video with the Bitmovin Video Plugin for WordPress

The Bitmovin Video Plugin allows non technical users to quickly install adaptive video content into a wordpress website with all of the features of an advanced VoD or Live Streaming platform

WordPress is the world’s most popular CMS. In fact, WordPress claims that 30% of websites on the internet are running on WordPress.  It’s popularity is largely driven by it’s usability and versatility. It can be used to build a wide variety of websites including: blogs, shops, donation platforms and even dating sites, but when it comes to video, it doesn’t have much to offer out of the box. The Bitmovin Video Plugin is a lighting fast way to install a state of the art video player and deliver adaptive streaming video from any page or any template in your wordpress website.

An introduction to the Bitmovin Video Plugin for WordPress

In the same way that our video analytics software started as an inhouse tool, the idea to build the Bitmovin Video Plugin originally came from the need to make it easier for our own team to manage publishing video quickly and efficiently on our brochureware website, bitmovin.com. It has been in production on our own website for over two years, and it is also currently being used by Bitmovin customers to deliver commercial grade video content services. The current version of the plugin has stayed true to the original simple design, but still includes all the custom configuration capabilities that allow more advanced users to deploy the Bitmovin Player with all features. The Bitmovin Video Plugin is free to use and actively maintained. Support is available to customers of our products and services as per our customer support agreements.

The Bitmovin Video Plugin for WordPress is built on open source code so you are welcome to modify it as you require. You should also note that this plugin is only for video playback. It relies on pre-encoded adaptive videos being available for streaming. This means that your ABR streaming files should already be available to be downloaded via a link to your manifest file in .dash or .m3u8 format. For more information on encoding your videos please refer to our developer resources.

Whether you are delivering a production video platform, or just looking for an easy way to test your streams with the Bitmovin Player, the Bitmovin Video Plugin for WordPress is a great solution

Installation and Setup

The first thing to do is to install the plugin. I find the easiest way to do this is simply through the WordPress admin function. Searching for “Bitmovin” should take you directly to the plugin.

Installing the Bitmovin Video Player Plugin

Once installed, the plugin will add two menu items to the WordPress sidebar navigation. The first is “Bitmovin”, which will have an “All Videos” and an “Add new Video” sub menu item.  The second is “Bitmovin Settings”. Start by adding your API key to the “Bitmovin Settings” screen to enable your license.

Activate Your Bitmovin API key

To activate your free license to start using the Bitmovin Player in your WordPress website you will need to sign up and create a trial account at https://dashboard.bitmovin.com/signup. Once you have signed up, and activated your account, simply login and navigate to your settings screen. The “Settings” link can be found in the drop down menu under your profile in the top right corner of the dashboard (see screenshot below). You will need to click the “Show” button in the API widget and and then copy your API key. Paste it into the “Bitmovin Settings” screen in WordPress.

Finsding your Bitmovin Player API key

Installing Your First Video

With the API key installed, you are ready to set up your first adaptive streaming player. The “Add Video” menu item will take you to a screen that is similar to the standard WP “Create a Post” screen but with your video settings and sources in place of the main content WYSIWYG.

Install your first video in the Bitmovin video player plugin

Player Version

The first widget in this screen will offer you a chance to configure your player version.

Channel: This is the release channel. If you are not sure what this is then leave it set to “Stable”. This will ensure that you are always using the most recent stable version of the Bitmovin Player.

Version: This should default to the most recent version, and like channel, unless you have a specific reason not to, just use the latest version.

Version URL and Player Key will automatically default to the correct settings. You can leave these as default.

Video Source

This is where you define the video source that you will use for this video. To get your video to play you need to enter a source into at least one of the first three fields, and the fourth is optional.

Dash URL: This is the path to your .mpd file which is the manifest file for your MPEG-DASH content.

HLS URL: This is the path to your .m3u8 file, the manifest file for your HLS content.

Progressive URL: This is the path to the progressive version of your video (non adaptive), which is usually .mp4

Poster URL: This is the graphic that will display on your video before the viewer clicks play. If this field is left blank, the player will automatically pull a frame from your video to use as the poster image.

With these settings complete, your video is ready to play. At this point, you can “save as draft”  and then see a preview of the video by scrolling to the bottom of the screen to the Player Preview widget.

Preview your video

Placing Your Video Using Shortcodes

To install your video into your website, all you need to do is copy and paste the code shown in the image above (above the player preview), into the WYSIWYG of the page or post you want display it on, including the square brackets. It will look something like the image below.

Place your video into a blog post

Adding a specific video to the template of your wordpress website is also quite easy using the WordPress do_shortcode () function. Example below.

<?php echo do_shortcode('
No correct api key set in Bitmovin Settings.
'); ?>

All of you shortcodes are also available  by clicking the “All Vidoes” menu item. This will give you a list of all of your videos, with a column showing the shortcode for each.

Advanced Settings

The Bitmovin Player is a high end professional video player designed for enterprise level customer deployments. That means it has a huge range of features and options that can activated and controlled in the player config interface.

These configurations can be made for each individual video by using the Player Configuration widget. The image below shows a simple example that sets the video start time 348 seconds into the video.

Customize your video in the plugin

For more information on custom configurations visit the Bitmovin Player configuration documentation.

Example configuration

{
  key: 'INSERTPROVIDEDKEYHERE',
  playback: {
    autoplay: false,
    muted: false
  },
  source: {
    dash: 'http://path/to/mpd/file.mpd',
    hls: 'http://path/to/hls/playlist/file.m3u8',
    progressive: [{
      url: 'http://path/to/mp4',
      type: 'video/mp4'
    }, {
      url: 'http://path/to/webm',
      type: 'video/webm'
    }],
    poster: 'images/poster.jpg',
    drm: {
      widevine: {
        LA_URL: 'https://mywidevine.licenseserver.com/'
      },
      playready: {
        LA_URL: 'https://myplayready.licenseserver.com/'
      },
      access: {
        LA_URL: 'https://myaccess.licenseserver.com/',
        authToken: 'INSERT-YOUR-BASE64-ENCODED-AUTH-TOKEN'
      },
      primetime: {
        LA_URL: 'https://myprimetime.licenseserver.com/'
      },
      fairplay: {
        LA_URL: 'https://fairplay.licenseserver.com/',
        certificateURL: 'https://fairplay.licenseserver.com/certificate-url'
      }
    }
  },
  style: {
    width: '90%',
    aspectratio: '16/9',
    ux: true
  },
  events: {
    onReady: myFunc,
    onPlay: function() {
      // do some awesome stuff
    },
    onError: myErrorHandlingFunc
  },
  tweaks: {
    max_buffer_level: 20
  },
  advertising: {
    client: 'vast',
    tag: 'http://your.ad.provider/manifest.xml'
  }
}

For a full list of configuration interfaces, visit our developer portal.

The Bitmovin Video Plugin for WordPress is a simple, but very powerful tool for video. It can be used to quickly test the Bitmovin Player in a variety of scenarios, or it can be used in a live website, as several of our customers already do.

To get started, sign up for free in the Bitmovin Portal.

Author

Tristan is a marketing and communication expert at Bitmovin, a fast growing tech company specialized in creating software solutions to the most challenging problems in online video delivery. He spends most of his time creating text and graphics for both online and printed media, to explain these solutions and how they can be applied to real world commercial video workflows.