白色烟雾、黑色烟雾
- video + css3 属性 mix-blend-mode 实现呼之欲出的烟雾效果
mix-blend-mode
混合模式
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
注意：IE 不兼容
滤色 screen
screen 混合模式，国内称为 “滤色”，其计算公式是：
公式中的 C 表示最终混合的 RGB 色值（范围是 0-255），A 和 B 表示用来混合的两个颜色的 RGB 色值（范围也是 0-255）。
- 特性一：滤色 screen，黑色与任意颜色混合，最终颜色还是任意颜色
- 特性二：滤色 screen，白色与任意颜色混合，最终颜色还是白色
X5 内核兼容性
同层页面内播放
同层页面内播放是标准的视频播放形态，在 video 标签中添加且只需要添加一个 (不要与 x5-playsinline 同时存在):x5-video-player-type='h5-page' 属性来控制网页内部同层播放，可以在视频上方显示 html 元素
video.play()
X5 内核自 TBS3.8 及以后在事件处理这块跟移动端标准对齐，只有用户点击视频或者用户点击操作的时间周期内 js 调用了 video.play () 才可以正常播放。
x5 内核视频自动播放
X5 内核作为 webview，具备自动播放能力，但这能力的控制权交由 TBS 宿主控制（安卓微信、手机 QQ、QQ 浏览器及其它第三方接入），宿主可以通过 IX5WebViewExtension 的 invokeMiscMethod(String method, Bundle bundle) 来决定是否允许前端页面实现自动播放。
method = "setVideoPlaybackRequiresUserGesture";
//val为true或false。
bundle = new Bundle(); bundle.setBoolean("require", val);
yourWebView.getX5WebViewExtension().invokeMiscMethod(method, bundle);
IOS 播放自动全屏
WKWebView 配置
configuration.allowsInlineMediaPlayback = YES;
html
<video
webkit-playsinline="true"
playsinline="true">
</video>