应用 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'
})