关于javascript:微信中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、x5videoplayerfullscreen：全屏设置。笔者还未能领悟这个标签的用意，在测试过程中发现，ture和false的设置会导致布局上的不一样，如图 Click标签先后的地位。

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

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

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