• 6 min read

Video editor plugin for Azure Media Player

I am excited to share the first preview release of the video editor plugin for Azure Media Player. Read on to learn more about how this client tool is designed to aid in the creation of subclips and dynamic manifests.

Azure media services provides a set of powerful services to generate subclips from existing videos and streams, but they can be difficult to use without a good front-end tool for selecting that perfect moment out of a long video. For example, picking the exact frame that a scene changes can be painstaking and time consuming, and the task gets increasingly more complex with a live stream. We have also heard from many customers that they need a free tool to integrate and plug in to an existing workflow, whether that is a full blown video content management system (VCMS) or a simple in house asset listing page.

Video Editor Plugin for Azure Media Player is our effort to address many of these issues by creating a client tool designed to aid in the creation of subclips and dynamic manifests for Azure Media Services. Previously it was only possible to perform this task via the APIs directly or using the Azure Media Services Explorer tool. This plugin improves on the workflow by giving an embeddable interface for video clip creation, thumbnail selection, and provides additional flexibility in integration.

This plugin is now released in as a free preview, and we look forward to your feedback to continually improve this product. As this is still in pre-release phase bugs may exist so production use is not recommended.

Related features

This tool is provided free of charge to Azure Media Services customers, but you will be charged for any encoding and storage use for the created clips.

If you are already familiar with rendered subclips and dynamic manifests, feel free to skip this section.

Rendered subclipping

Subclipping, a part of Media Encoder Standard, is a way to generate a new asset from an existing video asset or live stream. This is useful when you need a new asset that you can download and syndicate to YouTube, Vimeo, or other hosting services. This feature also allows perfectly frame accurate rendering, for those cases where every frame counts. On the downside this service takes longer to complete as it needs to encode the selected segment. For more details, check out the recent blog post on subclipping and live archive extraction.

Dynamic Manifest

Dynamic Manifest creates filters which can be appended to the end of a streaming URL to change various things about the stream, from start/end time to which bitrate tracks to show. The clips created from these filters are only GOP accurate, but they can be created and used near instantly. While subclipping creates a new asset with a separate lifecycle, the dynamic manifests simply filter an existing asset, and if it is deleted or the selected clip range falls off the DVR window in the case of a live stream, it will no longer function. Dynamic manifests also trim the head and leave the asset as a live stream which is useful for live events with a pre-event slate. Find a full list of capabilities listed in this blog post

Video editor plugin features

At its core the video editor plugin is a frontend tool to scrub through the video and accurately isolate a special moment such as a game winning touchdown, or to remove unwanted segments like pre-event slates. From the top down it includes a header bar with mode selector, video player, and a controls panel.

amveblogimage

image

Editing modes

At the top you should see three modes of operation: trim, virtual, and rendered. Each change the behavior of the editor slightly to match a different scenario.

Mode Underlying Azure Media Services Technology Player Behavior Usage Scenario
Trim Dynamic Manifest Mark in navigation snaps to nearest GOP (group of pictures) boundary. Mark out is disabled so that the resulting dynamic manifest is a live stream with the head trimmed out. Removing pre-event slate and footage from a live event stream
Virtual Dynamic Manifest Mark in/out navigation snaps to nearest GOP boundary. Quick subclips for streaming online where accuracy needs only to be approximate.
Rendered Media Encoder Standard (Subclipping) Mark in/out navigation snaps to frame. Frame accurate precise subclips. Downloading a separate mp4 asset to upload to YouTube or process locally.

Frame accurate selection

In rendered mode video clip selection is capable of doing frame accurate navigation. This currently relies on accurate information about the video framerate, which can be set via the settings at the top right corner. If the framerate is set incorrectly, the editor may end up skipping over a frame due to rounding errors. In the other two operational modes navigation is only GOP accurate since dynamic manifests only supports filtering at each GOP boundary.

image

image

Thumbnail selection

After clicking export, editor will pick out a selection of thumbnails from the clip for the user to select at a preset interval. This is especially useful for exporting to a content management system or an asset listing. You can also select the number of thumbnails generated, although more thumbnails will take longer to generate.

Live streams

You can use the editor with live streams as well as live archives just as you do with a static asset. Please note, depending on your DVR window the stream content will start to disappear after you reach the rolling archive edge. This can cause errors if you take too long to create the subclip after choosing the mark in point and it falls off the edge. Because of this, we recommend setting a longer DVR window and leaving a 5-10 minute buffer on the left edge of video while clipping.

Try it out!

Check out the client tool experience on the sample page. Here you can try sample videos, or enter streaming URLs from videos in your own media services account to get marker metadata. The tool will not actually create the subclips or manifests for you since it doesn’t have the authentication to do that. To create a fully end-to-end experience, the plugin is designed to be integrated into your own custom workflow or content management system.

During Preview this is only supported on IE, Chrome, and Edge browsers on desktop machines.

This product is currently in preview state, and is not recommended for production use.

Development

The video editor is released under a pre-release license.

Download the sample project, which contains a website which integrates with the editor to read video URLs and display the metadata from the fired event on submit. It uses a custom pre-release version of AMP as well.

Simple sample project code

The sample project is meant to be a very basic example of how to get the amve.js to work inside a webpage. A more advanced end-to-end example is coming soon.

Below is a description of some of the key parts of the sample.

Include the scripts

There are three scripts and three stylesheets included in the sample.

File Function
azuremediaplayer.min.js Pre-release player minimized.
azuremediaplayer.min.css Pre-release player styling
amve.min.js Pre-release editor plugin minimized.
amve.min.css Pre-release editor plugin styling.
amveSample.js Sample code initializing player
amveSample.css Sample page specific styling.

simple.html:



Initialize the player

The initPlayer() function runs on load to initialize the player and editor on the id=’amve’ div.

simple.html:

body onload="initPlayer();

amveSample.js:

This section sets what to do when the onClipdata event is fired. This event is fired when the user hits submit, and contains metadata about the subclip. The sample is a very trivial example, but in a real world scenario you would want to take the clip in/out data and pass them through to the backend Media Services APIs to perform subclipping or create manifest filters.

function initPlayer() {
     function onClipdataCallback(clipData) {
         if (clipData) {
             var dataTxt = 'data.src: ' + clipData.src +
                 'ndata.markin: ' + clipData.markIn +
                 'ndata.markout: ' + clipData.markOut +
                 'ndata.title: ' + clipData.title +
                 'ndata.description: ' + clipData.description +
                 'ndata.thumbnail: ' + (clipData.thumbnail ? clipData.thumbnail.dataUrl : null)};
             alert(dataTxt);
         }
     }

This section sets up the rest of the azure media player options.

var myOptions = {
     'nativeControlsForTouch': false,
     autoplay: true,
     controls: true,
     poster: '',
     plugins: {
         AMVE: { containerId: 'amve', clipdataCallback: onClipdataCallback }
     }
};
 
var myPlayer = amp('vid1', myOptions);
$('#amve')[0].style.display = 'none';

Full API documentation and more advanced sample project coming soon!

Contact

If you have any questions or suggestions please comment below or via MSDN Forums.