0

我正在制作一个带有 html5 视频和音频的轮播。一切正常，但是当我点击选项按钮（三个点按钮）时，播放器消失了。视频和音频都会发生这种情况，仅在轮播内部，播放器在外部工作正常。

我已经使用了该react-slick组件，这是我的简单代码：

<Slider {...settings}>
    { (this.props.thePost || []).map((media, i) => {
        if (media.media_type == 'image') {
            return (
                <div className={"imageWrapper"} key={"theMedia-"+p.id+i}>
                    <img src={ endpoint.mediaRoot +'/'+ this.props.thePost[i].media_url } />
                </div>
            );
        }
        else if (media.media_type == 'video') {
            return (
                <div className="playerWrapper video" key={"theMedia-"+p.id+i} style={{ width:"100%"}}>
                    <Player src={ endpoint.mediaRoot +'/'+ this.props.thePost[videoIndex].media_url } />
                </div>
            );
        }
        else if (media.media_type == 'audio') {
            return (
                <div className="playerWrapper audio" key={"theMedia-"+p.id+i} style={{ width:"100%;"}}>
                    <div className="audioPlayer">
                        <Player src={ endpoint.mediaRoot +'/'+ this.props.thePost[audioIndex].media_url } />
                    </div>
                </div>
            );
        }
    })}
</Slider>

我认为这个问题与transform: translate3d(-500px, 0px, 0px)slick 用来在幻灯片中滚动的（500px 只是一个例子）有关。我试图将 3d 转换添加到播放器的包装（在轮播之外），这破坏了覆盖的位置（下载/点在三个点上单击打开）。有没有办法来解决这个问题？

先感谢您。

4

0 回答 0