解决在ios中视频播放自动全屏问题

2年前 (2022) 程序员胖胖胖虎阿
195 0 0

使用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'
})
版权声明:程序员胖胖胖虎阿 发表于 2022年11月4日 下午4:24。
转载请注明:解决在ios中视频播放自动全屏问题 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...