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