使用UI Framework建立基本播放器

若要使用UI架構建立基本播放器:

  1. 為您的播放器例項建立<div>

    例如:

    <div id="video1" > 
     </div>
    
  2. 載入播放器。

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

    建立播放器時,指定的<div>元素會獲得ptp-main-video-div-style的CSS類別。 產生的DOM會顯示如下:

    <div id="video1" class="ptp-main-video-div-style"> 
        <video class="vp-video-element"></video> 
    </div>
    
  3. 新增UI控制項。

    例如,新增當滑鼠暫留在播放器上時顯示的控制列:

    <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>
    

    產生的DOM如下:

    <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>
    

從呼叫ptp.videoPlayer()傳回的物件會提供包住TVSDK媒體播放器API的行為,並可程式化控制播放。 當您呼叫媒體播放器例項時,使用者介面會根據媒體播放器引發的事件自行更新:

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

本頁內容