在iPhone Safari version 9.3.2
或chrome
上,当我将其检查到移动设备时,当我滚动滑块时甚至当我在不同的浏览器标签之间导航时iframe闪烁可见,尽管封面图像是"在顶部"。
似乎问题来自缓冲状态,因为当我切换标签并返回页面时,它将值更新为3(缓冲),显示视频一毫秒,然后显示背面图像封面。
有没有办法避免它?
反应代码:
const VideoState = {
UNSTARTED: -1,
ENDED: 0,
PLAYING: 1,
PAUSED: 2,
BUFFERING: 3,
CUED: 5
};
this.state = {
player: null,
showCover: true,
videoInitialised: false
};
onStateChange(event) {
const { showCover } = this.state;
if (this.coverTimeout && event.data === VideoState.BUFFERING) {
window.clearTimeout(this.coverTimeout);
}
if ((event.data === VideoState.PLAYING || event.data === VideoState.BUFFERING) && showCover) {
this.setState({
showCover: false
});
} else if ((event.data === VideoState.PAUSED || event.data === VideoState.ENDED || event.data === VideoState.UNSTARTED) && !showCover) {
this.coverTimeout = window.setTimeout(() => {
this.setState({
showCover: true
});
}, 250);
}
}