顯示視訊的持續時間、目前時間和剩餘時間

您可以使用瀏覽器TVSDK來擷取可顯示在搜尋列上之媒體的相關資訊。

  1. 等待您的播放器至少處於「已準備」狀態。

  2. 使用MediaPlayer.currentTime屬性擷取目前的播放磁頭時間。

    此屬性會傳回虛擬時間軸上目前的播放磁頭位置(以毫秒為單位)。 時間會相對於可能包含多個替代內容例項的已解析串流來計算,例如,多個廣告或廣告片段會拼接到主串流中。 對於即時/線性串流,傳回的時間一律在播放視窗範圍內。

    MediaPlayer.currentTime
    
  3. 擷取串流的播放範圍並決定持續時間。

    1. 使用mediaPlayer.playbackRange屬性來取得虛擬時間軸時間範圍。

    2. 要確定持續時間,請從範圍結束處減去開始。

      這包括插入至串流(廣告)的其他內容的持續時間。

      對於VOD,範圍一律以零開始,而結束值等於主要內容持續時間與插入串流(廣告)中之其他內容的持續時間之和。

      對於線性/即時資產,範圍代表播放視窗範圍,而此範圍在播放期間會變更。

  4. 使用MediaPlayer和瀏覽器TVSDK元素上可用的方法來設定搜尋列參數。

    例如,這裡提供了可在HTML中顯示搜尋列的版面。

    <div class="seekbar" id="seekbar"> 
         <div> 
            <span class="backer" id="backer"></span> 
            <span class="buffer" id="buffer" ></span> 
            <div class="playhead" id="playhead"></div> 
                      <span class="progress" id="progress" ></span> 
            </div> 
          </div> 
      </div> 
    

    以下是對應的css:

    #seekbar { 
          position: relative; 
          width: 100%; 
          height: 16px; 
          cursor: pointer; 
          background: transparent; 
    } 
    
    #seekbar div { 
          position: relative; 
          height: 100%; 
          margin-left: 8px; 
          margin-right: 8px; 
    } 
    
    #seekbar span { 
          position: absolute; 
          height: 60%; 
          top: 20%; 
    
          display: block; 
    
          -webkit-border-radius: 16px; 
          -moz-border-radius: 16px; 
          border-radius: 16px; 
    } 
    
    #seekbar.playhead { 
         z-index: 1011; 
         height: 14px; 
         width: 14px; 
         border: 1px outset #c9cbce; 
         position: absolute; 
         left: -8px; /* adjust center of playhead over start of range */ 
         display: block; 
         padding: 0; 
         margin: 0; 
    
         background: #c9cbce; /* Old browsers */ 
         background: -moz-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* FF3.6+ */ 
         background: -webkit-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* Chrome10+,Safari5.1+ */ 
         background: -o-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* Opera 11.10+ */ 
         background: -ms-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* IE10+ */ 
         background: radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* W3C */ 
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cbce', endColorstr='#dedee1',GradientType=0 ); /* IE6-9 */ 
    
         -webkit-border-radius: 16px; 
         -moz-border-radius: 16px; 
         border-radius: 16px; 
    } 
    
    #seekbar.backer { 
            z-index: 1004; 
            width: 100%; 
    
            background: #414142; /* Old browsers */ 
            background: -moz-linear-gradient(top,  #414142 0%, #343232 100%); /* FF3.6+ */ 
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#414142), color-stop(100%,#343232)); /* Chrome,Safari4+ */ 
            background: -webkit-linear-gradient(top,  #414142 0%,#343232 100%); /* Chrome10+,Safari5.1+ */ 
            background: -o-linear-gradient(top,  #414142 0%,#343232 100%); /* Opera 11.10+ */ 
            background: -ms-linear-gradient(top,  #414142 0%,#343232 100%); /* IE10+ */ 
            background: linear-gradient(to bottom,  #414142 0%,#343232 100%); /* W3C */ 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414142', endColorstr='#343232',GradientType=0 ); /* IE6-9 */ 
    
    } 
    
    #seekbar .buffer { 
           z-index: 1005; 
           position: absolute; 
    
           background: #4b4b4c; /* Old browsers */ 
           background: -moz-linear-gradient(top,  #4b4b4c 0%, #818184 100%); /* FF3.6+ */ 
           background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b4b4c), color-stop(100%,#818184)); /* Chrome,Safari4+ */ 
           background: -webkit-linear-gradient(top,  #4b4b4c 0%,#818184 100%); /* Chrome10+,Safari5.1+ */ 
           background: -o-linear-gradient(top,  #4b4b4c 0%,#818184 100%); /* Opera 11.10+ */ 
           background: -ms-linear-gradient(top,  #4b4b4c 0%,#818184 100%); /* IE10+ */ 
           background: linear-gradient(to bottom,  #4b4b4c 0%,#818184 100%); /* W3C */ 
           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4c', endColorstr='#818184',GradientType=0 ); /* IE6-9 */ 
    } 
    
    #seekbar .progress { 
            z-index: 1010; 
            position: absolute; 
    
            background: #4591ce; /* Old browsers */ 
            background: -moz-linear-gradient(top,  #4591ce 0%, #3080c2 100%); /* FF3.6+ */ 
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4591ce), color-stop(100%,#3080c2)); /* Chrome,Safari4+ */ 
            background: -webkit-linear-gradient(top,  #4591ce 0%,#3080c2 100%); /* Chrome10+,Safari5.1+ */ 
            background: -o-linear-gradient(top,  #4591ce 0%,#3080c2 100%); /* Opera 11.10+ */ 
            background: -ms-linear-gradient(top,  #4591ce 0%,#3080c2 100%); /* IE10+ */ 
            background: linear-gradient(to bottom,  #4591ce 0%,#3080c2 100%); /* W3C */ 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4591ce', endColorstr='#3080c2',GradientType=0 ); /* IE6-9 */ 
    } 
    
  5. 監聽AdobePSDK.TimeChangeEvent並相應地更新seekbar。

    player.addEventListener(AdobePSDK.PSDKEventType.TIME_CHANGED, onTimeChange); 
    
    /** 
         * Called when the player's time changes. 
         * Update UI to show current time, seekbar playhead position and buffer level. 
         */ 
         function onTimeChange(event) 
         { 
           if (!seekBar.isSeeking) { 
           var time = event.time; 
           var range = player.playbackRange; 
           seekBar.updatePlayhead(time, range); 
           updateDisplayTime(time, range); 
    
            var bufferedRange = player.bufferedRange; 
            seekBar.updateBufferLevel(bufferedRange.end, range); 
          } 
    
        } 
    

    此示例建立一個seekbar對象以更新seekbar:

    /** 
        * Seekbar object which handles the display of the player progress,  
        * playhead, and buffer level. 
        */ 
        seekBar = (function () { 
    
        var playheadHalfSize = 8, // must be half width of playhead defined in CSS 
            containerElm = null, 
            playheadElm = null, 
            backerElm = null, 
            bufferElm = null, 
            progressElm = null, 
            currentPos = 0, // [0,1] relative to range 
            currentBuffer = 0,// [0,1] relative to range 
            listener = null, 
            isSeeking = false, 
    
             setPositionChangeListener = function (funct) { 
                listener = funct; 
             }, 
    
             getSeekBarBounds = function () { 
               return backerElm.getBoundingClientRect(); 
             }, 
    
             onPositionChange = function (event) { 
                 var pos = event.pageX || event.clientX; 
                 var bounds = getSeekBarBounds(); 
                 // normalize position to seek bounds 
                 pos -= bounds.left; 
                 var percent = pos / (bounds.right - bounds.left); 
    
                 // check bounds 
                  if (percent > 1) percent = 1; 
                  else if (percent < 0) percent = 0; 
    
                  currentPos = percent; 
                  setPosition(percent); 
               }, 
    
                  updatePlayhead = function (time, range) { 
                  if (!isSeeking) { 
                  var pos = convertTimeToRelativePosition(time, range); 
                  setPosition(pos); 
               } 
             }, 
    
                setPosition = function (percent) { 
                // adjust to keep playhead graphic inside container on right side 
                var bounds = getSeekBarBounds(); 
                var pos = percent * (bounds.right - bounds.left); 
    
                progressElm.style.width = (pos).toString() + "px"; 
                playheadElm.style.left = (pos-playheadHalfSize).toString() + "px"; 
    
                currentPos = percent; 
                return percent; 
    
                }, 
    
                 updateBufferLevel = function (level, range) { 
                 if (!isSeeking) { 
                     var position = convertTimeToRelativePosition(level, range); 
                     setBufferLevel(position); 
                    } 
                }, 
    
                  setBufferLevel = function (percent) { 
                     currentBuffer = percent; 
                     var bounds = getSeekBarBounds(); 
                     var pos = percent * (bounds.right - bounds.left); 
    
                            bufferElm.style.width = pos.toString() + "px"; 
                        }, 
    
                        resetSeekBar = function () { 
                           setPosition(currentPos); 
                           setBufferLevel(currentBuffer); 
                        }, 
    
                        convertTimeToRelativePosition = function (time, range) { 
                           // convert time to a percentage of the duration 
                           var position = (time - range.begin) / range.duration; 
                           if (position > 1) position = 1; 
                           else if (position < 0) position = 0; 
                           return position; 
                        }, 
    
                        unattachEvents = function (e) { 
                          this.removeEventListener('mousemove', onPositionChange); 
                          this.removeEventListener('mouseout', unattachEvents); 
                          this.removeEventListener('mouseup', unattachEvents); 
    
                            this.addEventListener('mouseover', attachEvents); 
                            isSeeking = false; 
                        }, 
    
                        attachEvents = function (e) { 
                           this.addEventListener('mousemove', onPositionChange); 
                           this.addEventListener('mouseout', unattachEvents); 
                           this.addEventListener('mouseup', unattachEvents); 
                           isSeeking = true; 
                           return false; 
                        }; 
    
                return  { 
                    init : function () { 
                      containerElm = document.getElementById("seekbar"); 
                      backerElm = document.getElementById("backer"); 
                      playheadElm = document.getElementById("playhead"); 
                      bufferElm = document.getElementById("buffer"); 
                      progressElm = document.getElementById("progress"); 
    
                      // client seek via scrubbing 
                      containerElm.addEventListener('mousedown', attachEvents); 
    
                      // client seek via single click or 'mouseup' after scrubbing 
                      containerElm.addEventListener('click', function (e) { 
                         if (listener !== null && !player.areControlsDisabledInAd()) { 
                            onPositionChange(e); 
                            // callback to notify of desired seek position 
                            listener.call(this, currentPos); 
                            } 
                        }); 
    
                        // end client seek via scrubbing 
                        document.addEventListener('mouseup', function (e) { 
                            containerElm.removeEventListener('mouseover', attachEvents); 
                        }); 
                    }, 
    
                   /** 
                   * Is the playhead currently being scrubbed. 
                   */ 
                   isSeeking : isSeeking, 
    
                   /** 
                   * Change the position of the playhead. 
                   * @param time - time in seconds to position playhead 
                   * @param range - current playback range 
                   */ 
                   updatePlayhead : updatePlayhead, 
    
                   /** 
                   * Change the position of the buffer range. 
                   * @param time - time in seconds to position head of buffer 
                   * @param range - current playback range 
                   */ 
                   updateBufferLevel : updateBufferLevel, 
    
                   /** 
                   * Set listener which is called when the playhead position changes 
                   * by the user event. Listener is not called when playhead position 
                   * changes via updatePlayhead function. 
                   * @param listener - callback function, passed single position argument 
                   * representing the playhead position in the range [0,1]. 
                   */ 
                   setPositionChangeListener : setPositionChangeListener, 
    
                   /** 
                   * Readjust position levels if seekbar is resized. 
                   * Should be called every time the video window changes size. 
                   */ 
                   readjustSeekBar : resetSeekBar 
                }; 
    
            })(); 
    

本頁內容