关于ios浏览器及各机型微信浏览器的video控件
2018-11-23 本文已影响0人
山北边的人
因为项目原因接触了html的video控件，过程中猜了不少坑，特此记录一下；
video在微信浏览器中容易出现很多问题 如点击播放默认全屏播放等，后经查找后，找到解决办法，如下
以下写法可以解决在ios和安卓微信中视频播放默认全屏的问题
<video style="object-fit: fill" src="XXXX.mp4"
webkit-playsinline="true"
x-webkit-airplay="true"
x5-playsinline="true"
playsinline="true"
width="100%" height="100%"
preload="auto"
poster=" "
controls="controls">
</video>
在ios中无论是Safari还是在ios应用中内嵌网页的视频用上述方法都不可以正常播放，需要使用以下方法
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
以上是我的解决办法，如有错误希望大家多多批评并帮忙指正
