audio video播放 组件控制

audio

	const AudioCom = () => {
		const audioRef = useRef<any>();
    	const [isPlay, setIsPlay] = useState(false);

    const listenCanPlayAudio = () => {
        if (audioRef.current) {
            audioRef.current.addEventListener('canplay', () => {
                audioRef.current.play();
                // setTimeout(() => {
                //     audioRef.current.play();
                // }, 100);
            });
        }
    };

    // 音乐播放
    const playMusic = () => {
        if (audioRef.current) {
            audioRef.current.play();
            try {
                const windowObj = window.windowObj || {};
                // 微信兼容
                if (windowObj.wx) {
                    windowObj.wx.ready(() => {
                        audioRef.current.play();
                    });
                }
            } catch (error) {}
        }
    };

    // 音乐暂停
    const pauseMusic = () => {
        if (audioRef.current) {
            audioRef.current.pause();
        }
    };

    // 音乐播放状态
    const listenMusicPlayStatus = () => {
        if (audioRef.current) {
            audioRef.current.addEventListener('play', () => {
                setIsPlay(true);
            });

            audioRef.current.addEventListener('pause', () => {
                setIsPlay(false);
            });
        }
    };

    // 点击音乐图标
    const clickMusicIcon = () => {
        if (isPlay) {
            // 播放中
            pauseMusic();
        } else {
            // 暂停
            playMusic();
        }
    };

    useEffect(() => {
        listenCanPlayAudio();
        listenMusicPlayStatus();
    }, []);

return  (<div>
	 		<div 
	 		onClick={() => {clickMusicIcon();}}
                className={isPlay ? styles.bgm : styles.bgmc}
            ></div>
        	<audio className={styles.audio} ref={audioRef} loop preload="preload" src={BGMUrl}></audio>
		</div>)
	}

export default AudioCom 
  

video

	import React, { useEffect, useRef, useState } from 'react';
	import './index.less';
	import videoUrl from 'src/assets/video.mp4';

const Loading = ({ onLoaded }) => {
    const loaddingRef = useRef<any>(null);
    const endedCallbackRef = useRef<any>(null);
    const [isOver, setIsOver] = useState(false);
    const timer = useRef<any>(); // 避免 ios 低电量下无法自动播放回调 设置回调时间

    useEffect(() => {
        const onCallback = () => {
            endedCallbackRef?.current?.();
            setIsOver(true);
        };

        if (loaddingRef?.current && loaddingRef?.current?.addEventListener) {
            loaddingRef?.current?.addEventListener?.('ended', onCallback);
        }
        return () => {
            loaddingRef?.current?.removeEventListener?.('ended', onCallback);
        };
    }, []);

    useEffect(() => {
            setIsOver(false);
            endedCallbackRef.current = onLoaded;
            loaddingRef.current.currentTime = 0;
            loaddingRef.current.play();
            timer.current = setTimeout(() => {
                console.log('倒计时2S 播放结束');
                setIsOver(true);
                onLoaded();
            }, 2000);
        
        return () => {
            clearTimeout(timer.current);
        };
    }, [onLoaded]);

    useEffect(() => {
        loaddingRef.current.currentTime = 0;
        loaddingRef.current.play();
    }, []);

    return (
        <div className="screenBox-loading" style={{ zIndex: `${isOver ? -1 : 99}` }}>
            <video
                className="screenBoxVideo"
                style={{ zIndex: `${isOver ? -1 : 99}` }}
                // 设定播放完后放入后面
                ref={loaddingRef}
                muted
                loop={false}
                playsInline
                poster={videoUrl}
            >
                <source src={videoUrl} type="video/mp4" />
            </video>
        </div>
    );
};

export default Loading;