HTML Video/Audio DOM 網頁上播放影片

應用於網頁上播放影片的介面控制。將影片 Video DOM 插入網頁及用來網頁上播放影片或影音串流。從 HTML5 新增的 <video> 標籤後,可以在網頁上直接播放影片格式更容易,且當前常用的瀏覽器上都可以正常播放,反而需要設置伺服器的 .mp4, .vtt MIME 類型約定例如需要在 IIS 或者 ApachePlesk 服務器系統管理中新增配置才可讀取其檔案屬性。

影片檔案上傳至合適播放的伺服器

例如 YouTube、Vimeo 等,獲取影片的嵌入碼、可以讓將影片嵌入到網頁上。還可以在影片播放器上加入額外的功能,例如調整音量、設置字幕等,以便根據喜好自訂影片播放器。

應用於網頁上直接播放影片的 Video 影片或是 Audio 物件模型 (Document Object Model) 介面時,需要考量網站流量的因素例如媒體檔案的大小和格式,建議選擇合適的檔案大小和格式,過大或不支援的檔案可能會導致加載速度慢或無法播放的問題、預加載和緩衝可以提高媒體播放的流暢度,但也會消耗更多的流量和資源。


MP4 格式可以儲存視訊、音訊等資訊。採用 M4V 基於 MPEG-4 標準的影片格式包含 FairPlay DRM 通常在 iTunes Store 視訊格式、防止未經授權的複製和分發影片內容保護版權所有者的權益,確保影片的內容不被非法傳播。而當前播放器通常能夠支持這兩種格式,但在 M4V 文件時可能需要考慮到 Apple 公司特定限制。雖然檔案比較小亦需要網站空問的屬性支持。

開放的 M4V 影片格式標準 FairPlay DRM 多重工作流程是 Apple 公司 AES-128 CBC 加密保護影片媒體內容的版權而採取的措施,防止未經授權的複製、傳播和非法使用數字媒體內容、某些方面限制用戶的自由、但也確保版權所有者的受保護的內容。例如影片授權服務核准要求,就會發出授權以傳送給用戶端,並將它用來解密和播放所指定內容。


Method 方法 / Properties 屬性 / Event 事件


Video/Audio Methods 方法

控制 Video/Audio 播放、暫停,附加出現的影片字幕軌道。

Method 方法Description 描述
load()加載重新加載媒體元素
play()播放開始播放媒體
pause()暫停暫停正在播放的媒體
canPlayType()可以播放類型檢查瀏覽器是否可以播放指定的媒體類型
addTextTrack()添加字幕軌道向媒體添加新的 Text Track 字幕軌道



Video/Audio Properties 屬性

通過 JavaScript 來完成媒體播放控制及讀取影片當前資訊。

Property 屬性Description 描述
audioTracks音頻曲目返回表示可用音軌的 AudioTrackList 對象
autoplay自動播放設置或返回媒體,是否應在加載後立即開始播放 {vid.autoplay = true;}
buffered緩衝返回表示媒體的緩衝部分的 TimeRanges 對象
controller控制器返回表示媒體當前媒體控制器的 MediaController 對象
controls控件設置或返回媒體是否應顯示控件(如播放/暫停等)
crossOrigin跨越原點設置或返回媒體的 CORS 設置
currentSrc當前來源返回當前媒體的 URL
currentTime當前時間設置或返回媒體中的當前播放位置(以秒 Seconds 為單位)
defaultMuted默認靜音設置或返回媒體是否應默認靜音 {vid.defaultMuted = true}
defaultPlaybackRate默認播放速率設置或返回媒體播放的默認速度 {vid.defaultPlaybackRate = 0.5}
duration持續時間返回當前媒體的長度(以秒為單位)
ended結束返回媒體的播放是否已結束
loop循環設置或返回完成後媒體是否循環新開始 {vid.loop = true}
mediaGroup媒體集團設置或返回媒體所屬的組(用於鏈接多個媒體元素)
muted靜音設置或返回媒體是否靜音 {video.muted = (video.muted) ? !1 : !0;}
networkState網絡狀態返回媒體的當前 Network State 網絡狀態
paused暫停返回媒體是否暫停
playbackRate回放速率設置或返回媒體播放的速度
played已經播放返回表示媒體播放部分的 TimeRanges 對象
preload預加載設置或返回頁面加載時是否應加載媒體
readyState準備狀態返回媒體的當前就緒狀態
seekable可搜索返回表示媒體的可搜索部分的 TimeRanges 對象
seeking尋求返回用戶當前是否在媒體中尋找
src來源設置或返回媒體元素的當前 Source/src 來源
startDate開始時間日期返回表示當前時間偏移量的 Date 時間日期對象
textTracks文字追踪返回表示可用文本軌道的 TextTrackList 對象 {vid.textTracks.length}
videoTracks影片軌道返回表示可用影片軌道的 VideoTrackList 對象
volume音量設置或返回媒體的音量



