音頻和視頻API一致
方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音頻/視頻添加新的文本軌道 |
| canPlayType() | 檢測瀏覽器是否能播放指定的音頻/視頻類型 |
| load() | 重新加載音頻/視頻元素 |
| play() | 開始播放音頻/視頻 |
| pause() | 暫停當前播放的音頻/視頻 |
屬性
| 屬性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音軌的 AudioTrackList 對象 |
| autoplay | 設置或返回是否在加載完成后隨即播放音頻/視頻 |
| buffered | 返回表示音頻/視頻已緩沖部分的 TimeRanges 對象 |
| controller | 返回表示音頻/視頻當前媒體控制器的 MediaController 對象 |
| controls | 設置或返回音頻/視頻是否顯示控件（比如播放/暫停等） |
| crossOrigin | 設置或返回音頻/視頻的 CORS 設置 |
| currentSrc | 返回當前音頻/視頻的 URL |
| currentTime | 設置或返回音頻/視頻中的當前播放位置（以秒計） |
| defaultMuted | 設置或返回音頻/視頻默認是否靜音 |
| defaultPlaybackRate | 設置或返回音頻/視頻的默認播放速度 |
| duration | 返回當前音頻/視頻的長度（以秒計） |
| ended | 返回音頻/視頻的播放是否已結束 |
| error | 返回表示音頻/視頻錯誤狀態的 MediaError 對象 |
| loop | 設置或返回音頻/視頻是否應在結束時重新播放 |
| mediaGroup | 設置或返回音頻/視頻所屬的組合（用於連接多個音頻/視頻元素） |
| muted | 設置或返回音頻/視頻是否靜音 |
| networkState | 返回音頻/視頻的當前網絡狀態 |
| paused | 設置或返回音頻/視頻是否暫停 |
| playbackRate | 設置或返回音頻/視頻播放的速度 |
| played | 返回表示音頻/視頻已播放部分的 TimeRanges 對象 |
| preload | 設置或返回音頻/視頻是否應該在頁面加載后進行加載 |
| readyState | 返回音頻/視頻當前的就緒狀態 |
| seekable | 返回表示音頻/視頻可尋址部分的 TimeRanges 對象 |
| seeking | 返回用戶是否正在音頻/視頻中進行查找 |
| src | 設置或返回音頻/視頻元素的當前來源 |
| startDate | 返回表示當前時間偏移的 Date 對象 |
| textTracks | 返回表示可用文本軌道的 TextTrackList 對象 |
| videoTracks | 返回表示可用視頻軌道的 VideoTrackList 對象 |
| volume | 設置或返回音頻/視頻的音量 |
事件
| 事件 | 描述 |
|---|---|
| abort | 當音頻/視頻的加載已放棄時 |
| canplay | 當瀏覽器可以播放音頻/視頻時 |
| canplaythrough | 當瀏覽器可在不因緩沖而停頓的情況下進行播放時 |
| durationchange | 當音頻/視頻的時長已更改時 |
| emptied | 當目前的播放列表為空時 |
| ended | 當目前的播放列表已結束時 |
| error | 當在音頻/視頻加載期間發生錯誤時 |
| loadeddata | 當瀏覽器已加載音頻/視頻的當前幀時 |
| loadedmetadata | 當瀏覽器已加載音頻/視頻的元數據時 |
| loadstart | 當瀏覽器開始查找音頻/視頻時 |
| pause | 當音頻/視頻已暫停時 |
| play | 當音頻/視頻已開始或不再暫停時 |
| playing | 當音頻/視頻在已因緩沖而暫停或停止后已就緒時 |
| progress | 當瀏覽器正在下載音頻/視頻時 |
| ratechange | 當音頻/視頻的播放速度已更改時 |
| seeked | 當用戶已移動/跳躍到音頻/視頻中的新位置時 |
| seeking | 當用戶開始移動/跳躍到音頻/視頻中的新位置時 |
| stalled | 當瀏覽器嘗試獲取媒體數據，但數據不可用時 |
| suspend | 當瀏覽器刻意不獲取媒體數據時 |
| timeupdate | 當目前的播放位置已更改時 |
| volumechange | 當音量已更改時 |
| waiting | 當視頻由於需要緩沖下一幀而停止 |
案例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>視頻播放</title> <!--字體圖標文件--> <link rel="stylesheet" href="css/font-awesome.css"/> <!--修飾視頻播放器樣式--> <link rel="stylesheet" href="css/player.css"/> </head> <body> <!--多媒體語義標簽--> <figure> <!--多媒體區域的標題解釋--> <figcaption>視頻播放器</figcaption> <div class="player"> <!--一開始隱藏 加載可以播放就顯示--> <video src="./media/fun.mp4"></video> <!--自定義控制欄--> <div class="controls"> <!-- 開始播放按鈕 --> <a href="javascript:;" class="switch fa fa-play"></a> <!-- 進度顯示區域 --> <div class="progress"> <!--進度顯示條--> <div class="line"></div> <!--默認的灰色進度條--> <div class="bar"></div> </div> <!--時間區域--> <div class="timer"> <span class="current">00:00:00</span> / <span class="total">00:00:00</span> </div> <!--全屏按鈕 取消全屏按鈕--> <a href="javascript:;" class="expand fa fa-arrows-alt"></a> </div> </div> <!--<input type="text" class="dm"><button class="send">發射</button>--> </figure> <script src="js/jquery.min.js"></script> <script> $(function () { //播放器 var $player = $('.player'); var player = $player[0]; //視頻jquery元素 var $video = $player.find('video'); //video 元素 api存在它里面 var video = $video[0]; //播放或暫停按鈕 var $switch = $('.switch'); //進度條 var $line = $('.line'); //格式化時間 var formatTime = function (time) { //time 40.2s var h = Math.floor(time / 3600); var m = Math.floor(time % 3600 / 60); var s = Math.floor(time % 60); return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s); }; //當前播放時間容器 var $current = $('.current'); //總時長 var $total = $('.total'); //全屏 取消全屏 var $expand = $('.expand'); //獲取灰色進度條 var $bar = $('.bar'); /*1.加載的視頻可以播放 顯示視頻標簽*/ /*6.在視頻加載成功的時候 顯示總時長*/ video.oncanplay = function () { //顯示視頻 $video.show(); //實現總時長 $total.html(formatTime(video.duration)); }; /*2.點擊播放按鈕 視頻進行播放*/ /*3.點擊暫停按鈕 視頻進行暫停*/ $switch.on('click', function () { if ($switch.hasClass('fa-play')) { video.play(); $switch.removeClass('fa-play').addClass('fa-pause'); } else { video.pause(); $switch.addClass('fa-play').removeClass('fa-pause'); } }); /*4.在播放的過程中顯示進度條*/ /*4.1 監聽當前播放的改變 去計算 當前的播放進度百分比=當前播放時間/視頻總時長 當中寬度設置進度條*/ /*5.在播放的過程中顯示當前播放時間 00:00:00*/ video.ontimeupdate = function () { //進度顯示 var p = video.currentTime / video.duration * 100 + '%'; $line.css('width', p); //播放時間顯示 $current.html(formatTime(video.currentTime)); }; /*7.點擊全屏操作按鈕 播放器全屏*/ /*8.點擊取消全屏按鈕 播放器取消全屏*/ $expand.on('click', function () { if ($expand.hasClass('fa-arrows-alt')) { player.webkitRequestFullScreen(); $expand.removeClass('fa-arrows-alt').addClass('fa-compress'); } else { document.webkitCancelFullScreen(); //$expand.addClass('fa-arrows-alt').removeClass('fa-compress'); } }); //當你按 esc 退出全屏的時候 沒有改按鈕 /*document.onkeyup = function(){ 瀏覽器禁用了全屏狀態對esc鍵的監聽 console.log('ok'); }*/ /*去監聽是否全屏 如果全屏 */ window.onresize = function () { /*判斷是否全屏*/ //注意： if (!document.webkitIsFullScreen) { $expand.addClass('fa-arrows-alt').removeClass('fa-compress'); } }; /*9.點擊進度條 根據位置切換當前播放進度*/ /*9.1 獲取點擊的位置*/ /*9.2 根據位置和進度條的長度比例 計算需 要切換的播放時間*/ /*9.3 設置切換的播放時間為當前播放時間*/ $bar.on('click', function (e) { //獲取點擊的位置距離元素左側的距離 var currentTime = e.offsetX / $bar.width() * video.duration; video.currentTime = currentTime; }); /*10. 播放結束 重置一下*/ video.onended = function(){ video.currentTime = 0; $switch.addClass('fa-play').removeClass('fa-pause'); }; }); </script> </body> </html>