diff --git a/docs/uncompiled/artplayer-plugin-backlight.js b/docs/uncompiled/artplayer-plugin-backlight.js
index 155b41751..134ea99cb 100644
--- a/docs/uncompiled/artplayer-plugin-backlight.js
+++ b/docs/uncompiled/artplayer-plugin-backlight.js
@@ -101,7 +101,7 @@
       $player.insertBefore($backlight, $video);
 
       (function loop() {
-        window.requestAnimationFrame(function () {
+        setTimeout(function () {
           if (player.playing) {
             var clientWidth = $video.clientWidth,
                 clientHeight = $video.clientHeight;
@@ -128,7 +128,7 @@
           if (!art.isDestroy) {
             loop();
           }
-        });
+        }, 200);
       })();
 
       return {
diff --git a/docs/uncompiled/artplayer-plugin-backlight.js.map b/docs/uncompiled/artplayer-plugin-backlight.js.map
index f58b468ee..fe738628d 100644
--- a/docs/uncompiled/artplayer-plugin-backlight.js.map
+++ b/docs/uncompiled/artplayer-plugin-backlight.js.map
@@ -1 +1 @@
-{"version":3,"file":"artplayer-plugin-backlight.js","sources":["../../packages/artplayer-plugin-backlight/src/index.js"],"sourcesContent":["function matrixCallback(callback) {\n    const result = [];\n    const x = 10;\n    const y = 5;\n    for (let xIndex = 0; xIndex < x; xIndex += 1) {\n        for (let yIndex = 0; yIndex < y; yIndex += 1) {\n            if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {\n                result.push(callback(xIndex, yIndex, x, y));\n            }\n        }\n    }\n    return result;\n}\n\nfunction getColors($canvas, $video, width, height) {\n    const ctx = $canvas.getContext('2d');\n    $canvas.width = width;\n    $canvas.height = height;\n    ctx.drawImage($video, 0, 0);\n    return matrixCallback((xIndex, yIndex, x, y) => {\n        const itemW = width / x;\n        const itemH = height / y;\n        const itemX = xIndex * itemW;\n        const itemY = yIndex * itemH;\n        const { data } = ctx.getImageData(itemX, itemY, itemW, itemH);\n        let r = 0;\n        let g = 0;\n        let b = 0;\n        for (let i = 0, l = data.length; i < l; i += 4) {\n            r += data[i];\n            g += data[i + 1];\n            b += data[i + 2];\n        }\n        r = Math.floor(r / (data.length / 4));\n        g = Math.floor(g / (data.length / 4));\n        b = Math.floor(b / (data.length / 4));\n        return { r, g, b };\n    });\n}\n\nfunction creatMatrix(parent) {\n    return matrixCallback((xIndex, yIndex, x, y) => {\n        const $box = document.createElement('div');\n        $box.style.position = 'absolute';\n        $box.style.left = `${xIndex * 100 / x}%`;\n        $box.style.top = `${yIndex * 100 / y}%`;\n        $box.style.width = `${100 / x}%`;\n        $box.style.height = `${100 / y}%`;\n        $box.style.webkitBorderRadius = '50%';\n        $box.style.borderRadius = '50%';\n        $box.style.webkitTransition = 'all .2s ease';\n        $box.style.transition = 'all .2s ease';\n        parent.appendChild($box);\n        return {\n            $box,\n            left: xIndex === 0,\n            right: xIndex === x - 1,\n            top: yIndex === 0,\n            bottom: yIndex === y - 1,\n        };\n    });\n}\n\nfunction artplayerPluginBacklight(art) {\n    const { setStyles } = art.constructor.utils;\n    const {\n        template: { $player, $video },\n        player,\n    } = art;\n\n    const $backlight = document.createElement('div');\n    $backlight.classList.add('artplayer-backlight');\n    setStyles($backlight, {\n        position: 'absolute',\n        zIndex: 9,\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        width: '100%',\n        height: '100%',\n    });\n\n    const matrix = creatMatrix($backlight);\n    const $canvas = document.createElement('canvas');\n    $player.insertBefore($backlight, $video);\n\n    (function loop() {\n        window.requestAnimationFrame(() => {\n            if (player.playing) {\n                const { clientWidth, clientHeight } = $video;\n                const colors = getColors($canvas, $video, clientWidth, clientHeight);\n                colors.forEach(({ r, g, b }, index) => {\n                    const { $box, left, right, top, bottom } = matrix[index];\n                    // eslint-disable-next-line no-nested-ternary\n                    const x = left ? '-64px' : right ? '64px' : '0';\n                    // eslint-disable-next-line no-nested-ternary\n                    const y = top ? '-64px' : bottom ? '64px' : '0';\n                    $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;\n                    $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;\n                });    \n            };\n\n            if (!art.isDestroy) {\n                loop();\n            }\n        });\n    })();\n\n    return {\n        name: 'artplayerPluginBacklight',\n    };\n}\n\nexport default artplayerPluginBacklight;"],"names":["matrixCallback","callback","result","x","y","xIndex","yIndex","push","getColors","$canvas","$video","width","height","ctx","getContext","drawImage","itemW","itemH","itemX","itemY","getImageData","data","r","g","b","i","l","length","Math","floor","creatMatrix","parent","$box","document","createElement","style","position","left","top","webkitBorderRadius","borderRadius","webkitTransition","transition","appendChild","right","bottom","artplayerPluginBacklight","art","setStyles","constructor","utils","template","$player","player","$backlight","classList","add","zIndex","matrix","insertBefore","loop","window","requestAnimationFrame","playing","clientWidth","clientHeight","colors","forEach","index","webkitBoxShadow","boxShadow","isDestroy","name"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"artplayer-plugin-backlight.js","sources":["../../packages/artplayer-plugin-backlight/src/index.js"],"sourcesContent":["function matrixCallback(callback) {\n    const result = [];\n    const x = 10;\n    const y = 5;\n    for (let xIndex = 0; xIndex < x; xIndex += 1) {\n        for (let yIndex = 0; yIndex < y; yIndex += 1) {\n            if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {\n                result.push(callback(xIndex, yIndex, x, y));\n            }\n        }\n    }\n    return result;\n}\n\nfunction getColors($canvas, $video, width, height) {\n    const ctx = $canvas.getContext('2d');\n    $canvas.width = width;\n    $canvas.height = height;\n    ctx.drawImage($video, 0, 0);\n    return matrixCallback((xIndex, yIndex, x, y) => {\n        const itemW = width / x;\n        const itemH = height / y;\n        const itemX = xIndex * itemW;\n        const itemY = yIndex * itemH;\n        const { data } = ctx.getImageData(itemX, itemY, itemW, itemH);\n        let r = 0;\n        let g = 0;\n        let b = 0;\n        for (let i = 0, l = data.length; i < l; i += 4) {\n            r += data[i];\n            g += data[i + 1];\n            b += data[i + 2];\n        }\n        r = Math.floor(r / (data.length / 4));\n        g = Math.floor(g / (data.length / 4));\n        b = Math.floor(b / (data.length / 4));\n        return { r, g, b };\n    });\n}\n\nfunction creatMatrix(parent) {\n    return matrixCallback((xIndex, yIndex, x, y) => {\n        const $box = document.createElement('div');\n        $box.style.position = 'absolute';\n        $box.style.left = `${(xIndex * 100) / x}%`;\n        $box.style.top = `${(yIndex * 100) / y}%`;\n        $box.style.width = `${100 / x}%`;\n        $box.style.height = `${100 / y}%`;\n        $box.style.webkitBorderRadius = '50%';\n        $box.style.borderRadius = '50%';\n        $box.style.webkitTransition = 'all .2s ease';\n        $box.style.transition = 'all .2s ease';\n        parent.appendChild($box);\n        return {\n            $box,\n            left: xIndex === 0,\n            right: xIndex === x - 1,\n            top: yIndex === 0,\n            bottom: yIndex === y - 1,\n        };\n    });\n}\n\nfunction artplayerPluginBacklight(art) {\n    const { setStyles } = art.constructor.utils;\n    const {\n        template: { $player, $video },\n        player,\n    } = art;\n\n    const $backlight = document.createElement('div');\n    $backlight.classList.add('artplayer-backlight');\n    setStyles($backlight, {\n        position: 'absolute',\n        zIndex: 9,\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0,\n        width: '100%',\n        height: '100%',\n    });\n\n    const matrix = creatMatrix($backlight);\n    const $canvas = document.createElement('canvas');\n    $player.insertBefore($backlight, $video);\n\n    (function loop() {\n        setTimeout(() => {\n            if (player.playing) {\n                const { clientWidth, clientHeight } = $video;\n                const colors = getColors($canvas, $video, clientWidth, clientHeight);\n                colors.forEach(({ r, g, b }, index) => {\n                    const { $box, left, right, top, bottom } = matrix[index];\n                    // eslint-disable-next-line no-nested-ternary\n                    const x = left ? '-64px' : right ? '64px' : '0';\n                    // eslint-disable-next-line no-nested-ternary\n                    const y = top ? '-64px' : bottom ? '64px' : '0';\n                    $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;\n                    $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;\n                });\n            }\n\n            if (!art.isDestroy) {\n                loop();\n            }\n        }, 200);\n    })();\n\n    return {\n        name: 'artplayerPluginBacklight',\n    };\n}\n\nexport default artplayerPluginBacklight;\n"],"names":["matrixCallback","callback","result","x","y","xIndex","yIndex","push","getColors","$canvas","$video","width","height","ctx","getContext","drawImage","itemW","itemH","itemX","itemY","getImageData","data","r","g","b","i","l","length","Math","floor","creatMatrix","parent","$box","document","createElement","style","position","left","top","webkitBorderRadius","borderRadius","webkitTransition","transition","appendChild","right","bottom","artplayerPluginBacklight","art","setStyles","constructor","utils","template","$player","player","$backlight","classList","add","zIndex","matrix","insertBefore","loop","setTimeout","playing","clientWidth","clientHeight","colors","forEach","index","webkitBoxShadow","boxShadow","isDestroy","name"],"mappings":"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"}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-backlight/src/index.js b/packages/artplayer-plugin-backlight/src/index.js
index 9b16c1b22..ee5403068 100644
--- a/packages/artplayer-plugin-backlight/src/index.js
+++ b/packages/artplayer-plugin-backlight/src/index.js
@@ -42,8 +42,8 @@ function creatMatrix(parent) {
     return matrixCallback((xIndex, yIndex, x, y) => {
         const $box = document.createElement('div');
         $box.style.position = 'absolute';
-        $box.style.left = `${xIndex * 100 / x}%`;
-        $box.style.top = `${yIndex * 100 / y}%`;
+        $box.style.left = `${(xIndex * 100) / x}%`;
+        $box.style.top = `${(yIndex * 100) / y}%`;
         $box.style.width = `${100 / x}%`;
         $box.style.height = `${100 / y}%`;
         $box.style.webkitBorderRadius = '50%';
@@ -86,7 +86,7 @@ function artplayerPluginBacklight(art) {
     $player.insertBefore($backlight, $video);
 
     (function loop() {
-        window.requestAnimationFrame(() => {
+        setTimeout(() => {
             if (player.playing) {
                 const { clientWidth, clientHeight } = $video;
                 const colors = getColors($canvas, $video, clientWidth, clientHeight);
@@ -98,13 +98,13 @@ function artplayerPluginBacklight(art) {
                     const y = top ? '-64px' : bottom ? '64px' : '0';
                     $box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
                     $box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
-                });    
-            };
+                });
+            }
 
             if (!art.isDestroy) {
                 loop();
             }
-        });
+        }, 200);
     })();
 
     return {
@@ -112,4 +112,4 @@ function artplayerPluginBacklight(art) {
     };
 }
 
-export default artplayerPluginBacklight;
\ No newline at end of file
+export default artplayerPluginBacklight;