侧边栏(ios设备)使用video标签全屏后 只能听见声音 不能看见画面
侧边栏(ios设备)使用video标签全屏后 只能听见声音 不能看见画面 关闭侧边栏的时候 会看到全屏的video在页面后方 补充： 1、只有在ios设备+侧边栏的情况下有问题 2、ios设备+企业微信应用形式打开 没有问题 3、安卓设备+侧边栏 的情况下也没有问题 4、代码 function isFullscreen() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
)
}
function requestFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen()
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen()
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari & Opera */
elem.webkitRequestFullscreen()
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen()
}
}
class FullscreenVideo extends React.Component {
static propTypes = {
src: PropTypes.string,
}
static defaultProps = {
src: '',
}
componentDidMount() {
document.addEventListener('fullscreenchange', this.fsHandler)
document.addEventListener('webkitfullscreenchange', this.fsHandler)
document.addEventListener('mozfullscreenchange', this.fsHandler)
document.addEventListener('MSFullscreenChange', this.fsHandler)
}
componentWillUnmount() {
document.removeEventListener('fullscreenchange', this.fsHandler)
document.removeEventListener('webkitfullscreenchange', this.fsHandler)
document.removeEventListener('mozfullscreenchange', this.fsHandler)
document.removeEventListener('MSFullscreenChange', this.fsHandler)
}
fsHandler = () => {
if (!isFullscreen() && this.videoRef) {
this.videoRef.pause()
}
}
play = () => {
this.videoRef.play()
requestFullscreen(this.videoRef)
}
render() {
const {src} = this.props
return (
<video
ref={videoRef => (this.videoRef = videoRef)}
height="0"
width="100%"
webkitPlayinline
playinline
>
<source src={src} />
</video>
)
}
}
export default FullscreenVideo
