React项目中Video.js自定义分享按钮至播放器右上角的实现

要实现分享按钮脱离控制栏、定位到播放器右上角，需要从控制栏配置移除按钮项、调整按钮挂载位置、添加CSS绝对定位三个方面入手，具体实现如下：

关键调整点 #

• 从控制栏的children配置中移除shareButton，避免它被自动添加到控制栏内
• 将分享按钮挂载到Video.js播放器的根容器，而非控制栏组件
• 通过CSS绝对定位实现右上角布局，同时保证按钮层级不被视频内容遮挡

修改后的完整代码 #

import { useEffect, useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import './video-js.css';

const VideoJs = (props) => {
    const videoRef = useRef(null);
    const playerRef = useRef(null);
    const { options, onReady } = props;

    useEffect(() => {
        if (!playerRef.current) {
            const videoElement = document.createElement('video-js');
            videoElement.classList.add('vjs-big-play-centered');
            videoElement.classList.add('vjs-altRadar');
            videoRef.current.appendChild(videoElement);

            const player = playerRef.current = videojs(videoElement,
                {
                    ...options,
                    controlBar: {
                        children: [
                            'playToggle',
                            'nextButton',
                            'volumePanel',
                            'currentTimeDisplay',
                            'timeDivider',
                            'durationDisplay',
                            'progressControl',
                            'pictureInPictureToggle',
                            'fullscreenToggle'
                            // 移除shareButton，避免自动加入控制栏
                        ]
                    }
                }, () => {
                    onReady && onReady(player);

                    // 保留原有next按钮逻辑
                    const Button = videojs.getComponent('Button');

                    const nextButton = new Button(player, {
                        text: 'next button'
                    });

                    nextButton.addClass('vjs-next-button');
                    nextButton.controlText('Custom Button');
                    nextButton.on('click', () => {
                        alert('Next button clicked!');
                    });

                    const controlBar = player.getChild('controlBar');
                    controlBar.addChild(nextButton, {}, 1);

                    // 创建并配置分享按钮
                    const shareButton = new Button(player, {
                        text: 'share'
                    });

                    shareButton.addClass('vjs-share-button');
                    shareButton.controlText('Share');
                    shareButton.on('click', () => {
                        alert('Share button clicked!');
                    });

                    // 将按钮挂载到播放器根容器（而非控制栏）
                    const playerRoot = player.el();
                    playerRoot.appendChild(shareButton.el());
                    // 添加自定义定位类
                    shareButton.addClass('vjs-share-button-top-right');
                });
        } else {
            const player = playerRef.current;
            player.addClass('vjs-altRadar');
            player.autoplay(options.autoplay);
            player.src(options.sources);
        }
    }, [options, onReady]);

    useEffect(() => {
        const player = playerRef.current;

        return () => {
            if (player && !player.isDisposed()) {
                player.dispose();
                playerRef.current = null;
            }
        };
    }, []);

    return (
        <div data-vjs-player>
            <div ref={videoRef} />
        </div>
    );
}

export default VideoJs;

配套CSS样式（添加到你的video-js.css） #

/* 确保播放器容器为相对定位，作为按钮绝对定位的参考 */
.video-js.vjs-altRadar {
    position: relative;
}

/* 定位分享按钮到右上角 */
.video-js .vjs-share-button-top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10; /* 保证按钮在视频内容上方 */
    /* 可选：匹配Video.js风格的按钮样式 */
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    border: none;
}

.video-js .vjs-share-button-top-right:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

细节说明 #

1. 移除控制栏配置项: 原代码在controlBar.children中保留了shareButton，这会触发Video.js自动将按钮加入控制栏，必须删除该配置项。
2. 挂载到根容器: 通过player.el()获取播放器的根DOM节点，将分享按钮的DOM元素追加进去，确保它完全独立于控制栏组件。
3. CSS定位逻辑: 给播放器容器设置position: relative，让按钮的绝对定位以播放器为参考；z-index:10保证按钮不会被视频画面遮挡；自定义hover样式可以让按钮交互更符合Video.js的视觉风格。

内容的提问来源于stack exchange，提问作者Utkarsh Gangwar