进度条<progress>标签

5.7.1 概述

该元素显示为一个进度条形式，可以使用<progress>标签来显示 javascript 中耗费时间的函数的进度

语法如下：

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

5.7.2 requestAnimationFrame() 方法

requestAnimagionFrame() 方式是浏览器用于定时循环操作的一个 API ，类似于 setTimeout() 。主要用途是按帧对网页进行重绘。帧率为 30帧，专门为浏览器提供动画的 API，当不在本网页时 自动停止刷新，在主线程工作

5.7.3 cancelAnimagionFrame() 方法

取消一个先前通过调用 window.requestAnimagtionFrame() 方法添加到计划中的动画帧请求。

语法如下：

window.cancelAnimationFrame(requestID);
// requestId 是先前调用 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>