video H5微信点击播放自动全屏

本身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"
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值