Completed
Last Updated: 28 Nov 2024 11:51 by ADMIN
Jeremy
Created on: 02 Jun 2014 21:24
Category: MediaPlayer
Type: Feature Request
2
Add full-screen related events for RadMediaPlayer
Would like to see more events added to the control, specifically events when entering or leaving fullscreen mode.

1 comment
ADMIN
Rumen
Posted on: 28 Nov 2024 11:51

Hi folks,

Here is an example showing how to check for the full-screen mode of the browser when the full-screen mode button of RadMediaPlayer is clicked:

        <script>
            function pageLoad() {
                var mediaPlayer = $find('<%=RadMediaPlayer1.ClientID%>');
                var fullScreenButton = document.querySelector("#<%=RadMediaPlayer1.ClientID%>_Toolbar_FSButton");

                // Attach click event to the fullscreen button
                $telerik.$(fullScreenButton).on("click", function () {

                    var isFullScreen = !!(
                        document.fullscreenElement ||
                        document.mozFullScreenElement ||
                        document.webkitFullscreenElement ||
                        document.msFullscreenElement
                    );

                    // Check if we are in fullscreen mode
                    if (!isFullScreen) {
                        // If it is full screen mode, do something, e.g. Hide the playlist
                        mediaPlayer.playlist.set_visible(false);

                    } else {
                        // otherwise show the playlist
                        mediaPlayer.playlist.set_visible(true);

                    } 
                });
            }

        </script>
        <telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" Width="600px" Height="400px" PlaylistPosition="Right" AutoPlay="true">
            <Playlist>
                <telerik:MediaPlayerVideoFile Path="video1.mp4" Title="Video 1" />
                <telerik:MediaPlayerVideoFile Path="video2.mp4" Title="Video 2" />
            </Playlist>
        </telerik:RadMediaPlayer>

Regards,
Rumen
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources