New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Show a thumbnail when the mouse is over the tracking slider

The KB article shows how to enable a thumbnail of the video, while the video is playing, and the cursor is hovering over the mediaplayer track slider. This effect is most evident in the YouTube videos.

Solution

The code solution below appends an <img> element to the generated thumbnail on hovering over the time progress icon:

ASPX

    <style>
        div.RadMediaPlayer .RadSlider div.rmpToolTip {
            margin: -63px -49px;
            padding: 1px;
        }

            div.RadMediaPlayer .RadSlider div.rmpToolTip video {
                margin-bottom: -5px;
                width: 150px;
                height: 85px;
            }
    </style>
        <script type="text/javascript">
Telerik.Web.UI.MediaPlayerObjects.MediaPlayerToolbar.prototype.setTimeValueOnTooltip = function (value) {
                var time = 1;
                var parts = value.split(":");
                for (var i = parts.length - 1; i >= 0; i--) {
                    time += parseInt(parts[i]) * Math.pow(60, parts.length - (i + 1));
                }

                var thumbnailsVideo = $get(this.owner.get_id() + "_thumbnailsVideo");

                if (!thumbnailsVideo) {
                    thumbnailsVideo = document.createElement('video');
                    thumbnailsVideo.id = this.owner.get_id() + "_thumbnailsVideo";
                    thumbnailsVideo.src = this.owner.get_source();
                    this._jprogressTooltip.prepend(thumbnailsVideo);
                }
                thumbnailsVideo.currentTime = time;
            }
        </script>
        <div class="testo" data-width="24"></div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" Width="640px" Height="360px"
            Source="Video/Video1.mp4" Skin="Silk" StartVolume="0">
        </telerik:RadMediaPlayer>

You can download the solution files from here.

For more information you can check the following online resources:

Show a thumbnail when the mouse is over the tracking slider

Environment

Description

Solution