使用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;

本頁內容