共计 2178 个字符，预计需要花费 6 分钟才能阅读完成。
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 页面嵌入指定地位的小窗口视频
<video id=”video” class=”video” src=”./media/video.mp4″ poster=”./images/poster.png” preload=”none” x5-video-player-type=”h5″ x5-video-player-fullscreen=”true” x-webkit-airplay=”true” airplay=”allow” webkit-playsinline=”true” playsinline=”true”></video>
参考链接：
1、https://www.cnblogs.com/baiyy…