使用TVSDK建立基本播放器

請完成下列步驟,以使用瀏覽器TVSDK建立基本播放器。

  1. 建立新目錄,您可在其中下載瀏覽器TVSDK的壓縮檔案。

  2. 從Zendesk下載瀏覽器TVSDK、解壓縮檔案,並將frameworks檔案夾放入新目錄。

  3. 為程式碼建立內含div的簡單HTML樣式板。

  4. 將此樣式板置於您在步驟1中建立的目錄中的HTML檔案中。

    <!DOCTYPE html> 
    
    <html lang="en"> 
    <head> 
    </head> 
    <body> 
          <div id="videoDiv" width="200" height="200"> 
         <div id="video-controls"></div> 
          </div> 
    </body> 
    </html>
    
  5. 在標題區段中新增瀏覽器TVSDK程式庫。

    <script src= "frameworks/player/dash.min.js"></script> 
    <script src= "frameworks/player/primetimemain.min.js"></script> 
    <script src= "frameworks/player/swfobject.js"></script> 
    <script src= "frameworks/player/primetimeei.min.js"></script>
    
  6. 對於body標籤,添加onLoad部分。

    <body onload="startVideo()">
    
  7. 開始實作startVideo函式。

  8. 新增指令碼標籤並在標籤中建立startVideo函式。

    這應該在頁面的標題區段中。

    <script> 
     function startVideo(){ 
     } 
    </script>
    
  9. 建立Adobe.MediaPlayer

    var player = new AdobePSDK.MediaPlayer();
    
  10. 建立MediaPlayerView

    秘訣

    這是您先前建立的div使用的位置。

    var view = new AdobePSDK.MediaPlayerView( 
    document.getElementById("videoDiv")); 
    player.view = view;
    
  11. 新增播放器事件接聽程式。

    player.addEventListener(AdobePSDK.PSDKEventType.STATUS_CHANGED, onStatusChange);
    
  12. 實作事件處理常式,並將它放在新增事件接聽程式之前。

    var onStatusChange = function (event) { 
     console.log(event.status); 
    
     switch (event.status) { 
      case AdobePSDK.MediaPlayerStatus.IDLE: 
       console.log("Player Status: IDLE"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.INITIALIZING: 
       console.log("Player Status: INITIALIZING"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.INITIALIZED: 
       console.log("Player Status: INITIALIZED"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.PREPARING: 
       console.log("Player Status: PREPARING"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.PREPARED: 
       console.log("Player Status: PREPARED"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.PLAYING: 
       console.log("Player Status: PLAYING"); 
       //update UI play/pause to show pause icon 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.PAUSED: 
       console.log("Player Status: PAUSED"); 
       //update UI play/pause to show play icon & 
       //display pause icon over video 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.SEEKING: 
       console.log("Player Status: SEEKING"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.COMPLETE: 
       console.log("Player Status: COMPLETE"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.RELEASED: 
       console.log("Player Status: RELEASED"); 
       break; 
    
      case AdobePSDK.MediaPlayerStatus.RELEASED: 
       console.log("Player Status: ERROR"); 
       break; 
     } 
    }; 
    
  13. 建立MediaResource,以傳遞M3U8連結(或mpd)。

    var resourceUrl = "https://example.com/a/yourUrl.m3u8"; 
    var resourceType = AdobePSDK.MediaResourceType.HLS; 
    var mediaResource = new AdobePSDK.MediaResource(resourceUrl, resourceType, null, false);
    
  14. 建立空配置並替換資源。

    var config = new AdobePSDK.MediaPlayerItemConfig(); 
    
    player.replaceCurrentResource(mediaResource, config);
    
  15. 當播放器處於「已初始化」狀態時,請呼叫prepareToPlay

    case INITIALIZED: 
     player.prepareToPlay(); // <- add this line 
     break;
    
  16. 播放器處於PREPARED狀態後,請呼叫play

    case PREPARED: 
     player.play(); 
     break;
    

本頁內容