video.js 反应集成右上角的自定义共享按钮而不是 controlBar。如何应对？

Question

问题：

我在 React 项目中使用 video.js 库来显示视频，我想自定义共享按钮的位置，使其显示在视频播放器的右上角，而不是显示在控制栏上。我怎样才能实现这个目标？

代码片段：

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', // Play/Pause button
                            'nextButton', // Custom button
                            'volumePanel',
                            'currentTimeDisplay',
                            'timeDivider',
                            'durationDisplay',
                            'progressControl',
                            'pictureInPictureToggle',
                            'fullscreenToggle',
                            'shareButton',
                        ]
                    }
                }, () => {
                    // videojs.log('player is ready');
                    onReady && onReady(player);

                    // Create a custom button
                    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!');
                    });

                    // Add the custom button to the control bar at the second index
                    const controlBar = player.getChild('controlBar');
                    controlBar.addChild(nextButton, {}, 1); // Position at the second index

                    // share button
                    const shareButton = new Button(player, {
                        text: 'share button'
                    });

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

                    // Add the custom button to the video player
                    const videoPlayer = player.el();
                    videoPlayer.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;

详情：

我尝试将共享按钮添加到控制栏选项中，但它仍然显示在控制栏中。 我希望共享按钮位于视频播放器的右上角、控制栏之外。 当前的实现将共享按钮添加到控制栏，但我需要将其与控制栏分开。 期望的结果：

我希望分享按钮显示在视频播放器的右上角，独立于控制栏。我怎样才能达到这个定位？

Answer 1

它位于控制器之上而不是内部。您需要为您的

vjs-share-button-top-right

类添加样式，例如

.video-js .vjs-control.vjs-share-button-top-right {
  position: absolute;
  top: .5em;
  right: .5em;
  height: 4em;
}

它将正确定位但不可见，您需要添加一个图标。一种选择是使用 Video.js 的默认字体图标

shareButton.$('.vjs-icon-placeholder').classList.add('vjs-icon-share');