Remove logo from video within a IFrame?

Sturla 176 Reputation points
2022-05-27T09:12:32.537+00:00

My setup:
My backend is in Blazor where I can´t show video previews of streams before they go live (users pay for streams on the frontend Razor pages and AMP).

Before users start their stream (to go live) they can preview the stream from within a IFrame like this

<iframe src="//aka.ms/ampembed?url=@NewStreamEvent.PreviewUrl"  
@ref="azuremediaplayer"  
id="azuremediaplayer"  
name="azuremediaplayer"  
scrolling="no"  
frameborder="no"  
align="center"  
height="280px"  
width="500px"  
autoplay  
allowfullscreen  
class="embed-responsive-item"></iframe>  

This is just a temporary solution that I hope to remove soon.

The issue
How can I pass into this IFrame control to remove the Azure Media Service logo that is shown there?

Later
I will remove the IFrame when these issues have been solved Support Smoothstream video format and Support for AES-128 token encryption on video stream

Azure Media Services
Azure Media Services
A group of Azure services that includes encoding, format conversion, on-demand streaming, content protection, and live streaming services.
305 questions
0 comments No comments
{count} votes

Accepted answer
  1. John Deutscher (MSFT) 2,126 Reputation points
    2022-05-27T16:05:08.913+00:00

    Ideally you should first move to host your own player and not take any kind of dependency on the embed link that you have been using. That's not a supported service, or one that should be used for production.

    Follow the documentation on how to deploy and host your own player first.
    https://learn.microsoft.com/en-us/azure/media-services/azure-media-player/azure-media-player-quickstart

    Once you are there, it's just simple CSS updates to remove the logo. The class name on that item is 'amp-logo'.

    .amp-logo {
    width: .18em;
    visibility: hidden;
    }

    Also, you can consider using other open source players as well. Azure Media Services works great with many different players on the market, and you are not limited to AMP. I see you tried HLS.js and that is also a good solution. The other issues that you are hitting are likely something to do with the URL you are passing to the streaming library. AMS requires you to set specific format strings at the end of the URL to control what streaming protocol is used. Passing Smooth streaming manifests to a DASH player will make it fail. Likewise, passing smooth manifests to and HLS player will make it fail. I'll follow up in the other threads.. but you will also find that support for Blazor and streaming overall is bad... and I would probably direct you to think about React.js instead where the support is a lot better.


0 additional answers

Sort by: Most helpful