none
How to use Custom Player logo (looking for different way than the way of image overlay) RRS feed

  • Question

  • I've tested with image overlay through https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-advanced-encoding-with-mes

    This works but makes me feel a series of labor.

    I've found a property(?) as Custom Player logo in official page of Azure Media Player as attached screenshot and want to know what exactly this is and how to utilize this property ?

    When the Microsoft Azure Default logo= enabled, we can see the Microsoft logo image are always overlayed on every videos without encoded together respectively.

    Therefore, I expect there's a funtionality that we can replace the Microsoft Azure logo with custom image.

    Always thanks for excellent insight & support !


    • Edited by Kay_Lee Monday, April 22, 2019 11:33 PM
    Saturday, April 20, 2019 11:13 AM

Answers

  • You could override the logo with the following config:

    var myOptions = {
                autoplay: true,
                controls: true,
                width: "640",
                height: "400",
                logo: { targetUrl: "http://yoururl.com/yourlogo" },
                traceConfig: {maxLogLevel:3, TraceTargets: [{target: 'console'}]},
                poster: ""
            };
            var myPlayer = amp("azuremediaplayer", myOptions);
    

    We would also update this in the document soon, but there is no ETA as of yet.

    Tuesday, April 23, 2019 11:52 AM
    Moderator
  • Here is another approach.

    AMP gives you capability to customize the skin (look’n’feel), so you can create your own skin (CSS style sheet) or override ‘amp-default’ skin to change the logo or override logo png URL.

    Here is my quick sample to change the logo (with a custom stylesheet overrides amp-default skin).

    http://shigeyfampdemo.azurewebsites.net/test/ampcustomlogo.html

    Tuesday, May 7, 2019 7:04 PM

