1. IOS中自动播放，默认全屏播放
解决方法：
// 给video标签设置以下属性
webkit-playsinline
playsinline
// 同时客户端配置：
webview.allowsInlineMediaPlayback = YES
// eg:
<video webkit-playsinline playsinline ></video>
2. IOS直接设置currentTime无效
在设置视频从什么时间开始播放（单位秒）时，IOS下直接设置currentTime不生效
解决办法：
// 监听canplay事件，设置currentTime，并且只监听一次，否则会一直被触发
// eg:
<video id="j_video"></video>
const video = document.getElementById('j\_video')
video.addEventListener(() => {
video.currentTime = 3
}, {once: true})
3. IOS 15下，视频未播放，poster显示不出来
解决办法：视频未播放时，显示img标签，视频播放之后，再显示video标签
// eg:
// html部分
<video ref="myvideo" v-show="play"></video>
<img v-show="!play" src="转存失败，建议直接上传图片文件 " alt="转存失败，建议直接上传图片文件">
// js部分
const play = ref(null)
const myvideo = ref(null)
myvideo && myvideo.play() && (play.value = true)
4. IOS下，直接执行video.play() 不生效
提示 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
解决办法：
// 先设置video的muted属性，再执行play方法
// eg:
<video id="j_video"></video>
const video = document.getElementById('j\_video')
video.muted = true
video.play()
5. OPPO安卓6系统，第一次点击视频元素，没反应（监听click事件）
解决办法：
// 1. 监听touchstart事件
// 能监听到，但是太敏感，容易误触发
// 2. 加同层div, 监听div的click事件
// eg:
<div class="video-outer" @click="handleClick"></div>
<video></video>
// js部分
const handleClick = (e) => {
e.preventDefault()
e.stopPropagation()
}
// css部分
.video-outer{
positon: relative;
top: 0:
left: 0;
bottom: 0;
right: 0;
z-index: 999;
opacity: 0
}
6. video元素
<video class="video-source"
width="100%"
controls /*这个属性规定浏览器为该视频提供播放控件*/
style="[object-fit:fill](http://object-fitfill/)" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x-webkit-airplay="true" /*airplay功能相关*/
x5-video-player-type="h5" /* 启用Ｈ5同层播放器,是wechat安卓版特性*/
x5-video-orientation="portraint" /*控制横竖屏，landscape横屏，portraint竖屏，默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置， ture和false，true支持全屏播放，false不支持全屏播放*/
preload="auto" /*这个属性规定页面加载完成后载入视频*/
</video>
参考资料
- HTML5 Video Events and API检测工具: www.w3.org/2010/05/vid…
- W3Cvideo标准: www.w3.org/TR/html5/em…
- HTML5 VIDEO bytes on iOS: www.stevesouders.com/blog/2013/0…
- github.com/gnipbao/ibl…