Video/Audio Events 事件

Event 事件Description 描述
abort中止媒體加載中止時觸發
canplay可以播放當瀏覽器開始播放媒體時觸發
canplaythrough可以通過播放當瀏覽器可以在不停止緩衝的情況下播放媒體時觸發
durationchange時間變化媒體持續時間改變時觸發
emptied清空當前播放列表為空時觸發
ended播放結束當前播放列表結束時觸發
error錯誤返回表示媒體錯誤狀態的 MediaError 對象 {vid.error.code}
loadeddata加載數據當瀏覽器加載媒體的當前幀時觸發
loadedmetadata加載元數據當瀏覽器加載媒體的元數據時觸發
loadstart加載啟動瀏覽器開始查找媒體時觸發
pause暫停媒體暫停時觸發
play播放媒體啟動或不再暫停時觸發
playing播放在暫停或停止 Buffering 緩衝後播放媒體時觸發
progress進展當瀏覽器正在下載媒體時觸發
ratechange變化率當媒體的播放速度改變時觸發
seeked尋找當用戶完成 Moving/Skipping 移動影片中的新位置時觸發
seeking尋求當用戶開始移動/跳到媒體中的新位置時觸發
stalled停滯瀏覽器嘗試獲取媒體數據時觸發,但數據不可用
suspend中止/暫停當瀏覽器有意不獲取媒體數據時觸發
timeupdate時間更新當前媒體播放位置發生變化時觸發
volumechange音量變化媒體音量改變時觸發
waiting等待影片停止時觸發,因為它需要緩衝下一幀


TimeRanges

返回無符號長整數的數字,所代影片的時間範圍由影片時間範圍對象。

TimeRanges.length
var vid = document.GetElementById("video");
var buf = vid.buffered;
var numRanges = buf.length;
if (buf.length == 1) {
  // 只有一個範圍
  if (buf.start(0) == 0 && buf.end(0) == vid.duration) {
    // 一個範圍從開始和結束開始,在影片結束時,整個事情都會被加載。
  }
}

可以使用元素的屬性 seekable 來決定媒體目前能查找的範圍。它返回一個 TimeRanges 時間對象。

mediaElement.seekable.start(); // 返回開始時間
mediaElement.seekable.end(); // 返回結束時間


MediaError 錯誤處理程序、輸出錯誤消息

創建 <video> 元素,為其創建錯誤處理程序,將該元素的 src 屬性設置為要顯示在該元素中的影片資源。

var vid = document.createElement("video");
vid.onerror = function() {console.log("Error with media: " + vid.error.code);}
vid.src="http://www.eion.com.tw/3D-ANIMATION.html";

例如在 iOS 系統下媒體格式不正確則出現 error.code = 4

  • 1 MEDIA_ERR_ABORTED 相關資源的獲取被用戶請求中止。
  • 2 MEDIA_ERR_NETWORK 發生了某種網絡錯誤,導致媒體無法成功獲取,儘管之前已經可用。
  • 3 MEDIA_ERR_DECODE 儘管以前被確定為可用,但嘗試解碼媒體資源時發生錯誤,導致錯誤。
  • 4 MEDIA_ERR_SRC_NOT_SUPPORTED 關聯的資源或媒體提供程序對象(如 MediaStream)已被發現不適合。