Create a basic player using the UI Framework

To create a basic player using the UI Framework:

  1. Create a <div> for your player instance.

    For example:

    <div id="video1" > 
     </div>
    
  2. Load the player.

    <script> 
        (function(){ 
            var player = ptp.videoPlayer('#video1'); 
        })(); 
    </script>
    

    When the player is created, the specified <div> element is given a CSS class of ptp-main-video-div-style. The resulting DOM appears something like this:

    <div id="video1" class="ptp-main-video-div-style"> 
        <video class="vp-video-element"></video> 
    </div>
    
  3. Add a UI control.

    For example, add a control bar that appears when the mouse hovers over the player:

    <script> 
        (function(){ 
            function myControlBarBehavior(element, configuration, player) { 
                return ptp.controlBarBehavior(element, configuration, player); 
            } 
            var player = ptp.videoPlayer('#video1', { 
                controlBar: { 
                    behavior: myControlBarBehavior, 
                    classNames: 'ptp-control-bar my_control_bar' 
                } 
            }); 
        })(); 
    </script>
    

    The resulting DOM appears as follows:

    <div id="video1" class="ptp-main-video-div-style"> 
        <div class="ptp-control-bar my_control_bar"></div> 
        <video class="vp-video-element"></video> 
    </div>
    

The object returned from calling ptp.videoPlayer() provides a behavior that wraps the TVSDK media player API and allows for programmatic control of playback. When you make calls on the media player instance the user interface updates itself based on events fired by the media player:

<script> 
    (function(){ 
        var player = ptp.videoPlayer('#video1'); 
        player.loadResource( 'sample.mp4' ); 
    })(); 
</script>

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now