媒體:查看及偵錯媒體播放器資訊

使用 Chrome 開發人員工具中的「Media」面板,查看資訊並為每個瀏覽器分頁的媒體播放器偵錯。

總覽

Media 面板是開發人員工具中用來檢查網頁媒體播放器的主要位置。音訊和視訊來源會列在「媒體」面板的「播放器」下方的左側部分,右側部分則會顯示各種屬性和詳細資料。

您可以透過「媒體」面板執行下列操作:

開啟「媒體」面板

如要開啟「媒體」面板,請按照下列步驟操作:

  1. 開啟開發人員工具
  2. 依序點選「更多選項」 >「更多工具」 >「媒體」,開啟「媒體」面板。

媒體面板。

查看媒體播放器資訊

如要查看媒體播放器資訊,請按照下列步驟操作:

  1. 前往含有媒體播放器的網頁,例如 https://youtu.be/e1gAyQuIFQo
  2. 您現在可以在「Players」選單下方看到媒體播放器。
  3. 按一下播放器。「Properties」分頁會顯示媒體播放器的屬性。 媒體面板屬性。
  4. 按一下「事件」分頁標籤,即可查看所有媒體播放器事件。 媒體面板事件。
  5. 按一下「Messages」分頁標籤,即可查看媒體播放器訊息記錄檔。您可以依記錄層級或字串篩選訊息。 媒體面板訊息。
  6. 您可以透過「時間軸」分頁,即時查看媒體播放和緩衝狀態。 媒體面板時間軸。

遠端偵錯

你可以透過 Windows、Mac 或 Linux 電腦查看 Android 裝置上的媒體播放器資訊。

  1. 請按照這些步驟設定遠端偵錯功能。
  2. 你現在可以遠端查看媒體播放器資訊。

遠端偵錯範例。

隱藏及顯示媒體播放器

有時網頁上可能會有多個媒體播放器,或是您可能會使用同一個瀏覽器分頁瀏覽不同網頁,而每個網頁都有媒體播放器。

您可以選擇顯示或隱藏每個媒體播放器,方便進行偵錯。

  1. 使用同一個瀏覽器分頁瀏覽多個不同的影片頁面。
  2. 對其中一個媒體播放器按一下滑鼠右鍵。您可以選取「隱藏播放器」隱藏所選播放器,也可以選取「隱藏所有其他播放器」隱藏所有其他播放器。

隱藏媒體播放器

匯出媒體播放器資訊

  1. 對其中一個媒體播放器按一下滑鼠右鍵。
  2. 選取「儲存播放器資訊」,即可將播放器資訊下載為 JSON。

匯出媒體資訊