add Artplayer.USE_RAF

packages/artplayer-vitepress/docs/advanced/global.md

@@ -520,4 +520,20 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
+```
+
+## USE_RAF
+
+设置是否使用 `requestAnimationFrame` ，默认为 `false`，目前主要用于进度条的平滑效果
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
 ```

packages/artplayer-vitepress/docs/en/advanced/global.md

@@ -520,4 +520,20 @@ var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
+```
+
+## USE_RAF
+
+设置是否使用 `requestAnimationFrame` ，默认为 `false`，目前主要用于进度条的平滑效果
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
 ```

packages/artplayer/src/control/progress.js

@@ -118,9 +118,15 @@ export default function progress(options) {
                     setBar('loaded', art.loaded);
                 });
 
-                art.on('video:timeupdate', () => {
-                    setBar('played', art.played);
-                });
+                if (art.constructor.USE_RAF) {
+                    art.on('raf', () => {
+                        setBar('played', art.played);
+                    });
+                } else {
+                    art.on('video:timeupdate', () => {
+                        setBar('played', art.played);
+                    });
+                }
 
                 art.on('video:ended', () => {
                     setBar('played', 1);

packages/artplayer/src/events/index.js

@@ -6,6 +6,7 @@ import resizeInit from './resizeInit';
 import gestureInit from './gestureInit';
 import viewInit from './viewInit';
 import documentInit from './documentInit';
+import updateInit from './updateInit';
 
 export default class Events {
     constructor(art) {
@@ -21,6 +22,7 @@ export default class Events {
         gestureInit(art, this);
         viewInit(art, this);
         documentInit(art, this);
+        updateInit(art, this);
     }
 
     proxy(target, name, callback, option = {}) {

packages/artplayer/src/events/updateInit.js

@@ -0,0 +1,19 @@
+export default function updateInit(art) {
+    if (art.constructor.USE_RAF) {
+        let timer = null;
+
+        (function update() {
+            if (art.playing) {
+                art.emit('raf');
+            }
+
+            if (!art.isDestroy) {
+                timer = requestAnimationFrame(update);
+            }
+        })();
+
+        art.on('destroy', () => {
+            cancelAnimationFrame(timer);
+        });
+    }
+}

packages/artplayer/src/index.js

@@ -242,6 +242,7 @@ Artplayer.ASPECT_RATIO = ['default', '4:3', '16:9'];
 Artplayer.FLIP = ['normal', 'horizontal', 'vertical'];
 Artplayer.FULLSCREEN_WEB_IN_BODY = false;
 Artplayer.LOG_VERSION = true;
+Artplayer.USE_RAF = false;
 
 if (typeof document !== 'undefined') {
     if (!document.getElementById('artplayer-style')) {

packages/artplayer/src/plugins/miniProgressBar.js

@@ -7,9 +7,15 @@ export default function miniProgressBar(art) {
                     $progressBar.style.display = 'none';
                 });
 
-                art.on('video:timeupdate', () => {
-                    $progressBar.style.width = `${art.played * 100}%`;
-                });
+                if (art.constructor.USE_RAF) {
+                    art.on('raf', () => {
+                        $progressBar.style.width = `${art.played * 100}%`;
+                    });
+                } else {
+                    art.on('video:timeupdate', () => {
+                        $progressBar.style.width = `${art.played * 100}%`;
+                    });
+                }
 
                 art.on('setBar', (type, percentage) => {
                     if (type === 'played') {