ELF – 灵活可扩展的 HTML5 构建工具

ELF，意为小精灵，来自 War3 中暗夜精灵族的农民。 通常当我们开始一个新的 HTML5 场景营销活动项目时，需要创建项目目录，初始化基本的项目文件，然后再添加构建（grunt/gulp/webpack）相关的文件（一次两次三次…，像小精灵采木一样~)，目前有不少工具可以帮我们解决一部分这种重复性的工作，但不能完全的解决，于是，就有了小精灵 – ELF。 快速上手 1. 安装 通过 npm 全局安装（依赖的包比较多，推荐使用淘宝的 npm 镜像进行安装）

安装好后，可以运行 elf –help 查看支持的命令和帮助说明。 2. 初始化项目 假如我们现在要做一个向下整页滑屏的 HTML5 项目

这样一个向下整页滑屏的 HTML5 项目就已运行在开发模式上，样式预处理自动编译、样式热加载等功能早已具备，在此基础上，你就可以开始按照你的需求愉快的开发了。 3. 部署 当项目开发完成之后，需要将代码合并压缩用于部署，运行

会生成一个 dist 文件夹用于部署。 整个流程下来，基本解决了 HTML5 项目开发过程中项目初始化和构建部分的重复工作，已在团队内广泛使用，包括 Q4 京东品牌运营的10多个 H5 项目，如 皇家视频 京东精选 功能介绍 ELF 主要包括三部分功能：项目构建、示例模板和通用组件。 项目构建 现在在做 web 开发时，基本都会引入构建工具，常用的有 grunt、gulp 以及目前最流行的 […]

视频H5のVideo标签在微信里的坑和技巧

随着 4G 的普遍以及 WiFi 的广泛使用，手机上的网速已经足够稳定和高速，以视频为主的 HTML5 也越来越普遍了，相比帧动画，视频的表现更加丰富，前段时间开发了一个以视频为主的移动端 HTML5，在这里介绍一些实践经验。 统一播放效果 我们希望视频播放时可以全屏播放，没有进度条、播放按钮等与系统相关的元素，可以在视频上方增加自定义的元素（比如一个跳过按钮），类型下面的效果： 在不同的操作系统（主要就是 iOS 和 Android），为了达到比较统一的播放效果，分别对其进行兼容。 iOS 在 iOS 上，APP 都是使用的系统自带的浏览器进行页面渲染，video 播放视频的效果是统一的，只需要考虑不同的 iOS 版本是否有不一致的地方。在 iOS 上，播放视频默认会弹出一个播放器全屏播放视频，如下效果 播放器上下有的系统默认的控制栏，可以控制视频的播放进度、音量以及暂停或继续播放，播放视频时，视频会 “浮” 在页面上，页面上的所有元素都只能是在视频下面，这种效果显然不是我们想要的。 但好在 iOS 10 Safari 中，video 新增了  playsinline 属性，可以使视频内联播放。 在 webkit 的 blog 上提到  A note about the playsinline attribute: this attribute has recently been added to the HTML specification, […]