如何在JW Player 8.30.0中添加官方快进按钮（无需手动添加）

JW Player 8支持通过自定义控制栏按钮配置来添加快进按钮，无需手动创建DOM元素。你只需要在setup配置中添加controlbar参数，指定按钮顺序并加入forward按钮，同时可配置快进偏移量。

修改你的JWPlayer.js组件中的setup配置部分：

import React, { useEffect, useRef } from 'react'
const JwPlayer = ({ video }) => {
    const playerRef = useRef(null);
    const playerInstanceRef = useRef(null);
    useEffect(() => {
        if (playerRef.current && typeof window !== "undefined") {
            playerInstanceRef.current = window.jwplayer(playerRef.current);

            playerInstanceRef.current.setup({
                file: video,
                width: '100%',
                height: "auto",
                aspectratio: '16:9',
                controls: true,
                // 新增控制栏配置
                controlbar: {
                    buttons: ['play', 'backward', 'forward', 'volume', 'fullscreen']
                },
                // 设置快进/后退的秒数，默认30，可自定义
                forwardOffset: 10,
                backwardOffset: 10
            });
            return () => {
                playerInstanceRef.current.remove();
            };
        }
    }, [video]);

    return (
        <div ref={playerRef}></div>
    )
}
export default JwPlayer

配置说明： #

• controlbar.buttons：数组内的元素对应控制栏显示的按钮，按顺序排列。将'forward'放在'backward'之后，就能让快进按钮显示在后退按钮右侧
• forwardOffset：设置每次点击快进按钮跳过的秒数，默认值为30，可根据需求调整
• backwardOffset：可选配置，设置后退按钮的跳转秒数

这样配置后，JW Player会自动渲染快进按钮到控制栏中，无需额外手动创建按钮逻辑。

内容的提问来源于stack exchange，提问作者Ujjawal Mathur