1.參數(shù) video是h5的新特性（雖然新了很多年了），使得枯燥的頁面有了很多生機(jī)。html代碼示例： 1 <video
2 id="kingdom-video"
3 src=""
4 preload
5 controls>
6 </video>
7 <video width="320" height="240" controls>
8 <source src="/example/video/movie.mp4" type="video/mp4">
9 <source src="/example/video/movie.ogg" type="video/ogg">
10 您的瀏覽器不支持Video標(biāo)簽。
11 </video> 可見，可以直接通過src指定播放媒體的網(wǎng)絡(luò)路徑，也可以使用source標(biāo)簽來進(jìn)行指定。 常用參數(shù)如下： //autoplay 則視頻在就緒后馬上播放。
//controls 用戶顯示控件，比如播放按鈕。
//width 頻播放器的寬度。
//height 設(shè)置視頻播放器的高度
//loop 文件完成播放后再次開始播放。
//preload 視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放
// src 要播放的視頻的 URL。2.操作 常用操作如下：var myVid=document.getElementById("video1"); //獲取video 元素
myVideo.play(); //播放視頻
myVideo.pause(); //暫停視頻
myVideo.width=560; //設(shè)置視頻寬度
myVideo.height=560; //設(shè)置視頻高度
全屏：
chrome document.getElementById('video1').webkitRequestFullScreen()
document.webkitCancelFullScreen();
Firefox document.getElementById('video1').mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提議 document.getElementById('video1').requestFullscreen();
document.exitFullscreen();
【css偽類】 :fullscreen – 當(dāng)前全屏化的元素
:fullscreen-ancestor – 所有全屏化元素的祖先元素 3.完整的常用操作、事件
1 var myVid=document.getElementById("video1");
2 //播放的速度
3 myVid.playbackRate = 1
4 myVid.onloadstart = function(){
5 console.log(`onloadstart 客戶端開始請求數(shù)據(jù) `);
6 }
7 myVid.ondurationchange=function(){
8 console.log(`durationchange 資源長度改變 `);
9 }
10 myVid.onratechange=function(){
11 console.log(`onratechange //播放速率改變 `);
12 }
13 myVid.onseeking=function(){
14 console.log(` //seeking 尋找中 點(diǎn)擊一個為（緩存）下載的區(qū)域`);
15 }
16 myVid.onseeked=function(){
17 console.log(` //seeked 尋找完畢 `);
18 }
19 myVid.onplay=function(){
20 console.log(`開始播放時(shí)觸發(fā) `);
21 }
22 myVid.onwaiting=function(){
23 console.log(`播放由于下一幀數(shù)據(jù)未獲取到導(dǎo)致播放停止，但是播放器沒有主動預(yù)期其停止，仍然在努力的獲取數(shù)據(jù)，簡單的說就是在等待下一幀視頻數(shù)據(jù)，暫時(shí)還無法播放。 `);
24 }
25 myVid.onplaying=function(){
26 console.log(`真正處于播放的狀態(tài)，這個時(shí)候我們才是真正的在觀看視頻。 `);
27 }
28 myVid.oncanplay=function(){
29 console.log(`視頻播放器已經(jīng)可以開始播放視頻了，但是只是預(yù)期可以正常播放，不保證之后的播放不會出現(xiàn)緩沖等待。 `);
30 }
31 myVid.onpause=function(){
32 console.log(`暫停播放時(shí)觸發(fā) `);
33 }
34 myVid.onended=function(){
35 alert(` //播放結(jié)束 loop 的情況下不會觸發(fā) `);
36 }
37 myVid.onvolumechange=function(){
38 console.log(`音量改變 `);
39 }
40 myVid.onloadedmetadata=function(){
41 console.log(`獲取視頻meta信息完畢，這個時(shí)候播放器已經(jīng)獲取到了視頻時(shí)長和視頻資源的文件大小。 `);
42 }
43 myVid.onloadeddata=function(){
44 console.log(`"視頻播放器第一次完成了當(dāng)前播放位置的視頻渲染。"`);
45 }
46
47 myVid.onabort=function(){
48 console.log(`客戶端主動終止下載（不是因?yàn)殄e誤引起）， `);
49 }
50
51 myVid.onerror=function(){
52 console.log(`請求數(shù)據(jù)時(shí)遇到錯誤`);
53 //1.用戶終止 2.網(wǎng)絡(luò)錯誤 3.解碼錯誤 4.URL無效
54 alert(myVid.error.code);
55 }
56
57 //客戶端請求數(shù)據(jù)
58 myVid.onprogress=function(){
59
60 console.log(`客戶端正在請求數(shù)據(jù) 觸發(fā)多次，是分段請求的`);
61 console.log(myVid.buffered);
62 //0.此元素未初始化 1.正常但沒有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒有找到資源
63 console.log(`networkState ${myVid.networkState}`);
64 // //當(dāng)前播放的位置，賦值可改變位置 myVid.currentTime = 11 從11秒位置開始播放
65 console.log(myVid.currentTime);
66 // //返回當(dāng)前資源的URL
67 console.log(myVid.currentSrc);
68
69 console.log(myVid.videoWidth);
70 //播放結(jié)束 返回true 或 false
71 console.log(myVid.ended);
72 //音量大小 為0-1 之間的值
73 console.log(myVid.volume);
74
75
76 //當(dāng)前資源長度
77 console.log(myVid.duration);
78 console.log(myVid.startDate)
79 // myVid.currentTime = 114.監(jiān)聽播放過程
1 //使用事件監(jiān)聽方式捕捉事件
2 video.addEventListener("timeupdate",function(){
3 var timeDisplay;
4 //用秒數(shù)來顯示當(dāng)前播放進(jìn)度--實(shí)測1秒3次
5 timeDisplay = Math.floor(video.currentTime);
6 console.log(Math.floor(video.currentTime))
7 //當(dāng)視頻播放到 4s的時(shí)候做處理
8 if(timeDisplay == 4){
9 //處理代碼
10 }
11 },false);5.擴(kuò)展（audio) 音頻有類似的屬性和事件 <audio> 標(biāo)簽屬性： src：音樂的URL preload：預(yù)加載 autoplay：自動播放 loop：循環(huán)播放 controls：瀏覽器自帶的控制
6.對象獲取//audio可以直接通過new創(chuàng)建對象
Media = new Audio("http://www./test.mp3");
//audio和video都可以通過標(biāo)簽獲取對象
Media = document.getElementById("media")7.media方法屬性總結(jié)Media方法和屬性：HTMLVideoElement 和 HTMLAudioElement 均繼承自 HTMLMediaElement 1 //錯誤狀態(tài)
2 Media.error; //null:正常
3 Media.error.code; //1.用戶終止 2.網(wǎng)絡(luò)錯誤 3.解碼錯誤 4.URL無效
4
5 //網(wǎng)絡(luò)狀態(tài)
6 Media.currentSrc; //返回當(dāng)前資源的URL
7 Media.src = value; //返回或設(shè)置當(dāng)前資源的URL
8 Media.canPlayType(type); //是否能播放某種格式的資源
9 Media.networkState; //0.此元素未初始化 1.正常但沒有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒有找到資源
10 Media.load(); //重新加載src指定的資源
11 Media.buffered; //返回已緩沖區(qū)域，TimeRanges
12 Media.preload; //none:不預(yù)載 metadata:預(yù)載資源信息 auto:
13
14 //準(zhǔn)備狀態(tài)
15 Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
16 Media.seeking; //是否正在seeking
17
18 //回放狀態(tài)
19 Media.currentTime = value; //當(dāng)前播放的位置，賦值可改變位置
20 Media.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0
21 Media.duration; //當(dāng)前資源長度 流返回?zé)o限
22 Media.paused; //是否暫停
23 Media.defaultPlaybackRate = value;//默認(rèn)的回放速度，可以設(shè)置
24 Media.playbackRate = value;//當(dāng)前播放速度，設(shè)置后馬上改變
25 Media.played; //返回已經(jīng)播放的區(qū)域，TimeRanges，關(guān)于此對象見下文
26 Media.seekable; //返回可以seek的區(qū)域 TimeRanges
27 Media.ended; //是否結(jié)束
28 Media.autoPlay; //是否自動播放
29 Media.loop; //是否循環(huán)播放
30 Media.play(); //播放
31 Media.pause(); //暫停
32
33 //控制
34 Media.controls;//是否有默認(rèn)控制條
35 Media.volume = value; //音量
36 Media.muted = value; //靜音
37
38 //TimeRanges(區(qū)域)對象
39 TimeRanges.length; //區(qū)域段數(shù)
40 TimeRanges.start(index) //第index段區(qū)域的開始位置
41 TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置 事件： 1 eventTester = function(e){
2 Media.addEventListener(e,function(){
3 console.log((new Date()).getTime(),e);
4 });
5 }
6
7 eventTester("loadstart"); //客戶端開始請求數(shù)據(jù)
8 eventTester("progress"); //客戶端正在請求數(shù)據(jù)
9 eventTester("suspend"); //延遲下載
10 eventTester("abort"); //客戶端主動終止下載（不是因?yàn)殄e誤引起），
11 eventTester("error"); //請求數(shù)據(jù)時(shí)遇到錯誤
12 eventTester("stalled"); //網(wǎng)速失速
13 eventTester("play"); //play()和autoplay開始播放時(shí)觸發(fā)
14 eventTester("pause"); //pause()觸發(fā)
15 eventTester("loadedmetadata"); //成功獲取資源長度
16 eventTester("loadeddata"); //
17 eventTester("waiting"); //等待數(shù)據(jù)，并非錯誤
18 eventTester("playing"); //開始回放
19 eventTester("canplay"); //可以播放，但中途可能因?yàn)榧虞d而暫停
20 eventTester("canplaythrough"); //可以播放，歌曲全部加載完畢
21 eventTester("seeking"); //尋找中
22 eventTester("seeked"); //尋找完畢
23 eventTester("timeupdate"); //播放時(shí)間改變
24 eventTester("ended"); //播放結(jié)束
25 eventTester("ratechange"); //播放速率改變
26 eventTester("durationchange"); //資源長度改變
27 eventTester("volumechange"); //音量改變
|
