Auto Hide Video Player After Video Ends
Environment
| Product | RadMediaPlayer for ASP.NET AJAX |
| Version | All |
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 after it ends, use the OnClientEnded client-side event. In the event handler, you can set the visibility of the RadMediaPlayer to false.
Add the RadMediaPlayer control to your ASP.NET AJAX page.
<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.
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.