5.7.1 概述

該元素顯示為一個進度條形式摄欲，可以使用<progress>標簽來顯示 javascript 中耗費時間的函數(shù)的進度

語法如下：

<progress value = "22" max="100"></progress>

5.7.2 requestAnimationFrame() 方法

requestAnimagionFrame() 方式是瀏覽器用于定時循環(huán)操作的一個 API 左刽，類似于 setTimeout() 。主要用途是按幀對網(wǎng)頁進行重繪舷礼。幀率為 30幀细卧，專門為瀏覽器提供動畫的 API尉桩，當不在本網(wǎng)頁時 自動停止刷新，在主線程工作

5.7.3 cancelAnimagionFrame() 方法

取消一個先前通過調(diào)用 window.requestAnimagtionFrame() 方法添加到計劃中的動畫幀請求贪庙。

語法如下：

window.cancelAnimationFrame(requestID);
// requestId 是先前調(diào)用 window.requestAnimationFrame()方法時返回的ID

5.7.4 代碼演示：

<video src="./課前操.mp4" id="media" style="width: 800px; height: 600px;"></video>
    <progress id="prgBar" style="width:100%;"></progress>
    <div id="msg"></div>
    <script>
        let media = document.getElementById('media')
        let prgBar = document.getElementById('prgBar')
        let frameTimer;
        // 添加視頻封面
        media.poster = "./e70aee340e2021c7d89c26f6e12601eee5612d7e_raw.jpg"
        var msg = document.querySelector('#msg')

        // 單擊播放
        media.onclick = function(){
            if(media.paused || media.ended){
                media.play()
                UpdateProgress();
            }else{
                media.pause()
            }
        }

        // 進度條效果
        function UpdateProgress(){
            if(media.readyState == 4){
                prgBar.max = media.duration;
                prgBar.value = media.currentTime;
                frameTimer = requestAnimationFrame(UpdateProgress);
            }
        }
        
        // 單機進度條 快進
        prgBar.onclick = function(){
            if(media.readyState == 4){
               media.currentTime = (event.offsetX / this.clientWidth) * media.duration
               prgBar.max = media.duration;
               prgBar.value = media.currentTime;
               media.play()
            }
        }

        // 快進之后蜘犁，進度條重新加載
        media.onseeked = function(){
            UpdateProgress()
        }


        // 全屏
        media.ondblclick = function(){
            if(document.isFullScreen){
                // 退出全屏
                document.exitFullscreen();
            }else{
                // 全屏
                media.requestFullscreen();
            }
        }

        // 結束播放
        media.onended = function(){
            cancelAnimationFrame(frameTimer)
        }
    </script>