Telerik blogs

Don't Make Your Users "That Guy" when Playing Videos in Web Apps

Marin Bratanov by Marin Bratanov
November 23, 2018 Web, ASP.NET AJAX 0 Comments
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 Telerik 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.

ASP.NET AJAX, Telerik UI for ASP.NET AJAX, UX
Marin Bratanov
About the Author

Marin Bratanov

Marin Bratanov was a Principal Technical Support Engineer in the Blazor division.

Related Posts

Web Blazor ASP.NET MVC ASP.NET Core ASP.NET AJAX Release

What’s New in Telerik Web UI Component Libraries with R2 2023

Release Web Mobile Desktop Productivity

The Telerik and Kendo UI R2 2023 Release Is Here—See What’s New!

Comments

Comments are disabled in preview mode.