ApsaraVideo VOD：Web播放器常見問題

License相關問題

License無效、到期等問題請參見License相關常見問題。

各端播放器共性問題

• 各端都有可能出現的問題，匯總在各端播放器公用常見問題。

• 如果您有一定的開發經驗，也可進行播放異常自主排查。

開發問題

H5播放器如何切換vid和playauth？

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

如何調整H5播放器播放按鈕的大小和位置？

• 調整播放按鈕的大小，重寫CSS，比如減小一倍。樣本如下：

   .prism-player .prism-big-play-btn {
      width: 45px;
      height: 45px;
      background-size: 128px 256px;
  }

• 調整播放按鈕的位置，通過設定skinLayout裡bigPlayButton的x,y屬性。樣本如下：

  skinLayout: [
    { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
    {
      name: "H5Loading",
      align: "cc",
    },
    {
      name: "controlBar",
      align: "blabs",
      x: 0,
      y: 0,
      children: [
        { name: "progress", align: "tlabs", x: 0, y: 0 },
        { name: "playButton", align: "tl", x: 15, y: 26 },
        { name: "timeDisplay", align: "tl", x: 10, y: 24 },
        { name: "fullScreenButton", align: "tr", x: 20, y: 25 },
        { name: "volume", align: "tr", x: 20, y: 25 },
      ],
    },
  ]

調用seek方法後，播放器如何?暫停按鈕？

按鈕狀態取決於播放器原來的狀態，想要實現暫停按鈕，可以在seek後再調用player.pause()方法。

H5播放器如何初始播放位置？

通過 watchStartTime 參數可以指定初始播放位置，樣本如下：

new Aliplayer({
  watchStartTime: 60, // 從第 60 秒開始播放
})

詳情請參見Aliplayer API說明。

如何設定自動播放時的自動全屏？

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//example.aliyundoc.com/video/media02.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    qualitySort: "asc",
    mediaType: "video",
    preload: true,
    isLive: false,
  },
  function (player) {
    player.mute();
    console.log("The player is created");
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

如何禁用進度條？

可以使用 disableSeek: true 參數來禁止拖動進度條，請參見禁止拖動進度條。

如何定時擷取播放時間？

通過定時器每秒調用播放器的getCurrentTime方法擷取播放時間，在暫停、出錯和結束播放時清除定時器。

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 1000);

//清除定時器
function clear() {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}
player.on("ended", function (e) {
  clear();
});
player.on("pause", function (e) {
  clear();
});
player.on("error", function (e) {
  clear();
});

播放問題與錯誤

經過H.265編碼的視頻無法播放

Web播放器SDK從2.14.0版本開始支援播放H.265編碼協議的視頻流，如需使用此功能，需要申請相應的License授權，並配置參數開啟H.265功能。具體操作，請參見播放H.265/H.266編碼協議視頻流。

H5播放器播放FLV、M3U8檔案時提示跨域錯誤

當使用Web播放器出現Access is denied for this document或提示Access-Control-Allow-Origin等相關報錯時，需要啟用播放網域名稱允許跨域訪問。詳細內容，請參見配置跨域訪問。

H5播放器無法橫屏

播放器SDK沒有橫屏的介面，iOS橫屏需要系統橫屏，Android全屏之後預設就是橫屏。

H5播放器播放FLV視頻時發起的請求未攜帶Referer

1. 播放器發起的請求首先遵循您網站設定的Referrer-Policy，請確保您網站的Referrer-Policy為允許視頻請求攜帶Referer。

2. 如果您網站的Referrer-Policy允許視頻請求攜帶Referer，但是實際請求視頻時沒有攜帶Referer（在開啟Referer ACL存取控制的時候可能會導致播放被禁止），則可以通過傳入播放器參數enableWorker: false來解決。

H5播放器播放視頻時視頻未填滿整個播放器，播放器有黑邊，如何處理？

使用H5播放器播放視頻時出現視頻未填滿整個播放器，播放器有黑邊的情況，如下圖所示。

此黑邊為播放器容器的背景色，可以通過給video標籤設定css屬性object-fit: cover;來解決該問題。

loadByUrl iOS和Android均無法使用

// seek會只能跳轉，無法播放
// play在iOS上只能從頭播放
// iOS上點全屏播放video會被iOS原生播放器劫持

document.querySelector(".no1").onclick = function () {
  player.loadByUrl("//player.alicdn.com/resource/player/qupai.mp4");
};

// 優先監聽play和canplay事件去seek，有些瀏覽器可能不生效，可以考慮使用在第一次timeupdate的時候去seek
player.on("canplay", function () {
  player.seek(20);
});
// iOS下全屏被劫持，沒有對應處理辦法

切換視訊源，但仍然播放上一條視頻

問題現象：2.9.11版本Web播放器SDK，在Windows10，360瀏覽器安全色模式下，loadByUrl功能異常，切換視訊源仍會播放上一條視頻。

問題原因：瀏覽器安全色問題。

解決方案：請使用2.9.19及以後版本的Web播放器SDK。

player.seek()方法在iOS下失效

// 優先在play事件和canplay事件調用seek，否則可能會不生效
player.on("canplay", function () {
  player.seek(20);
});

直播過程中暫停播放後，再次播放時如何趕上最新直播片段

問題描述

直播過程中如果將應用程式切換至後台，暫停播放後，返回應用再次播放時會從暫停時刻繼續播放，如何設定可以減少播放延遲，趕上最新的直播片段。

解決方案

再次播放時，會從您暫停時刻繼續播放，且不能通過參數設定加快播放速度。建議您重新拉流，重新調用播放器播放該直播流。

如何?在微信小程式中使用阿里雲Web播放器播放視頻？

阿里雲Web播放器不支援在微信小程式中運行，您需要使用小程式內建的Video組件去播放視頻。相關Demo請參見微信小程式。

直播跨域拉流失敗

如果本地跨域校正失敗，請首先檢查控制台中的網域名稱管理配置頁面。如果僅配置了自有網域名稱，則可能會導致 localhost 報錯；在預設情況下，如果客戶未進行配置，localhost 將會通過校正。

上傳到ApsaraVideo for VOD中的視頻，在其他端都能正常播放，但是在iOS端不能播放

可能原因：iOS端的Safari瀏覽器安全色性不夠，當視頻壓縮比例太高，或視頻的編碼層級為high時，都可能導致Safari瀏覽器無法解碼播放。

解決方案：建議對視頻進行轉碼處理後再播放，詳細操作請參見音視頻轉碼。

平台特定問題

如何移除WebView的預設封面？

問題現象：在部分安卓手機的WebView中，如果沒有為<video>標籤指定poster屬性，WebView會預設展示一個預設封面，如下圖所示：

解決方案：如果想要移除該預設封面，則可以通過下述方法為<video>標籤指定一個無效的poster屬性來覆蓋這個WebView的預設封面。樣本如下：

extraInfo: { poster: 'noposter' } // 播放器參數 extraInfo 的內容會透傳到 <video> 標籤上

啟用IE瀏覽器以最進階別的可用模式顯示內容

<meta http-equiv="x-ua-compatible" content="IE=edge" >

在微信裡如何自動播放？

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
  wx.config({
      // 配置資訊, 即使不正確也能使用 wx.ready
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
  });
  wx.ready(function() {
      var video=$(player.el()).find('video')[0];
      video.play();
  });
};
// 解決ios不自動播放的問題
autoPlay();
</script>