First let me commend the Azure Media Services team for the awesome job they did with the Azure Media Player (http://aka.ms/AzureMediaPlayer).
Not only is this a great tool to help debug and test your streaming media, but it is also a great platform to use
in your production application.
First let's encode and publish your video file. In production, you will likely write code in your application to integrate
this workflow into your application, but for this exercise I will use the Azure Media Services Explorer (http://aka.ms/amse).
- Using the Azure Portal create an Azure Media Services Account
- Connect AMSE to your Azure Media Services Account
- Using AMSE upload your video asset (Look for the upload command in the Asset Menu)
- When the upload finishes, right click on the file in the Asset Tab and then encode it.
- Once the encoding is finished, right click on the new entry on the Asset Tab and select Publish & Create a locator.
Great, now your asset is ready for streaming. Grab the publish url and test it out!
Right click on the Publication endpoint on the asset tab. Select Publish and copy the publish url to the clipboard. This
will give you a url that ends in “.ism/manifest”, copy and paste this into the URL box of the Azure Media player,
press the Update Player button and your video should start playing.
Now, that we can see our video, lets add the closed captioning. Typically, this is done with a WebVTT file (https://w3c.github.io/webvtt/).
You can write one by hand, or you can let Azure Media Services Indexer do this for you.
Back in AMSE, right click on your source video file again, select Media Analytics and then Index Assets. This will enqueue
a new job that will strip the audio out of the video, and then convert it to text, and create, among other things,
our WebVTT file. When it is done, it will dump all of these assets out on Azure Blob storage. Now you have a choice
of where do you want to host these files.
The three most common places are on AMS in your publishing endpoint, on Azure Blob Storage, or on your website. The trick
with all three of these is having the proper cross domain access policy in place.
If you choose to host the WebVTT file on AMS, we have already done this work for you. You can view our cross domain policy
file here (http://amssamples.streaming.mediaservices.windows.net/crossdomain.xml So to publish your WebVTT, you
just need to move it from the storage account where the indexer dropped it, to your publish endpoint. You can do
this in AMSE, double click on the asset folder with the output of the indexer job, flip over to the Asset Files tab
in the dialog that opens, and then download the .vtt file. Once you have it downloaded, go back to the main screen
in AMSE, double click on the published video file, flip over to the Asset Files tab, and then upload it. The URL
to the file will be the same as the URL to the ".ism/manifest", just remove the "/manifest" part and replace the
.ism file name with the file name for your .vtt file.
If you choose to host the WebVTT file on your website, you will likely need to setup the cross domain policy. Easiest
way to do this is to download the policy that we use and upload it to the root of your website. Our policy is pretty
wide open, so you will likely want to lock it down a bit more.
Finally, if you choose to host the WebVTT file on Azure Blob storage you will need to configure the cross domain policy
on Azure Blob storage. The easiest way to do this is via the Azure Storage Explorer (http://storageexplorer.com/)
Just find the storage account in question, right click on the blob containers node and then select configure CORS.
Now that you have your cross domain policy configured, drop the URL to the VTT file into the Advanced Options section
of the Azure Media Player, under tracks. After you press the Update Player button, you should be able to select your
captions track and see them in the player!
If you didn't configure CORS correctly it will not work. You can confirm this by using the Web Debugging tools in your
favorite browser. First, check the network tool to ensure that your .vtt file is getting download, 200 OK. If you
are not downloading the VTT file, check to see if you have the path correct. If the file is downloading and you still
don't see the captions, check the console window. You will see an error there, if your CORS policy is not set correctly.
Hope, this helps you get closed captioning working in your media application. Big thanks to Saili from the AMS team for
working with me to get this all ironed out.