none
How do I get HTML5 player frameworks to work with MP4 files and SAS Locators in WAMS

    General discussion

  • If you are attempting to do delivery MP4 files from a SAS URL Locator to an HTML5 player, either IE, Chrome, or a player framework like JWPlayer or the Microsoft Media Platform HTML5 framework, you may run into an issue where the player does not load or download the file.

    This is a known issue for us in IE9 right now due to a bug in Preview.  We currently are not setting the Content-Type on the blob post encoding and also during ingest from the Service SDK.  This results in the Content-Type being returned from the SAS URL as application/octet-stream instead of video/mp4 as expected.

    There is a workaround that you can use for now to test out the expected behavior that we will have once we fix this bug in the next update in July.

    Here is some example code that shows how to get a SAS Locator for the MP4 file, and then use the CloudBlobClient in the Windows Azure Storage Client library to edit the Content Type on the MP4 file in blob storage.  After setting this property, you can then use the MP4 in JWPlayer, IE, or other HTML5 player frameworks.

                IAccessPolicy policy = _media.AccessPolicies.Create("policy", TimeSpan.FromDays(365), AccessPermissions.Read);
                ILocator locator = _media.Locators.CreateSasLocator(asset, policy);
    
                Uri sasUrl = new Uri(locator.Path);              //doing this only to get the asset container name        
    
                 CloudBlobClient cloudClient = new CloudBlobClient("https://" + sasUrl.Host, new StorageCredentialsAccountAndKey(<user’s storage account name>, <storage credentials>));
                  CloudBlobContainer container = cloudClient.GetContainerReference(sasUrl.Segments[1]);
    	Foreach(CloudBlob blob in container.ListBlobs())
    {
               		 CloudBlob blob = container.GetBlobReference(blob.name);
    
    		If(blob.name.endswith(“.mp4”)
    {
              			  blob.Attributes.Properties.ContentType = "video/mp4";
    }
    else if … for wmv, flv, etc etc
    
                		blob.SetProperties();
    }
    
    _media.Locators.Delete(locator);
    

    Tuesday, June 26, 2012 8:29 PM
    Owner

All replies

  • i did exact what you show in post,  but player can not play the mp4 so please help me
    Tuesday, July 3, 2012 3:29 PM
  • What player and browser are you using exactly?  Can you point us to your MP4 SAS URL?
    Wednesday, July 4, 2012 3:53 PM
    Owner
  • thank-you sir for your Response

    Your Questions & my Answers

    1.Player ?

    i tried to put it in flow,jwplayer...but no response

    2.Browsers ?

    Mozilla Update Version,IE9,Google Chrome Latest

    it opens Vlc Player in browser, but can not play black screen appears i wait so much time . and one more request is, can i make IAsset public to access video file

    my SAS Url is

    Click this is my sas url it is generated by above code

    ..............................Wait For Your Response




    Wednesday, July 4, 2012 4:41 PM
  • Are you still seeing the issue?

    The SAS URL that you provided doesn't appear to be working at all now.

    Friday, July 27, 2012 7:24 PM
    Owner
  • so far now i am trying to create origin locactor for mp4 file in asset

    but not working

    static string GetOriginLocator(assetID, TimeSpan.FromDays(100), ".mp4")
            {
               
                var theManifest =
                                    from f in asset.Files
                                    where f.Name.EndsWith(manifeastExtension)
                                    select f;
               
                IFileInfo manifestFile = theManifest.First();
                IAccessPolicy streamingPolicy = _context.AccessPolicies.Create("plocy",
                   accessPolicyTimeout,
                    AccessPermissions.Read);           
                ILocator originLocator = _context.Locators.CreateOriginLocator(asset,
                    streamingPolicy,
                    DateTime.UtcNow.AddMinutes(-5));           
                string urlForClientStreaming = originLocator.Path + manifestFile.Name;
                return urlForClientStreaming;
             
            }

    my Origin Locator is http://wamssinreg001orig-hs.cloudapp.net/f6e3d1c7-e9cd-428c-b256-bca2a2766eef/63.mp4

    404 - File or directory not found.

    why this  i am smooth streaming orgin locator  by using same procedure it is working

    http://wamssinreg001orig-hs.cloudapp.net/42ab10aa-7d17-466f-aa23-0ed271f9c729/63.ism








    V.karthik

    Monday, August 27, 2012 2:12 PM
  • For MP4 or progressive download assets you don't need to go through the Streaming Origin servers.  You would just need to use the SAS URL for this case.   The call to CreateOriginLocator gives you a URL for a streaming origin that is capable of fragmenting and delivering adaptive bitrate streaming content such as Smooth Streaming or Apple HLS.  In the case of progressive download or other "static" HTTP download content, you can just use the blob SAS URL directly.

    Were you ever able to get your SAS URL and Content Type set correctly? 

     
    Monday, August 27, 2012 2:34 PM
    Owner
  • i read and  understand your  Reply but i have a small doubt.

    when i play a file using SAS Locator URL  file can be streamed or progressively played . i want to stream file

    because progressive file is  downloaded in client systems

    V.karthik





    Monday, August 27, 2012 3:01 PM
  • You can only progressively download a MP4 file.  If you want streaming then you really should creates Smooth Streaming videos (any of the 'Smooth Streaming' profiles on http://msdn.microsoft.com/en-us/library/jj129582 ) and use CreateOriginLocator.

    There's really a very fine line between streaming and progressive download.  Is you concern about security or something else?  If it is security, you can use PlayReady protection.

    Monday, August 27, 2012 3:05 PM
    Owner
  • Which protocol is your client application expecting to "stream" an MP4 over?  Are you expecting RTMP protocol? We do not currently support RTMP protocol streaming.

    What clients are you trying to hit? What player frameworks are you using? I think if I understood your use case scenario a bit more clearly it would help.

    Monday, August 27, 2012 3:09 PM
    Owner
  •  we are giving a video to any device solution,  for this first we detect the device and encode video in different formats using WAMS and give respective Url to respective device  example mobile, tablet, desktop for desktop no problem we give ism with SMF player but tablets we use html5 video tag and give mp4 with http protocol for this i required mp4 streaming Url

    that's why i am asking SAS Locator is streams or progressively delivered video I think streaming is better and last case is mobiles latest mobiles supports http streaming but some mobiles using rtsp then we go for aws (amazon web services) . is there any better solution kindly give your valuable suggestions


    V.karthik

    Monday, August 27, 2012 3:54 PM
  • Again, please define what you believe is the technical implementation difference between HTTP progressive download of an MP4 and what you are referring to here as "streaming".

    In HTML 5 delivery of MP4 to a browser, the MP4 file is technically just being "downloaded" to the player over HTTP.  There is no "streaming" protocol (RTSP, Smooth, Apple HLS, etc...) involved.   For HTML 5 delivery of an MP4 file, you can host the file on any normal web server (Apache, IIS, etc) that has no knowledge of media streaming and it will work as expected in an HTML 5 video player.  The HTML working group intended it to work that way over HTTP without any proprietary streaming protocol in place.

    For RTSP (thanks for correction, I put RTMP above accidentally!), you would need to go with a solution like Wowza that offers RTSP streaming support.  They are an announced partner for Media Services, but their solution is not yet available.   I would assume that you require RTSP to hit Flash clients only? Again, what clients do you have exactly that you are trying to hit with RTSP? 

    Also, which mobile devices are you targeting for Flash RTSP streaming? I'm not sure that is a long term strategy for you, considering that Adobe pulled Flash Player from Android last week and signaled a transition to HTML 5 and MPEG DASH (http://www.networkworld.com/news/2012/081512-adobe-flash-discontinued-on-android-261659.html?source=nww_rss).

    For delivery to Apple devices (the other half of the market), you are required to use HTTP Live Streaming for most all content, or MP4 progressive for short duration (<5 min I believe) content. 

    Monday, August 27, 2012 4:40 PM
    Owner
  • i am reading some Articles on Internet like this

    http://blog.mydeo.com/2009/01/12/streaming-vs-progressive-download-understanding-the-difference/

    i conclude http streaming is better option why because

    a streaming server opens a conversation with the local machine. There are two sides to this conversation, one is for transferring the video and the other is for control messages between the media player and the server. These control messages include commands such as ‘play’, ‘pause’, ‘stop’ and ‘seek’.

    so user can easily watch video at any point on the timeline.

    weather it is correct or not i don't know. Is it correct ?


    V.karthik

    Monday, August 27, 2012 6:24 PM
  • Streaming is usually better, but a lot depends on the capabilities of the client.
    Monday, August 27, 2012 7:21 PM
    Owner
  • we consider only streaming support devices

    when convert mp4 to smooth streaming  the problem is it gives .ism extension so it is not possible to embedded in html5 or flash player so my Question is may i Convert .mp4 to any

    other presets example H.264 HD 720p VBR it five Origin Locator with .mp4 extension or .ism extension we required .mp4 extension Origin Locator for giving it to html4 <video> tag or flash is it possible ?

    
    


    V.karthik

    Tuesday, August 28, 2012 4:20 AM
  • Sas locator for mp4 not working,  I did excatly what

    https://sailfish.blob.core.windows.net/asset-6998f86f-aec1-4ed7-a600-33f9270c1a4f/63.mp4

     static string blobOriginLocator(IAsset asset, TimeSpan accessPolicyTimeout)
            {
            
    
                IAccessPolicy policy = _context.AccessPolicies.Create("policy", TimeSpan.FromDays(365), AccessPermissions.Read);
                        ILocator locator = _context.Locators.CreateSasLocator(asset, policy);
    
                        Uri sasUrl = new Uri(locator.Path);              //doing this only to get the asset container name        
    
                         CloudBlobClient cloudClient = new CloudBlobClient("https://" + sasUrl.Host, new StorageCredentialsAccountAndKey("mediaservicestrail","VUYLY6jmgBHyuGCTV9ILM/JNNhCmapBE6h37ymdMR1ElLJVGSGfZ7qFOJpq7kJv/KRtnxwAOLBpybqoxBHdT3A=="));
                          CloudBlobContainer container = cloudClient.GetContainerReference(sasUrl.Segments[1]);
                    CloudBlob loopblob = null;
                foreach(CloudBlob blob in container.ListBlobs())
                {
                    loopblob = container.GetBlobReference(blob.Name);
                    if (loopblob.Name.EndsWith(".mp4"))
                    {
                        loopblob.Attributes.Properties.ContentType = "video/mp4";
                    } 
                    loopblob.SetProperties();
                               
            }
                string url = loopblob.Uri.AbsoluteUri;
                return url;
                 
    
            }
    Can i place any xml on the storage account root to accept http headers ?


    V.karthik



    Tuesday, August 28, 2012 5:48 AM
  • Sas locator for mp4 not working,  I did excatly what

    https://sailfish.blob.core.windows.net/asset-6998f86f-aec1-4ed7-a600-33f9270c1a4f/63.mp4

     static string blobOriginLocator(IAsset asset, TimeSpan accessPolicyTimeout)
            {
            
    
                IAccessPolicy policy = _context.AccessPolicies.Create("policy", TimeSpan.FromDays(365), AccessPermissions.Read);
                        ILocator locator = _context.Locators.CreateSasLocator(asset, policy);
    
                        Uri sasUrl = new Uri(locator.Path);              //doing this only to get the asset container name        
    
                         CloudBlobClient cloudClient = new CloudBlobClient("https://" + sasUrl.Host, new StorageCredentialsAccountAndKey("mediaservicestrail","VUYLY6jmgBHyuGCTV9ILM/JNNhCmapBE6h37ymdMR1ElLJVGSGfZ7qFOJpq7kJv/KRtnxwAOLBpybqoxBHdT3A=="));
                          CloudBlobContainer container = cloudClient.GetContainerReference(sasUrl.Segments[1]);
                    CloudBlob loopblob = null;
                foreach(CloudBlob blob in container.ListBlobs())
                {
                    loopblob = container.GetBlobReference(blob.Name);
                    if (loopblob.Name.EndsWith(".mp4"))
                    {
                        loopblob.Attributes.Properties.ContentType = "video/mp4";
                    } 
                    loopblob.SetProperties();
                               
            }
                string url = loopblob.Uri.AbsoluteUri;
                return url;
                 
    
            }
    Can i place any xml on the storage account root to accept http headers ?


    V.karthik





    V.karthik

    Tuesday, August 28, 2012 4:36 PM
  • Please email wamssupp@microsoft.com tomorrow (the account won't be active until tomorrow) and we can discuss the SAS URL issue.

    Tuesday, August 28, 2012 4:45 PM
    Owner
  • i did some changes and it is working that is upload a xml file in storage root that is

    <?xml version="1.0" encoding="utf-8"?>
                        <access-policy>
                          <cross-domain-access>
                            <policy>
                              <allow-from http-methods="*" http-request-headers="*">
                                <domain uri="*" />
                                <domain uri="http://*" />
                              </allow-from>
                              <grant-to>
                                <resource path="/" include-subpaths="true" />
                              </grant-to>
                            </policy>
                          </cross-domain-access>
                        </access-policy>

    and litttle bit change in code that is  add

       BlobContainerPermissions bcp = new BlobContainerPermissions();
                bcp.PublicAccess = BlobContainerPublicAccessType.Container;

    http://sailfish.blob.core.windows.net/asset-6998f86f-aec1-4ed7-a600-33f9270c1a4f/63.mp4

    then it is working is it correct


    V.karthik


    Tuesday, August 28, 2012 5:12 PM
  • Is this an ongoing issue? I am trying to get the Microsoft Media Platform Player Framework HTML 5 video player to work and am getting an error about mime type. There was a mention of a fix forthcoming in July, did that happen? If not, is there any new info on when it's planned?
    Monday, September 17, 2012 3:56 PM
  • John,

    We are planning to refresh the SDK for .NET to support updating the Mime Type more easily at the end of this month.  For now, you still have to follow the workaround for updating the Mime Type on the files in the Asset as noted above. 

    Monday, September 17, 2012 6:09 PM
    Owner
  • Hm this is weird, I set up the workaround above and swear I had it working with an example clip last night. For some reason now today that same clip is showing the same "No video with supported format and MIME type found." error as before, along with a new clip I just uploaded to test. I can login to the storage accout with "Azure Storage Explorer" and see the mp4 blob and confirm the ContentType is still the "video/mp4" setting it's supposed to be.. I wonder what else could cause this error?

    I am using the code 

                CloudBlobContainer container = cloudClient.GetContainerReference(sasUrl.Segments[1]);
                foreach (CloudBlob blob in container.ListBlobs())
                {
                    CloudBlob b = container.GetBlobReference(blob.Name);
    
                    if (b.Name.EndsWith(".mp4"))
                    {
                        b.Attributes.Properties.ContentType = "video/mp4";
                    }
    
                    b.SetProperties();
                }

    is there another step I need to take? I'm not sure I understand karthik_in_msdn's post. 

    Edit: Annnd now it's working again :/ Sorry, not sure what's going on, didn't change anything.. ah well.
    Wednesday, September 19, 2012 1:27 AM
  • Hi JohnArnold.ca,

    You can double-check your media file content types using an Azure Storage Explorer of your choice:

    http://blogs.msdn.com/b/windowsazurestorage/archive/2010/04/17/windows-azure-storage-explorers.aspx

    I like the fully featured http://azurestorageexplorer.codeplex.com/

    -Nick

    Saturday, September 22, 2012 3:48 AM
    Owner
  • Thanks Nick that's actually exactly the tool I had been using to confirm the change had indeed been made. I agree it's nice :) It turns out the issue was that I was trying in firefox, and I guess firefox doesn't support mp4 in html5.. so it looks like the player framework html5 player isn't going to be suitable for our needs.

    I'm looking at maybe trying out http://mediaelementjs.com/ to see if it will be able to play mp4 in firefox.

    Saturday, September 22, 2012 3:54 AM
  • The other issue that Karthik had that has gone somewhat poorly explained in this thread is that the player framework that he was using was likely doing a fallback to Flash in Firefox to play back the MP4/h264 content (this is due to the lack of MP4 and H264 support in Firefox).  When that happens, and the SWF for the player framework is hosted on another domain, flash will look for a crossdomain.xml policy file. Flash’s security model denies certain operations on files that are loaded from a different domain than the player.swf

    In order to work around this issue you have to place a crossdomain.xml file in the $root container of your storage account.  See the MSDN article here on Root Containers - http://msdn.microsoft.com/en-us/library/windowsazure/hh488356.aspx

    An example of a CrossDomain.xml policy file that will allow all domains to access video on your storage account is here. Keep in mind the security implications of doing this.

    <?xml version="1.0"?>
    <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
    <cross-domain-policy>
       <allow-access-from domain="*" />
    </cross-domain-policy>
    

    Adobe provides further documentation on this file format here: http://kb2.adobe.com/cps/142/tn_14213.html


    Saturday, September 22, 2012 3:16 PM
    Owner
  • Ohh ok. I'm guessing our player be hosted within the same site/domain though, but this is something I'm glad to know for in case it is being loaded remotely.

    Thanks for clearing that up!

    Monday, September 24, 2012 12:48 AM