这里讨论的是`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可以把当前的视频投放到支持此技术的其他设备上。）