video標簽是HTML5新增的用于定義視頻的標簽
在標簽之間放置文本內容,這樣老的瀏覽器就在訪問時就會顯示文本內容。
<video scr=data/test.mp4"">您的瀏覽器版本過低不能訪問,請升級</video>
支持格式
mp4、webm、ogv
- safari瀏覽器和IE9以上瀏覽器只支持mp4
- IE8以下不支持
- IE9以上瀏覽器可以使用source標簽支持解決兼容性
<video src="data/test.webm">
<source src="data/test.ogv">
<source src="data/test.mp4">
您的瀏覽器版本過低不能訪問,請升級
</video>
如果播放失敗會繼續下一個,全都不行則提示文本
- WebM由Google提出,是一個開放、免費的媒體文件格式。WebM 影片格式其實是以 Matroska(即 MKV)容器格式為基礎開發的新容器格式,里面包括了VP8影片軌和 Ogg Vorbis 音軌,其中Google將其擁有的VP8視頻編碼技術以類似BSD授權開源,Ogg Vorbis 本來就是開放格式。
關于webm格式詳細 - Ogg是一個自由且開放標準的容器格式,由Xiph Org 基金會所維護。Ogg格式并不受到軟體專利的限制,并設計用於有效率地串流媒體和處理高品質的數位多媒體。
「Ogg」意指一種檔案格式,可以納入各式各樣自由和開放原始碼的編解碼器,包含音效、視訊、文字(像字幕)與後設資料的處理。
關于ogv格式詳細
屬性
width寬度/height高度
<video controls src="data/test.mp4" width="400"></video>
<video controls src="data/test.mp4" height="400"></video>
- 單獨設定width、hight可以直接改變播放器的寬度、高度,如果同事設定,播放器會拉伸,但是內容一個拉伸,始終在最中心
autoplay自動播放
<video controls src="data/test.mp4" autoplay></video>
- 在谷歌下會有個小bug,還是要點,但是如果有muted屬性就可以自動播放了
loop循環播放
<video controls src="data/test.mp4" loop></video>
poster視頻未播放時顯示的圖片
<video controls src="data/test.mp4" poster="data/test.jpg"></video>
muted視頻輸出時默認被靜音
<video controls src="data/test.mp4" muted></video>
其他
谷歌瀏覽器雖然不支持直接自動播放,但是支持7秒內視頻寬高比較小的視頻自動播放
<video> 標簽支持 HTML 5 中的全局屬性。
<video> 標簽支持 HTML 5 中的事件屬性。
video API 事件
play()/pause()
var myVideo=document.getElementById("video1");
function playVid()
{
myVideo.play();
}
function pauseVid()
{
myVideo.pause();
}
使video標簽播放,但是在谷歌瀏覽器下不允許自動播放
duration
返回當前視頻的長度,以秒計
var myVideo = document.getElementById('myVideo');
var min =parseInt(myVideo.duration/60);
var sec =parseInt(myVideo.duration%60);
以上代碼可以將視頻長度轉化為分秒
currentTime
能返回當前視頻的一個播放長度,并且可以設定值
myVideo.currentTime = 30;//從30s的地方開始播放
test.onclick = function(){
myVideo.currentTime = myVideo.currentTime += 3;
//給test按鈕綁定事件,按一次就快進3秒
}
src
設置/返回當前視頻路徑
myVideo.src = 'data/test.mp4';
volume
設置/返回當前音量,0-1相當于0~100%
myVideo.volume = 1;
小案例:聲音控制條
先在body里定義一個range類型的input作為拖動控件
<input type="range" min="0" max="100" value="50" id="range">
然后在script里面綁定事件
range.oninput = function(){
myVideo.volume = this.value/100;//value值可以在mix和max上修改
}
control
是否顯示控制控件(播放暫停音量等)
myVideo.control = true;
- 設置后video會自動添加control屬性
muted
手動設置靜音
myVideo.muted = true;
- 設置后video標簽上不會自動添加muted屬性
networkState
返回視頻的當前網絡狀態(state)
返回的網絡狀態(state)碼:
0:未初始化
1:視頻資源已獲取,但是未使用
2:瀏覽器正則下載資源
3:未找到資源(有可能在加載)
- 視頻并不是瞬間加載的,加載時網絡狀態是3(找不到)延時幾秒后獲取會變成1(已找到資源)
currentSrc
返回當前音頻的URL,無法改變URL只能返回URL
myVideo.currentSrc = 'data/test.mp4';
- 與src不同的是,只能返回可以讀取的資源路徑,例如視頻還沒加載出來的時候返回空
ended
可以返回視頻是否播放結束的結果,如果播放結束返回true,沒有則false,可以進行事件監聽
小案例:監聽ended事件
myVideo.addEventListener('ended',function(){ //監聽ended事件
console.log('視頻播放結束了')
myVideo.play();//重新播放
})
loop
設置或返回視頻是否在結束時重新播放,默認是false,如果在script中設置了loop為true,那么會自動添加loop在video標簽屬性中
小案例:循環開關
test.onclick = function () {
if (myVideo.loop = false){//因為默認是false
this.innerHTML = '循環';
myVideo.loop = true;
}else {
this.innerHTML = '不循環';
myVideo.loop = false;
}
playbackRate
設置或返回視頻的播放速度,默認是1,小于1則是慢速
myVideo.playbackRate = '2';//兩倍速播放
readyState
屬性返回擋墻的就緒狀態
返回參數:
0: 沒有關于視頻就緒的信息
1:有數據,快不夠播放了
2:當前有數據可以用,但是下一幀沒有了
3:數據正在緩沖,當前和至少下一幀可以用了
4:可用數據足以開始播放了
timeupdate
當目前的播放位置更改時,可用監聽到視頻目前播放的狀態
小案例:timeupdate+duration+currentTime制作簡易播放狀態欄
myVideo.addEventListener('timeupdate',function () {
let allTime = parseInt(myVideo.duration/60)+':'+parseInt(myVideo.duration%60);
let nowTime = parseInt(myVideo.currentTime/60)+':'+parseInt(myVideo.currentTime%60);
timeNode.innerHTML = nowTime+ '/' +allTime //輸出當前時間、總時間;
})
seeked
當用戶對視頻的進度條并且已經完成操作時會觸發的事件,使用時必須用on
如:
myVideo.onseeked = function () {}
seeking
當用戶開始移動/跳躍視頻中的新位置的時候,使用時必須用on
myVideo.onseeked = function () {}
- seeking的頻率比seeked高
小案例:比較seeked和seeking觸發頻率
在body定義兩個span標簽
<div>
<span id="testSeeked">seeked</span>
<span id="testSeeking">seeking</span>
</div>
在script中比較seeked和seeking觸發頻率
var seekedNum = seekingNum = 0;
myVideo.onseeked = function () {
seekedNum ++;
testSeeked.innerHTML = seekedNum;
}
myVideo.onseeking = function () {
testSeeking.innerHTML = seekingNum;
}
volumechange
音量已更改時,使用時必須用on
myVideo.onvolumechange = function () { }
通用API:requestFullscreen
全屏顯示,但是必須在用戶事件上調用
小案例:兼容谷歌和火狐的全品顯示
test.onclick = function () {
if (myVideo.webkitRequestFullscreen) {
myVideo.webkitRequestFullscreen();
}else if (myVideo.mozRequestFullscreen) {
myVideo.mozRequestFullScreen();
}
}
- 注意火狐的mozRequestFullScreen是大寫S,谷歌的是小寫
load
強制重新加載視頻資源
test.onclick = function () {myVideo.load();}
- 一般在更新視頻url后重新加載
canplay
視頻已經準備好開始播放,可以用于事件監聽
test.onclick = function () {myVideo.load();}
myVideo.addEventListener('canplay',function () {
console.log('可以開始播放了')
})
音頻audio
音頻audio的屬性與api與視頻的video的很多都差不多,但是有一些區別
- audio 定義音頻 格式:mp3 wav ogg
mp3所有瀏覽器兼容
ogg 只safari不支持
屬性:
src音頻的資源地址
controls 播放控件
autoplay 自動播放
loop 循環播放
muted 靜音
- wav 都支持
js 能幫助生成audio對象 new Audio(); 等同于HTML上面寫上audio標簽
chrom和Opera都不能直接播放 需要頁面上元素交互
API:
play 音頻播放
pause 音頻暫停
duration 返回當前音頻長度
currentTime 設置或返回當前音頻的長度
src 設置/返回當前音頻的來源
volume 設置/返回當前的音頻音量
control 設置音頻是否顯示控件
muted 設置靜音
networkState 返回音頻的當前網絡狀態
currentSrc 返回當前音視頻的URL
ended 返回音視頻的播放位置是否已經結束
loop 設置是否循環播放
playbackRate 設置或返回音視頻的播放速度
readyState 屬性返回音頻當前的就緒狀態
timeupdate 當目前的音放位置已更改時
seeked 當用戶已移動/跳躍到視頻中的新位置時
seeking 當用戶開始移動/跳躍到視頻中的新位置時
volumechange 當音量已更改時
requestFullscreen 全屏
load 重新加載音頻資源
canplay 音頻已經準備好開始播放
autoplay chrom和Opera不會自動播放
muted 靜音 loop循環播放
width/height屬性不起作用 需要css樣式中進行設置currentSrc只能獲取,不能設置
seeked seeking 在audio中觸發頻率相同
timeupdate 播放時觸發的事件
volumechange 當音量改變的時候觸發
requestFullscreen 全屏 必須使用audio標簽 js生成的audio對象不支持
load 重新加載的函數 重新給個src也會重新加載
canplay 準備好的時候出發的事件