目錄
- 內容介紹
- 一、video 視頻
- 1、video 屬性
- 2、video 事件
- 2、video css控制按鈕
- 二、audio 音頻
- 1、audio 屬性
- 2、audio 事件
內容介紹
??H5 引入了audio和video標簽在頁面中嵌入音頻和視頻，不用再使用Flash等插件播放媒體檔案，下面了解一下audio和video的一些屬性和方法，
一、video 視頻
1、video 屬性
| 屬性說明 | 代碼 |
|---|---|
| 禁止下載 | controlslist=“nodownload” |
| 禁止全屏 | controlslist=“nodownload nofullscreen”（controlslist可多選） |
| 自動播放 | autoplay |
| 默認靜音 | muted |
| 回圈播放 | loop |
| 預加載 | preload |
| 貼圖 | poster=“poster.jpg” |
| 音量控制 | var video = document.getElementById('_volume');video.volume = 0;(取值范圍：0 到 1，0 是靜音，0.5 是一半的音量，1 是最大音量（默認值）) |
| 播放時間控制 | var vedio = document.getElementById('_time');vedio.currentTime=600視頻當前正在播放的時間（單位：s），進度條拖動顯示的時間值 |
| 播放地址切換 | var vedio = document.getElementById('_src');setTimeout(() => {vedio.src='http://vue.hyfarsight.com/webpack%E4%B8%80.mp4'}, 6000); |
2、video 事件
| 事件名 | 說明 |
|---|---|
| loadstart | 視頻查找，當瀏覽器開始加載資源時觸發 |
| durationonchange | 時長變化，當指定資源時長發生變化時觸發 => NAN變為實際時長；var vedio = document.getElementById('_time');console.log(vedio.duration);vedio.addEventListener('durationchange',function(e){console.log(vedio.duration); }) |
| loadedmetadata | 元資料加載，當指定資源的元資料已加載時觸發，元資料包括時長/尺寸/文本軌道等資訊值 |
| loadeddata | 視頻下載監聽，當當前幀的資料已加載，但沒有足夠的資料來播放指定資源的下一幀時觸發 |
| progress | 瀏覽器下載監聽，當瀏覽器正在下載指定資源時觸發 |
| canplay | 瀏覽器下載監聽，當瀏覽器正在下載指定資源時觸發 |
| canplaythrough | 可流暢播放，當瀏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定資源時觸發 |
| play | 播放監聽 |
| pause | 暫停監聽 |
| seeking | 查找開始，當用戶開始移動、跳躍到資源中新的位置時觸發 |
| seeked | 查找結束，當用戶已經移動、跳躍到視頻中新的位置時觸發 |
| waiting | 視頻加載等待，當視頻由于需要緩沖下一幀而停止，等待時觸發 |
| playing | 當視頻在已經因緩沖而暫停或停止后已就緒時觸發 |
| timeUpdate | 目前的播放位置已更改時，播放時間更新 |
| ended | 播放結束 |
| error | 播放錯誤 |
| volumechange | 音量改變時 |
| stalled | 當瀏覽器嘗試獲取媒體資料，但資料不可用時 |
| ratechange | 當視頻的播放速度已更改時 |
2、video css控制按鈕
/* 全屏按鈕 */
video::-webkit-media-controls-fullscreen-button {
display: none;
}
/* 播放按鈕 */
video::-webkit-media-controls-play-button {
display: none;
}
/* 進度條 */
video::-webkit-media-controls-timeline {
display: none;
}
/* 觀看的當前時間 */
video::-webkit-media-controls-current-time-display {
display: none;
}
/* 剩余時間 */
video::-webkit-media-controls-time-remaining-display {
display: none;
}
/* 音量按鈕 */
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
/* 音量的控制條 */
video::-webkit-media-controls-volume-slider {
display: none;
}
/* 所有控制元件 */
video::-webkit-media-controls-enclosure {
display: none;
}
二、audio 音頻
1、audio 屬性
| 屬性 | 說明 |
|---|---|
| src | 播放資源的url地址 |
| preload | 預加載 |
| loop | 回圈播放-當前播放結束后重新播放 |
| controls | 是否顯示控制元件 |
| autoplay | 自動播放 |
| duration | 媒體總時長，無法獲取時回傳NAN |
| paused | 媒體被暫停，回傳true，否則回傳false |
| ended | 媒體檔案播放完畢 |
| muted | 用來獲取是否為靜音狀態，值為bool |
| volume | 控制音量大小，0–1 |
| startTime | 回傳起始的播放時間 |
| error | 回傳錯誤代碼 |
| currentTime | 用來獲取或者控制當前的播放時間，單位為秒（s） |
| currentSrc | 以字串形式回傳正在播放或者已經加載的檔案 |
2、audio 事件
| 事件名 | 說明 |
|---|---|
| load() | 加載資源 |
| play() | 播放 |
| pause() | 暫停播放 |
| canPlayType() | 測驗是否支持特定型別檔案 |
| loadstart | 客戶端開始請求資料 |
| progress | 客戶端正在請求資料，緩沖 |
| play | 播放 |
| pause | 暫停 |
| ended | 結束 |
| timeupdate | 當前播放時間發生改變的時候 |
| canplaythrough | 資源已經載入完成 |
| canplay | 緩沖至目前的可播放狀態 |
標簽：JavaScript，HTML5，video，audio，media
更多演示案例，查看 案例演示
歡迎評論留言!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/277145.html
標籤：其他
上一篇：零基礎入門語音識別之賽題介紹