微信中Video兼容问题

1. video标签行内属性

• src：视频的URL
• poster：视频封面，没有播放时显示的图片
• preload：预加载
• autoplay：自动播放
• loop：循环播放
• controls：浏览器自带的控制条
• width：视频宽度
• height：视频高度
• style="object-fit:fill" /加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小/
• webkit-playsinline="true" IOS微信浏览器支持小窗内播放
• x5-playsinline="true" IOS微信浏览器支持小窗内播放
• playsinline="true" IOS微信浏览器支持小窗内播放
• x-webkit-airplay="true" 支持ios的AirPlay功能
• airplay="true" 支持ios的AirPlay功能
• x5-video-player-type="h5" 启用同层H5播放器
• x5-video-player-fullscreen="true" 全屏设置
• x5-video-orientation="portraint" 竖屏封面铺满
• muted="true" 静音播放

解释

1、preload="auto" ：属性规定在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。

一般参数可能的值：

·        auto - 当页面加载后载入整个视频

·        meta - 当页面加载后只载入元数据

·        none - 当页面加载后不载入视频

2、muted：当设置该属性后，它规定视频的音频输出应该被静音

3、controls="controls" ：属性规定浏览器应该为视频提供播放控件。

4、autoplay="autoplay"： 视频自动播放设置，但是有经验的人都应该知道，autoplay标签在手机上不兼容，APP中设置问题导致无法自动播放，无论安卓或IOS。需要模拟自动播放只能通过一些事件触发。

5、webkit-playsinline playsinline：视频播放时局域播放，不脱离文档流 。但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而ISO的WeChat却支持。

这里就要补充下，如果是想做全屏直播或者全屏H5体验的用户，ISO需要设置删除 webkit-playsinline 标签，因为你设置 false 是不支持的 ，安卓则不需要，因为默认全屏。但这时候全屏是有播放控件的，无论你有没有设置control。 做直播的可能用得着播放控件，但是全屏H5是不需要的，那么去除全屏播放时候的控件，需要以下设置：同层播放。

6、x5-video-player-type：启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放，播放的时候看似全屏，但是已经除去了control和微信的导航栏，只留下"X"和"<"两键。目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。笔者想过为什么同层播放只对安卓开放，因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现，不同版本的ISO和安卓效果略有不同。

7、x5-video-orientation：声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式

8、x5­video­player­fullscreen：全屏设置。笔者还未能领悟这个标签的用意，在测试过程中发现，ture和false的设置会导致布局上的不一样，如图 Click标签先后的位置。

另外补充下，ISO 微信浏览器是Chrome的内核，相关的属性都支持，也是为什么X5同层播放不支持的原因。安卓微信浏览器是X5内核，一些属性标签比如playsinline就不支持，所以始终全屏。

2. 微信H5页面嵌入指定位置的小窗口视频

参考链接：
1、https://www.cnblogs.com/baiyy...