All replies

  • Apologies for the delay! Thank you for raising this question, we are checking on this internally and will get back to you soon. Much appreciate your nice feedback.

    Monday, April 22, 2019 5:35 PM
    Moderator
  • You could override the logo with the following config:

    var myOptions = {
                autoplay: true,
                controls: true,
                width: "640",
                height: "400",
                logo: { targetUrl: "http://yoururl.com/yourlogo" },
                traceConfig: {maxLogLevel:3, TraceTargets: [{target: 'console'}]},
                poster: ""
            };
            var myPlayer = amp("azuremediaplayer", myOptions);
    

    We would also update this in the document soon, but there is no ETA as of yet.

    Tuesday, April 23, 2019 11:52 AM
    Moderator
  • As additional question,

    Does the targetUrl have to be like 'http address' or may be '../my.logo' to indicate some file in ASP.NET project ?

    Thank you !

    Tuesday, April 30, 2019 10:54 PM
  • Your solution doesn't work yet..

    Any Idea ?

    Hope Microsoft team update this feature soon !


    • Edited by Kay_Lee Saturday, May 4, 2019 6:29 AM
    Saturday, May 4, 2019 6:29 AM
  • Could you please let us know what specific issue/error you’re experiencing/receiving with this? While we investigate this further. Sorry for any inconvenience with this query. 

    Monday, May 6, 2019 11:06 AM
    Moderator
  • I uploaded a png image file on my Azure storage and this image can be shown when I access directly to the storage address of the image.

    Of course, I granted public access to this image.

    I just set the option same you suggested in JavaScript.

    However, nothing appears at the location where Microsoft Azure logo is shown as default.


    • Edited by Kay_Lee Monday, May 6, 2019 11:24 AM
    Monday, May 6, 2019 11:21 AM
  • Here is another approach.

    AMP gives you capability to customize the skin (look’n’feel), so you can create your own skin (CSS style sheet) or override ‘amp-default’ skin to change the logo or override logo png URL.

    Here is my quick sample to change the logo (with a custom stylesheet overrides amp-default skin).

    http://shigeyfampdemo.azurewebsites.net/test/ampcustomlogo.html

    Tuesday, May 7, 2019 7:04 PM
  • Thanks for the sample.

    I followed the source of your sample page with the logo image address same but failed after long time try.

    There are 2 red line in css file saying '-webkit-calc(.03em) is not the appropriate value  of right and top attribute in css 4.0 version' and therefore, I just made the 2 red line as annotation.

    Any idea ?

    It seems better for me to try after Microsoft team make this feature to be more easily implemented in near future due to lack of time....



    • Edited by Kay_Lee Thursday, May 9, 2019 9:57 AM
    Thursday, May 9, 2019 9:55 AM
  • It is working fine with the sample on browsers/OS we examined, could you please let us know what OS/browser are you testing this on? Just to isolate you may try this out on multiple browsers and let us know the outcome. Thanks again for the update.

    Monday, May 13, 2019 3:47 PM
    Moderator
  • Today, I created a new ASP.NET core MVC project in Visual Studio 2019.

    I made the _ViewStart.cshtml Layout= null and just copied all html in your example page and the css file as well.

    I'm still seeing the 4 redline messages 'validity test(CSS 4.0): "-webkit-calc(0.3em)" is not the appropriate value of Top attribute"

    With or without making the 4 redline to be as annotation, the original Microsoft Azure default logo is seen at the beginning and gone and the nothing appear at the location.

    When I put your example link to the address of Internet Explorer Browser and Chrome, the custom Azure logo is successfully seen (not through Visual Studio).

    Do you know why the validity test(CSS 4.0) shows 4 redline ?

    I think indicating the image file(custom logo) from .css file must exclude any problem in .css file.

    Thank you !

    Development enviroment-

    Windows10 Enterprise 2016 LTSB 10.0.14393

    Visual Studio 2019 Community Edition

    Internet Explorer 11.2969.14393.0

    Wednesday, May 15, 2019 11:01 AM
  • Thanks for sharing additional details! Just to isolate/test, could you try downloading the image and host the image file on your dev environment? It appears to be a generic CORS issue.

    Saturday, May 18, 2019 6:40 PM
    Moderator
  • Hello, sorry for late reply due to reallyreally busy days..

    What do you mean by 'host the image file on your dev environment' ?

    I've downloaded and added your AzureLogo.PNG file to my Project Folder of Visual Studio and modified the .css file as 'background-image: url("../images/AzureLogo.png");' but same result.

    (the path was recommended automatically by Visual Studio Intellisense)

    The detal of result-

    the default Azure logo is seen at the beginning and disappears later on but appears again when I hover my mouse on the video being streamed. (I mean the default Azure logo, not the custom logo)

    Waiting kind and excellent support !

    Thank you !




    • Edited by Kay_Lee Sunday, June 2, 2019 2:45 AM
    Saturday, June 1, 2019 9:21 PM
  • You could check to see if it works locally instead of Azure to isolate the issue, the customization is a pure HTML5/CSS matter. If the issue still persists, could you please send an email to AzCommunity[at]Microsoft[dot]com referencing this thread as well as your Azure subscription ID, we would like to work closer with you on this query.

    Monday, June 3, 2019 12:03 PM
    Moderator
  • I've sent an e-mail to azcommunity@microsoft.com

    Thank you !

    Monday, June 3, 2019 12:39 PM
  • I've sent an e-mail to azcommunity@microsoft.com

    Thank you !

    @Kay, Ack, thank you! In discussion on this with you already.
    Friday, June 7, 2019 11:18 AM
    Moderator
  • Hello,

    As I told you that this issue might be just foolish thing because I'm entry level of web programming compared to desktop, SQL programming level.

    The foolish solution is setting exact path in '<link href="~/css/ampcustomlogo.css" rel="stylesheet">' syntax according to people's own folder structure.

    Now I can easily set & see cutomized logo.

    As additional question, however, the custom logo appears & disappears together whenever azure media player's playback controls appear & disappear.(whenever touching the streaming video)

    Is there a way to make the custom logo to stay without disappearing ?

    Thank you !

    Sunday, June 9, 2019 3:43 AM
  • That is the default behavior, as you can see the same behavior with default logo: ttps://ampdemo.azureedge.net/azuremediaplayer.html

    You may (re-)encode your contents to create video with watermark image. Please see the documentation for a detailed steps: 
    https://docs.microsoft.com/en-us/azure/media-services/previous/media-services-advanced-encoding-with-mes#overlay

    Wednesday, June 12, 2019 5:07 PM
    Moderator
  • As I wrote in the question of this thread, I've already tested the encoding image overlay.

    I hope and waiting Microsoft team to improve the behavior.

    Thank you.

    Saturday, June 15, 2019 9:58 AM
  • Apologies for any inconvenience with this topic, thanks for sharing your feedback. For any specific product feedback, you could always post your feedback on our Uservoice https://feedback.azure.com/forums/169396-azure-media-services - All of the feedback you share in these forums will be monitored and reviewed by the Microsoft engineering teams responsible for building Azure.  

    Wednesday, June 19, 2019 12:18 PM
    Moderator
  • The documentation link you have provided is for AMS V2.

    What if the AMS V3 is being used? Does the overlay still work with encoding?

    Friday, August 9, 2019 10:26 AM