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>