本身ios是支持自动全屏的,但是安卓不可以,所以引入了插件videojs,亲测没啥问题
<video
ref="video"
class="video-js vjs-default-skin"
preload="auto"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-video-orientation="landscape"
style='object-fit: contain;'>
</video>
this.player = this.$video(this.$refs.video, {
autoplay: false,
controls: true,
isFullscreen: true,
sources: [
{
src: 'xxx.mp4',
type: 'video/mp4'
}
],
controlBar: {
children: [
'playToggle',
'fullscreenToggle'
]
}
})
this.player.on('play', () => {
this.player.requestFullscreen()
}
当然如果有小伙伴不想要ios自动全屏,可以如下设置
// 阻止 ios 手机 点击播放 自动全屏
webkit-playsinline="true"
playsinline="true"