MediaPlayer as background

2 posts, 0 answers
  1. Miguel
    Miguel avatar
    15 posts
    Member since:
    Mar 2011

    Posted 22 Dec 2016 Link to this post

    Hi, I want to use the media player to play continuously a short video, like this site https://unity3d.com/

    So the video is in the background and I can place other Telrik components in front of it. Does the MediaPlayer is suited for this?

     

    regards

  2. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 23 Dec 2016 Link to this post

    Hello,

    You can use something like the following:

    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <style>
            .main-wrapper {
                border: 3px solid green;
                position: relative;
            }
     
            .mp-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100;
                display: inline-block;
                border: 3px solid red;
            }
     
            .my-content {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1000;
                display: inline-block;
                border: 3px solid blue;
                width: 1200px;
                height: 900px;
                color: white;
                text-align: center;
                font-size: 20px;
            }
     
            .my-content a {
                display: inline-block;
                padding: 15px 20px;
                background-color: #00bcd4;
                border: 1px solid aqua;
                margin: 20px 10px 10px 10px;
                border-radius: 10px;
                color: white;
                font-size: 20px;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
     
            <div class="main-wrapper">
                <div class="mp-wrapper">
                    <telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" runat="server"
                        Height="1000px" Width="1200px" Source="">
                        <Playlist>
                            <telerik:MediaPlayerVideoFile Title="Icenium" Poster="icenium.png">
                                <Sources>
                                    <telerik:MediaPlayerSource Path="https://www.youtube.com/watch?v=JFAcOnhcpGA" />
                                </Sources>
                            </telerik:MediaPlayerVideoFile>
                        </Playlist>
                    </telerik:RadMediaPlayer>
                </div>
     
                <div class="my-content">
     
                    <h4 style="font-size: 60px;">Everything you need to succeed in games and VR/AR</h4>
     
                    <p>Welcome to one of the world’s largest creative communities -- and the number one game development platform. Unity gives you everything you need to realize your creative vision fast, and move ahead.</p>
     
     
     
                    <a href="">Get Until Now</a><a href="">What is Unitiy?</a>
     
                </div>
            </div>
        </form>
    </body>
    </html>

    Note that the MediaPlayer and the content are absolutely positioned and using z-index the content is placed over the MediaPlayer. That way it is not possible to use the pause/play button that is inside the player, but I just set a lower height of the content compared to the player so it is possible to use the buttons on the bottom.

    Of course, you can decide to configure the player in a different way. With that example I am just showing how to put content over the video.

    Regards,
    Bozhidar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top