1. 程式人生 > >獲取頁面中視訊的載入進度,音/視訊載入過程

獲取頁面中視訊的載入進度,音/視訊載入過程

當音訊/視訊處於載入過程中時,會依次發生以下事件:

  • loadstart

    定義和用法

    當瀏覽器開始尋找指定的音訊/視訊時,會發生 loadstart 事件。即當載入過程開始時。

  • durationchange

    定義和用法

    當指定音訊/視訊的時長資料發生變化時,發生 durationchange 事件。

    當音訊/視訊載入後,時長將由 “NaN” 變為音訊/視訊的實際時長。

  • loadedmetadata

    定義和用法

    當指定的音訊/視訊的元資料已載入時,會發生 loadedmetadata 事件。

    音訊/視訊的元資料包括:時長、尺寸(僅視訊)以及文字軌道。

  • loadeddata

    定義和用法

    噹噹前幀的資料已載入,但沒有足夠的資料來播放指定音訊/視訊的下一幀時,會發生 loadeddata 事件。

  • progress

    定義和用法

    當瀏覽器正在下載指定的音訊/視訊時,會發生 progress 事件。

  • canplay

    定義和用法

    當瀏覽器能夠開始播放指定的音訊/視訊時,發生 canplay 事件。

  • canplaythrough

    定義和用法

    當瀏覽器預計能夠在不停下來進行緩衝的情況下持續播放指定的音訊/視訊時,會發生 canplaythrough 事件。

瀏覽器支援

所有主流瀏覽器都支援 loadstart 事件。

註釋:Internet Explorer 8 或更早的瀏覽器不支援該事件。

語法

這裡以canplaythrough為例,其他載入過程可以仿照下面提供的語法來使用;
在 HTML 中:

<audio|video oncanplaythrough="SomeJavaScriptCode">

在 JavaScript 中:

audio|video.oncanplaythrough=SomeJavaScriptCode;

使用 addEventListener():

audio|video.addEventListener("canplaythrough", function()
  {
  //SomeJavaScriptCode
} );