video 兼容性问题处理(小程序webview全屏横屏后样式错
2022-03-15 本文已影响0人
申_9a33
这里讨论的是Chrome,Safari,以及小程序嵌套webview 里面使用video标签的一些问题
- 问题1，在不给定背景色时，
Chrome默认时黑色，而Safari是透明 - 问题2，在小程序的
webview里面；先横屏全屏，在点击X关闭全屏时，样式错乱，竖屏点击X是正常的 - 问题代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div>
<video
width="100%"
height="auto"
src="http://101.36.105.242:9000/public-bucket/%E6%B5%8B%E8%AF%95%E6%AD%A3%E8%A7%84%E8%A7%86%E9%A2%91.mp4"
autoplay
controls
/>
</div>
</body>
</html>
1.video背景色不统一问题
- 直接给video一个默认背景色
#fff，使Chrome,Safari都默认为黑色
<style>
video{
background-color: black;
}
</style>
2.小程序webview全屏横屏后样式错乱
- 原因是小程序是，竖屏的，在webview中，video横屏全屏退出后，小程序是竖屏，video依旧是横屏，所以样式会错乱
- video竖屏全屏退出后，不会出现样式错乱的问题
- 问题解决后的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
video{
width: 100%;
object-fit: contain;
background-color: black;
}
</style>
<body>
<div>
<video
width="100%"
height="auto"
src="http://101.36.105.242:9000/public-bucket/%E6%B5%8B%E8%AF%95%E6%AD%A3%E8%A7%84%E8%A7%86%E9%A2%91.mp4"
preload="none"
x5-video-player-type="h5-page"
webkit-playsinline="true"
playsinline
x-webkit-airplay="allow"
mtt-playsinline="true"
autoplay
controls
/>
</div>
</body>
</html>
-
preload
- auto - 当页面加载后载入整个视频
- meta - 当页面加载后只载入元数据
- none - 当页面加载后不载入视频
-
x5-video-player-type
- 启用X5内核同层渲染，声明启用同层H5播放器，可以在视频上面放html元素
- 这个就是解决小程序webview,样式bug的关键
-
webkit-playsinline
- 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
-
x-webkit-airplay
- 允许airplay（通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。）
