前端播放器使用（含画中画效果）

最新推荐文章于 2024-08-15 17:40:17 发布

怕冷的火焰（~杰）

最新推荐文章于 2024-08-15 17:40:17 发布

阅读量546

点赞数

CC 4.0 BY-SA版权

分类专栏：播放器video 前端文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/weixin_50236973/article/details/133994245

前端同时被 2 个专栏收录

75 篇文章

订阅专栏

播放器video

1 篇文章

订阅专栏

本文介绍了如何使用React构建一个可定制的视频播放器组件，包含视频源处理、控制选项、事件处理和视频状态管理，如自动播放、静音和显示/隐藏海报。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用：
<VideoPlayer src={domainUrl + preViewItem.videoUrl} autoplay={true} controls={true} />



源代码：
import React, {memo, useEffect, useState, forwardRef, useImperativeHandle} from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

const VideoPlayer = (props, ref) => {
    const {videoRef, loop, controls, preload, autoplay, muted, onMouseOver, onMouseLeave, poster} = props;
    const [videoPlayerId] = useState(`videoPlayer${_.random(0, 1000000)}`);
    const [src, setSrc] = useState(props.src);
    const [videoPlayer, setVideoPlayer] = useState();

    useImperativeHandle(ref, () => ({
        updateCurrentTime
    }));

    useEffect(() => {
        setSrc(props.src);
        videoPlayer && videoPlayer.src([{src: props.src}, {src: props.src, type: 'application/x-mpegURL'}]);
    }, [props.src]);

    const crateVideoPlayer = () => {
        const options = {
            loop,
            controls,
            preload,
            autoplay,
            muted,
            poster,
            loadingSpinner: {},
            playbackRates: [0.5, 1, 1.5, 2]
        };
        return videojs(videoPlayerId, options);
    };

    useEffect(() => {
        videoPlayer && videoPlayer.poster(poster);
    }, [poster]);

    const destroyVideoPlayer = player => {
        player && player.pause();
        player && player.dispose();
        // 退出画中画模式
        if (document.pictureInPictureElement) {
            document.exitPictureInPicture().catch(error => {
                console.error('Failed to exit picture-in-picture mode:', error);
            });
        } else if (document.webkitPictureInPictureElement) {
            document.webkitExitPictureInPicture().catch(error => {
                console.error('Failed to exit picture-in-picture mode:', error);
            });
        }
    };

    useEffect(() => {
        const player = crateVideoPlayer();
        setVideoPlayer(player);
        return () => {
            destroyVideoPlayer(player);
            player && player.dispose();
        };
    }, []);

    const handleMouseOver = () => {
        onMouseOver && onMouseOver();
    };

    const handleMouseLeave = () => {
        onMouseLeave && onMouseLeave();
        // showPoster();
    };

    const updateCurrentTime = currentTime => {
        if (videoPlayer) {
            videoPlayer.currentTime(0);
            // const currentPoster = videoPlayer.poster();
            // videoPlayer.poster(currentPoster);
            videoPlayer.pause();
        }
    };

    const showPoster = () => {
        const vjsPosters = document.getElementById(videoPlayerId)?.getElementsByClassName('vjs-poster');
        _.forEach(vjsPosters, vjsPoster => {
            vjsPoster.style.display = 'block';
        });
    };

    const hidePoster = () => {
        const vjsPosters = document.getElementById(videoPlayerId)?.getElementsByClassName('vjs-poster');
        _.forEach(vjsPosters, vjsPoster => {
            vjsPoster.style.display = 'none';
        });
    };

    // const handleMouseEnter = () => {
    //  videoPlayer && videoPlayer.userActive(true);
    // };

    return (
        <div ref={ref} onMouseOver={handleMouseOver} onMouseLeave={handleMouseLeave}>
            <video ref={videoRef} id={videoPlayerId} className="video-js vjs-default-skin">
                <source id="source" src={src} />
                <source id="source" src={src} type="application/x-mpegURL" />
            </video>
        </div>
    );
};
export default forwardRef(VideoPlayer);