DotNetT Light_870x220

You know "that guy," the one who is always blasting noise from videos on their device. But it's not their fault! Chances are, the web app playing those videos didn't use Telerik media player. Learn how you can easily build a beautiful media experience for your users.

You’ve probably had to find a way to let your employees watch the latest company broadcast without interrupting their daily routine, or, if your web app has anything to do with media, show your visitors several videos at once. Pretty straightforward once you put a Teleik media player for ASP.NET AJAX on the page and you can easily throw it in a popup.

Now comes the part where you must not ruin the UX, or your users will curse you.

“But how, it’s just a video”, you ask.
“It’s easy”, I say – just let your users have the video play somewhere they can’t see it, but they will hear it.

Yeah, there’s the mute button on the tab in Chrome and Firefox, but what about mobile? Also, what it if doesn’t work (it doesn’t always work for embedded YouTube videos, at least for me).

So, don’t be that guy whose page blasts noise through the speakers on the adjacent desk or from some phone in the subway.

All you need to do is to make sure that:

  • If the popup is not visible, the video is not playing.
  • The user can’t move the popup somewhere they can’t dismiss it easily.

To do that easily, you need some rich API from the controls we use, like what you can get from RadWindow and RadMediaPlayer.

Let’s have a walkthrough of the generic approach:

  1. First, pick a video. Here’s a basic way to show one:
    <telerik:RadMediaPlayer runat="server" ID="RadMediaPlayer1" StartTime="8" AutoPlay="false" Width="600px" Height="350px" Source="https://www.youtube.com/watch?v=UlzBZBWEXN4" Title="Kendo R3 2018 Webinar">
    </telerik:RadMediaPlayer>
  2. Now, put it in a dialog. Roughly like that:
    <telerik:RadWindow runat="server" ID="RadWindow1" Title="Kendo UI R3 2018 Webinar" VisibleOnPageLoad="true" AutoSize="true">
        <ContentTemplate>
            <telerik:RadMediaPlayer runat="server" ID="RadMediaPlayer1" StartTime="8" AutoPlay="false" Width="600px" Height="350px" Source="https://www.youtube.com/watch?v=UlzBZBWEXN4" Title="Kendo R3 2018 Webinar">
            </telerik:RadMediaPlayer>
        </ContentTemplate>
    </telerik:RadWindow>
  3. Here comes the part where you have to hook some events and tie those two pieces together depending on their API (full code listing with annotations is available below):
    • Use the OnClientShow event to make sure the video resumes.
    • Use the OnClientClose event to pause the video so it doesn’t play, and the user can resume where they left off.
    • Set up a few properties on the dialog so the user can’t drag it out of the viewport, for example.
    • Then there’s a bit of initialization logic and helper methods due to the control specifics that I wrote for you.

It’s easy when the controls give you all the methods and events you need. You can build on this further. For example, have the RadWindow always stay in one spot in the viewport by pinning it and removing the Pin behavior for your users to they can’t un-pin it themselves.

Most of the code here are annotations, don't look at the scrollbar:
<asp:Button Text="show me the webinar" OnClientClick="showWebinar(); return false;" ID="Button1" runat="server" />
<telerik:RadWindow runat="server" ID="RadWindow1" Title="Kendo UI R3 2018 Webinar" Behaviors="Move, Close, Pin"
    OnClientShow="startPlayer"
    OnClientClose="pausePlayer"
    OnClientBeforeShow="raiseFlag"
    VisibleOnPageLoad="true" Left="-9999px">
    <ContentTemplate>
        <telerik:RadMediaPlayer runat="server" ID="RadMediaPlayer1" StartTime="8" AutoPlay="false" Width="600px" Height="350px" OnClientReady="OnClientReady" Source="https://www.youtube.com/watch?v=UlzBZBWEXN4" Title="Kendo R3 2018 Webinar">
        </telerik:RadMediaPlayer>
    </ContentTemplate>
</telerik:RadWindow>
 
<script>
    function startPlayer(sender, args) {
        //just use the control's API
        //the flag is used to provide initialization
        if (!sender.__initializationShowing) {
            getPlayer(sender.get_contentElement()).play();
        }
    }
 
    function pausePlayer(sender, args) {
        //just like when we started the player automatically
        //we're going to pause it so the user can continue
        //where they left off, should they choose to
        //the flag is used to provide initialization
        if (!sender.__initializationShowing) {
            getPlayer(sender.get_contentElement()).pause();
        }
    }
 
    function showWebinar() {
        var popup = getPopup();
        popup.show();
        popup.center();
        //for the sake of the demo, we will make it so that the RadWindow closes after a few seconds
        //as if the user closed it, either accidentally, or on purpose, hoping to get rid of the video
        //remove the .pause() call above and you'll see that nasty behavior with phantom audio
        setTimeout(function () {
            popup.close();
            console.log("now the tab is neatly quiet, as it should be");
        }, 2000);
    }
 
    function raiseFlag(sender, args) {
        //the media player needs to be visible in order to initialize properly,
        //hence the VisibleOnPageLoad=true property, similar to audio initialization on mobile devices
        //so we're going to have the RadWindow show up when the page loads for a brief instant
        //we'll put a flag in the dialog object to ensure the rest of the logic does not fire
        //we will lower it when the media player is ready to work
        sender.__initializationShowing = true;
    }
 
    function OnClientReady(sender, args) {
        var popup = getPopup();
        popup.close();
        //ensures we don't raise the flag all the time, but only once
        popup.remove_beforeShow(raiseFlag);
        //have the control start autosizing to fit the player
        //if it autosizes during preloading, it will be visible
        //in the viewport, instead of at Left=-9999px
        //there are plenty more methods to configure everything in the API:
        popup.set_autoSize(true);
        popup.set_keepInScreenBounds(true);
        //lower the flag to let the play/pause work
        popup.__initializationShowing = null;
    }
 
    function getPlayer(container) {
        //read more on getting a reference to a control object on the client-side here:
        //here we're going to use a DOM traversal to get a reference to the media player in the popup
        //so I can show you that it can be really helpful when working with templates and nested controls
        return $telerik.$(container).find(".RadMediaPlayer").first().get(0).control;
    }
 
    function getPopup() {
        return $find("<%=RadWindow1.ClientID%>");
    }
</script>
 

You can apply the same approach to any other similar situation, be that playing audio, having multiple videos playing at once (just loop the dialogs and pause all of the old ones).

If you have other tips for your fellow devs so they aren’t “that guy,” post them in the comments down below.


About the Author

Marin Bratanov

is a Principal Technical Support Engineer in the ASP.NET AJAX division. Ever since he joined Telerik in early 2011 as a novice, his main focus has been improving the services and customer care the company offers. Apart from work, Marin is an avid reader and usually enjoys the worlds of fantasy and Sci-Fi literature. You can find him on Twitter, Goodreads, LinkedIn and GooglePlus.

Related Posts

Comments

Comments are disabled in preview mode.