查看详情

前端实用的在线工具推荐系列（一）

caniuse caniuse 是一个在线查看浏览器的对某些特性的支持情况，如果你需要查看某些语法比如新的 ES6 语法 或者 H5 中一些新的 API （web worker, mediaSource等。作者还提供了一些开放的 API 让你将它嵌入到你的页面中。自己之前写过 《在自己的网站或者博客嵌入浏览器支持情况》 有兴趣的可以阅读下。 在线地址 icomoon.io icomoon.io 是一款在线生成 iconfont 或者 SVG sprite 的网站。你可以选择免费或者付费的字体图标（海量），然后会自动生成字体或者 SVG 代码，然后你可以打包下载，非常方便使用，比如自己的网站就采用了它生成的 SVG 图标。 在线地址 uigradients uigradients 是一款在线的编辑或者选择渐变的网站，你可以自定义渐变的色彩也可以从比较流行的渐变中选择一种，你可以获取到它的颜色值以及 css 代码片段。 base64-image base64-image 这个不必多说了，图片进行 Base64 压缩的网站，支持多种格式，包括 详情 »

查看详情

What learned from an open github project

Last year, I have tried to finish an interesting react-native project on my GitHub. React-native-percentage-circle is a component which supports you to define your percent data and draw a circle. And also you can use it as a progress bar and show some data in the circle. It does make a difference to my life. Opearation 详情 »

查看详情

美化 input range 控制条

平常我们使用制作进度条的时候都是想的用 div 去模拟，在 html5 后，我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式，这时候效果如图: 这个时候我们可以设置它的 border 或者 background 等信息。 如果是 chrome 或者 safari 浏览器，以及其他支持设置 设置控制条轨迹的样式的浏览器可以使用伪类 -webkit-slider-runnable-track 来设置控制条轨迹的背景和边框样式; input[type='range']::-webkit-slider-runnable-track{ background-color: #eee; } 而 firefox 则需要使用 ::-moz-range-track: input[type='range']::-moz-range-track{ background-color: 详情 »

查看详情

【译】iOS 上 video 标签的 的一些限制

原文地址: https://webkit.org/blog/6784/new-video-policies-for-ios/ @jernoble 如果接触过 ios 上的开发，在iphoneOS 3 的时候 safari 只允许用户与 video 进行交互的时候才会触发数据的加载。但是为了将更多的媒体播放控制权重新回到网页开发者，iOS 8放宽了这一限制：Safari开始支持 preload="metadata" 属性，允许<video>和<audio> 元素加载足够的媒体数据，以确定媒体的大小，持续时间和可用的轨迹。对于iOS 10中的 Safari，进一步放宽了对静音<video>元素的用户手势要求。 缘由 事实证明，人们很喜欢GIF。但与现代视频编解码器（如H.264）相比，GIF格式的编码方式与编码动画图像非常不具有性价比。我们发现，GIF的带宽可以高达十二倍。 详情 »

查看详情

探测浏览器对 video 和 audio 的兼容性

Detecting browser compatibility for HTML5 video and audio 原文链接 https://www.nomensa.com/blog/2011/detecting-browser-compatibility-html5-video-and-audio 近期接触播放器项目，所以对 video 除了基本的 api 的了解，还需要做好对应的兼容性。Chrome 最早在 11年开始了对于 video 的支持，不同的浏览器当时对于格式支持也是不同。 浏览器对于 video 元素的支持情况* 目前对于 其中对于 MPEG-4/H.264 的支持还是比较广泛的 至于大家比较关心的 webm ，在移动端和 safari 上支持还不是特别理想。 而最新的 HEVC/H.265 的支持情况浏览器方便的支持还是非常不理想。 好在 video 提供了一些列方法让我们能够探测到是否能够对给出的文件进行正常播放。 判断 mimeType 我们需要根据我们视频的类型然后去进行格式的判断以及其获取它的编码格式。 var get_ 详情 »

用户点击 ESC 退出全屏事件绑定

最近做视频相关，在全屏的时候之前 自以为捕获 esc 就可以了。也就是: document.addEventListener('keyup', (e) => { if (e.which === 27) { // your code } }) 然后实际上是没有什么效果，一查资料发现: When fullscreen mode is successfully engaged, the document which contains the element receives a fullscreenchange event. When fullscreen mode is exited, the document again receives a fullscreenchange event. 也就是实际上我们需要触发 fullscreenchange 事件来实现退出全屏的事件绑定。 function exitHandler() { const hideFunc = function() { // your 详情 »

查看详情

vue-core-image-upload 2.3.x is released

Recently we released the next version of vue-core-image-upload; The latest version (2.3.4) is not statable and you can view code change in the branch. So you can submit your bugs you met to the github issues New Features Now when you resize an image you uploaded, you will view a rotate-button. And you can 详情 »

查看详情

如何强制Html5视频进行全量加载

默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好： <video preload width="320" height="240" controls src="./static/videos/1.mp4"></video> 这个时候用户点击播放按钮就可以开始播放了。 但是为了更好的用户体验，我们有的时候需要预加载视频，比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。 此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。 None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。 Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。 Auto： 详情 »

查看详情

搭建 基于 Mocha + Webpack2 + Chai + ES6 前端单元测试

现在如果写某些类库的话，非常注重单元测试，从而确保发版质量。大概测试框架也有很多，这里介绍比较常用的 前端测试框架技术选型。 安装 Karma npm install -g karma-cli 然后使用 karma 初始化配置: karma init 如果提醒，安装依赖，你只需输入: npm install karma --save-dev 然后再执行一次就好，系统会提醒你进行一些输入操作，你可以直接跳过。这个时候程序会自动创建 karma.conf.js 。 基本内容是： // Karma configuration // Generated on Wed Jul 12 2017 18:29:58 GMT+0800 (CST) module.exports = function(config) { config.set({ // base path that will 详情 »

查看详情

使用 canvas 旋转图片(一)

随着 html5 canvas 的 api支持，我们现在可以轻松的对图片进行一些处理，比如图片的放大，缩小，图片的裁剪和旋转。因为它可以接触到像素级别的操作，进行更加复杂的操作。 绘制一张图片 在 canvas 中绘制一张图片 只需要利用到 drawImage 这个方法就可以实现。 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); drawImage 它可以接受九个参数(不一定全部传入) image: 它可以是一个 图片的 Image 元素，或者 Video ，Canvas 元素。 dx 表示在画布 x 轴的坐标值 dy 表示在画布 y 轴的坐标值 dWidth 表示在画布绘制的长度 dHeight 表示在画布绘制的高度 sx 表示在画布所绘制图片本身的 x轴 详情 »