前端學習(七十七) DOM-多媒體應用(Dom)
Video:載入視訊
audio:載入音訊
object,embed:載入flash等(隨著h5的普及,flash已經開始逐漸退出舞臺了)
iframe:載入資源
video
基本用法
<video src="" controls>您的瀏覽器不支援內嵌視訊</video>
屬性 | 型別 | 描述 |
controls | - | 是否顯示控制元件,比如播放按鈕 |
autoplay | boolean | 是否自動播放 |
preload | none|metadata|audo | 是否預載入 |
loop | boolean | 是否自動迴圈播放 |
muted | boolean | 是否靜音 |
poster | URL | 使用者點選播放按鈕前顯示的影象 |
src | url | 媒體檔案的URL |
width | pixels | 播放器的寬度 |
height | pixels | 播放器的高度 |
poster
設定poster之後,當用戶開啟頁面,到未播放視訊時,瀏覽器介面顯示的圖片
不同的環境配置不同的媒體資源
目前原生的H5支援多媒體格式主要有mp4,ogg,webm,m3u8,不同的媒體編碼格式存在專利和產權的問題,所以不同瀏覽器對媒體的格式支援也不同,具體檢視MDN
因此,在video標籤內巢狀多個source標籤達成不同的相容環境
<video controls> <source src="" type="video/mp4"> <source src="" type="video/webm"> 您的瀏覽器不支援內嵌視訊 </video>
常用方法
canPlayType:檢測瀏覽器是否能播放不同型別的視訊
返回值:
Probably:瀏覽器最可能支援
maybe:瀏覽器可能支援
空字串:瀏覽器不支援
paly:開始播放
pause:暫停播放
let video=document.getElementBy('aa');
video.play();
video.pause();
常用事件
除了支援click,mouseover等常用事件外,還有一些專屬的事件
事件名稱 | 事件描述 |
canplay | 在媒體資料已經有足夠的資料可播放時觸發 |
pause | 播放暫停時觸發 |
play | 暫停後再次開始播放時觸發 |
seeked | 在跳躍操作完成時觸發 |
volumechange | 在音量改變時觸發 |
ended | 播放結束時觸發 |
..... |
示例,在載入到能播放時播放
let a=document.getElementById('aa');
a.addEventListener('canplay',function(){
a.play()
})
常用屬性
currentTime:當前播放到的時間
currentSrc:當前視訊地址
controls:是否展示控制元件
duration:視訊長度
played:已經播放過時間範圍區間
audio
基本用法
<audio src="" controls>您的瀏覽器不支援內嵌音訊</audio >
也可以通過內嵌source來支援不同瀏覽器播放不同格式的音訊
屬性 | 型別 | 描述 |
controls | - | 是否顯示控制元件,比如播放按鈕 |
autoplay | boolean | 是否自動播放 |
preload | none|metadata|audo | 是否預載入 |
loop | boolean | 是否自動迴圈播放 |
muted | boolean | 是否靜音 |
poster | URL | 使用者點選播放按鈕前顯示的影象 |
src | url | 媒體檔案的URL |
常用方法
canPlayType:檢測瀏覽器是否能播放不同型別的音訊
返回值:
Probably:瀏覽器最可能支援
maybe:瀏覽器可能支援
空字串:瀏覽器不支援
paly:開始播放
pause:暫停播放
常用事件
除了支援click,mouseover等常用事件外,還有一些專屬的事件
事件名稱 | 事件描述 |
canplay | 在媒體資料已經有足夠的資料可播放時觸發 |
pause | 播放暫停時觸發 |
play | 暫停後再次開始播放時觸發 |
seeked | 在跳躍操作完成時觸發 |
volumechange | 在音量改變時觸發 |
ended | 播放結束時觸發 |
..... |
常用屬性
currentTime:當前播放到的時間
currentSrc:當前視訊地址
controls:是否展示控制元件
duration:音訊長度
played:已經播放過時間範圍區間
<input id="input" type="file" accept=".mp3,.ogg">
<audio controls id="aa">
您的瀏覽器不支援內嵌視訊
</audio>
<script>
let input=document.getElementById('input');
let audio=document.getElementById('aa');
let lastSrc='';
input.addEventListener('change',function (event) {
let file= event.target.files[0];
if(file){
if(lastSrc){
URL.revokeObjectURL(lastSrc);
}
let src=URL.createObjectURL(file);
lastSrc = src;
audio.setAttribute('src',src);
audio.play();
}
});
</script>
createObjectURL(),該方法接受一個File物件或者Blob物件,建立一個指向該引數物件的URL
revokeObjectURL(),通過createObjectURL()建立的URL會一直儲存在瀏覽器上,為了減少瀏覽器的記憶體使用,我們需要釋放一個通過URL.createObjectURL()建立的物件URL,這邊也就是賦值的lastSrc,通過釋放這個URL減少,記憶體的使用