Uncategorized, media-servicesmedia-player
Azure Media Player Plugins overview
Posted on
4 min read
Azure Media Player (AMP) has come a long way since its initial release at NAB last year. Out of the box, the player provides a wide range of functionality for the cross-platform playback of Azure Media Services streams but we’ve also received a lot of great feedback and suggestions for player enhancements. As you could imagine, with the increase in AMP usage around the world, there’s been an incredible number of feature requests and as a result, we thought it pertinent to provide some guidance on how to extend the player to support these requests and build a community around AMP users to share their extensions in the form of plugins. As a member of the community, you can use existing AMP plugins or build your own to share and collaborate with others.
Plugins can help reach key scenarios that fit your business needs which could range from playing a playlist of videos to sharing your videos on social media, or even viewing stats with player analytics. Plugins are as creative as you are, so the sky’s the limit! When a plugin looks like it would benefit the entire AMP community, we work with the plugin creator(s) to integrate their enhancement directly into the product, so that the entire user base can enjoy it. This collaborative system plays a significant role in helping Azure Media Player improve your business.
Check out our plugin gallery to start using existing plugins today! We've also added a new section to our documentation providing guidance on building and sharing plugins.
What is a Plugin?
A plugin enhances AMP through JavaScript code that sits on top of the player. It utilizes existing built-in player APIs, events, UI or functionality and extends them. Let’s use the Social Share Plugin mentioned above as an example. With any product or business, growth is generally defined as consistently increasing user base. By using a social media integration with AMP, you can encourage current users to promote your content across various social sites. This enables connected people in their network to see the content and link back to your site. They, in turn, can then use your product and share it with their connected social networks creating viral content.
This can be achieved through a simple plugin that overlays a Twitter or Facebook icon on the video. Upon click, the viewer is shown a pre-written “status”” or “Tweet” template with a link to your video. By clicking publish, everyone in their social network now has a link to your content.
Other plugin ideas include, but are in no way limited to:
- Player Analytics: Learn more about our new Player Analytics Plugin
- Video Ad insertion: Lets you monetize your videos
- Title overlay: Displays a title over your video
- Zoom: Allows your viewer to zoom into your video
- Playback speed: Allows viewer to watch video at different speeds
- Annotations: Allow you to overlay annotations over your video
- Resume location: Allows your viewer to close the tab and reopen it later to start playback where they left off
- And many more!
You can create all kinds of plugins to change AMP’s functionality, appearance, or connect with other services; so if you ever feel like AMP is missing out on some form or feature, you can write a plugin for it.
Some plugins have already been integrated with the current AMP release. These are key examples of features that were originally developed as plugins but were recognized to be additional functionality that others could benefit from so we integrated them directly into our source code.
Plugin gallery
The new plugin gallery has several plugins that the community has already contributed for features like time-line markers, zoom, playlists, analytics and more! These are free for you to use and modify right now. The more contributions that are added to the gallery, the more the community grows. The gallery provides source code for plugins that you can incorporate into your application and includes instructions on how to do so as well as a demo reference for you to see the plugin in action.
Creating a plugin
Plugins are created using JavaScript and styled with CSS. Simply write your plugin formatted like code. To help, you can check out one of the examples in the gallery to help get started.
(function () {
amp.plugin('yourPluginName', function (options) {
//plugin code
});
}).call(this);
To build your plugin, check out our documentation for a full list of API's and events. Add new features, add or remove buttons, change colors, or integrate with other products. Once you have created something cool, be sure to submit it to our plugin gallery so others can use it too!
Using a plugin
After you have selected a plugin from the gallery or once you have created your own, simply include the JavaScript and CSS (if applicable) into the head of your HTML page.
Next, you will want to update the player initialization code to include the plugin options, proving the name of the plugin and any configurable options the plugin may require in JSON format:
var myOptions = {
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: "",
plugins: { yourPluginName: {examplepluginOption: true}} };
var myPlayer = amp('', myOptions);
Your plugin should be ready to go, it’s as simple as that!
Submitting your plugin
Created or modified an awesome plugin that you want to share in the plugin gallery? You can submit your plugin for inclusion in the plugin gallery by clicking the submit button in the gallery and filling out he email template.
If you’re up for the challenge or have any questions, let us know and we’ll be happy to help you ramp up.
Providing feedback
Azure Media Player will continue to grow and evolve, adding additional features and enabling new scenarios. You can request new features, provide ideas or feedback via UserVoice. If you have and specific issues, questions or find any bugs, drop us a line at ampinfo@microsoft.com.
Sign up to stay up-to-date with everything Azure Media Player has to offer.