h5页面 ios和andriod加载完以后显示空白/无法加载第一帧

import React, { useState, useRef, useEffect } from 'react';
import PlayIcon from '@/assets/play.png';
import VideoLoadIcon from '../../assets/03.gif';
import './index.less';

const VideoPlay = ({ item }) => {
    const timer = useRef();
    const [showVideo,setShowVideo] = useState(false);
    const imgId = item.id+'-img';

    useEffect(() => {
        if(window.WeixinJSBridge){
            WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                WeixinJSBridge.invoke('playVideo', {
                    'url': item.src || item.attributes.src, // 视频地址
                }, function(res) {
                    const video = document.getElementById(item.id);
                    // 回调处理
                    video.pause();
                    video.muted = false;
                });
            });
        }
        // timer.current = setTimeout(() => {
        //     const imgEle = document.getElementById(imgId);
        //     let video = document.getElementById(item.id);
        //     // // 设置视频的开始时间
        //     // if(video){
        //         video.currentTime = 0.2;
        //     // }
        //     imgEle.classList.remove('hidden');
        //     setShowVideo(true);
        //     clearTimeout(timer.current);
        // },1000);
        return() => {
            if(timer.current){
                clearTimeout(timer.current);
            }
        }
    },[]);
    const handleClick = (id,imgId) => {
        const myVideo = document.getElementById(id);
        try {
            if(myVideo){
                myVideo?.play();
                myVideo.controls = true;
            }
           
        } catch (error) {
            console.log(error)
        }
      
        
    }
    const pauseVideo = (id,imgId,style,controls) => {
        const imgEle = document.getElementById(imgId);
        try {
            imgEle.classList.add('hidden');
        } catch (error) {
            console.log(error)
        }
    }
  
   const handleLoadComplete = () => {
    let video = document.getElementById(item.id);
    // 设置视频的开始时间
    video.currentTime = 0.2;
    setShowVideo(true);
   }

    return(
        <>
            <div key={item.id}  className='video-container' >
                <video  
                    disablePictureInPicture 
                    controlsList="nodownload  noremoteplayback "
                    id={item.id}  
                    onPlay={() => pauseVideo(item.id,imgId,'none',true)}
                    onPause={() => pauseVideo(item.id,imgId,'inline-block',false)}
                    preload="metadata"
                    muted={true} 
                    onLoadedMetadata={handleLoadComplete}
                >
                    <source src={(item.src || item.attributes.src)}  ></source>
                </video>
                <img className={`video-play ${showVideo?'':'hidden'}`}  id={imgId} onClick={() => handleClick(item.id,imgId)} alt='播放' src={PlayIcon} />
                <div className={`load-vide-con ${showVideo?'hidden':''}`} >
                    <img alt='' src={VideoLoadIcon} />
                    <span>加载中</span>
                </div>
            </div>
        </>
    )
}

export default VideoPlay;

.video-container{
    position: relative;
    display: inline-block;
    width: 320px;
    .video-play{
        width: 40px;
        height: 40px;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        cursor: pointer;
    }
    .load-vide-con{
        background-color: rgba(0,0,0,0.08);
        border-radius: 16px;
        width: 320px;
        height: 180px; 
        position: absolute;
        top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img{
            width: 34px;
            height: 34px;
            margin-bottom: 4px;
        }
        span{
            color: rgba(0,0,0,0.46);
            font-size: 12px;
        }
    }
    .hidden{
        display: none;
    }
}

.video-progress{
   height: 20px;
   width: 320px;
}

/*音量按钮*/
video::-webkit-media-controls-volume-control-container {
    display: none !important;
}

*::-webkit-media-controls-start-playback-button {
    display: none ;
    -webkit-appearance: none;
}
 
  
 
  
// /* 针对Chrome浏览器的样式 */
// video::-webkit-media-controls-panel {
//     display: none;
// }
 
// /* 针对Firefox浏览器的样式 */
// video::-moz-media-controls-toggle {
//     display: none;
// }
 
// /* 针对Edge浏览器的样式 */
// video::-ms-media-controls-fullscreen-button {
//     display: none;
// }