关于前端:解决在ios中视频播放自动全屏问题

86次阅读

共计 699 个字符，预计需要花费 2 分钟才能阅读完成。

应用 video 标签在 html5 中播放视频时，视频主动全屏播放
解决方案：

ios 端 video 标签必须加 webkit-playsinline、playsinline 属性
android 端局部视频也会存在主动全屏问题，增加 webkit-playsinline 属性

在 html 中间接设置

<video src=""autoplay="true"muted="true"webkit-playsinline playsinline x5-video-player-type="h5-page">

应用 js 动静增加

const videos = document.querySelectorAll('video')
videos.forEach(item=>{item.removeAttribute('width')
  item.removeAttribute('height')
  // 解决视频在 ios 端播放默认全屏问题
  item.setAttribute('webkit-playsinline', '')
  item.setAttribute('playsinline', '')
  // 解决视频在局部安卓端播放默认全屏问题
  item.setAttribute('x5-video-player-type', 'h5-page')
  // 给 video 标签设置 css 款式
  item.style.width = '100%'
  item.style.borderColor = '#878484'
  item.style.borderWidth = '1px'
  item.style.borderStyle = 'solid'
  // 视频设置自动播放
  item.autoplay = 'true'
})

正文完