Skip to content

Commit

Permalink
Added new kb article mediaplayer-auto-hide-player-wehn-video-ends (#606)
Browse files Browse the repository at this point in the history
* Added new kb article mediaplayer-auto-hide-player-wehn-video-ends

* kb(mediaplayer): update article

---------

Co-authored-by: KB Bot <[email protected]>
Co-authored-by: P1l3T0 <[email protected]>
  • Loading branch information
3 people authored Oct 9, 2024
1 parent 3a70fc6 commit 3c72861
Showing 1 changed file with 62 additions and 0 deletions.
62 changes: 62 additions & 0 deletions knowledge-base/mediaplayer-auto-hide-player-when-video-ends.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
title: Auto Hide Video Player After Video Ends
description: Learn how to automatically play a video on page load and hide the RadMediaPlayer control once the video ends in ASP.NET AJAX applications.
type: how-to
page_title: Auto Hide Video Player After Video Ends
slug: mediaplayer-auto-hide-player-when-video-ends
tags: radmediaplayer, asp.net ajax, video, autoplay, hide, client-side events
res_type: kb
ticketid: 1666814
---

## Environment

<table>
<tbody>
<tr>
<td>Product</td>
<td>RadMediaPlayer for ASP.NET AJAX</td>
</tr>
<tr>
<td>Version</td>
<td>All</td>
</tr>
</tbody>
</table>

## Description

I want to auto-play an MP4 video with sound on page load and make the video player disappear after the video has finished playing. The goal is to play a short welcome video by the owner that automatically hides itself upon completion.

This KB article also answers the following questions:

- How can I make RadMediaPlayer auto-play a video?
- Is it possible to hide RadMediaPlayer after the video ends?
- Can RadMediaPlayer start playing a video automatically and then hide itself?

## Solution

To achieve the desired behavior of auto-playing a video and hiding the [RadMediaPlayer](https://docs.telerik.com/devtools/aspnet-ajax/controls/mediaplayer/overview) after it ends, use the `OnClientEnded` [client-side event](https://docs.telerik.com/devtools/aspnet-ajax/controls/mediaplayer/client-side-programming/overview#client-side-events). In the event handler, you can set the visibility of the RadMediaPlayer to `false`.

Add the RadMediaPlayer control to your ASP.NET AJAX page.

````ASP.NET
<telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" runat="server" Width="640px" Height="360px"
Source="https://www.example.com/path/to/your/video.mp4" OnClientEnded="onClientEnded" />
````

Define the `onClientEnded` JavaScript function. This function will be triggered when the video playback ends, hiding the RadMediaPlayer control.

````JavaScript
function onClientEnded(sender, args) {
sender.set_visible(false);
}
````

By following these steps, the RadMediaPlayer will automatically begin playing the video when the page loads and will hide itself after the video concludes, achieving the effect of a welcoming video that disappears post-playback.

## See Also

- [RadMediaPlayer Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/mediaplayer/overview)
- [MediaPlayer Client-Side Programming](https://docs.telerik.com/devtools/aspnet-ajax/controls/mediaplayer/client-side-programming/overview)
- [MediaPlayer Client-Side Events](https://docs.telerik.com/devtools/aspnet-ajax/controls/mediaplayer/client-side-programming/overview#client-side-events)

0 comments on commit 3c72861

Please sign in to comment.