HTML5 video 元素及获取视频播放事件

Html5 的扩展极大的方便了web开发. 比如视频播放,在Html5 之前,全部依赖 flash / 银光 这样的插件. video 元素 Html5 的 video 元素扩展出来非常多的方法,属性,事件 等. 我们可以直接在此控件上播放,暂停 等操作. 现在,Safari 3以上、Firefox 4以上、Opera 10以上,以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持 表现形式: <video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>

node.js 单元测试 Unit Test 及 程序持续集成 CI 工具

JavaScript 单元测试、更因其执行环境复杂无比、自动化门槛超高. 目前 JavaScript 越来越复杂庞大,其实更需要单元测试来确保品质. 但是由于 PhantomJS、Travis CI 等工具… 写 JavaScript 单元测试变得轻松许多. 今天来聊一下关于 javascript 单元测试 Unit Test 及 CI 持续集成工具. Unit Test 单元测试 我们常写一些工具类的 JavaScript Function、甚至包装成组件、以方便未来重复使用. 单元测试 (Unit Test) 是另外一份代码、用来检查这些代码的正确性. 例如过去我们得替自己撰写 t

如何把别人项目代码修改后 提交到github

首先你需要了解基本的 git相关知识 如果你从 github 上clone了别人的代码,本地做了一些修改后,直接提交可能会遇到一些问题,首先需要你输入用户名,接着输入密码,最后返回错误提示信息. 试想一下,如果你可以把 clone 下来的代码随意修改完后,还能随意提交到github服务器,那整个开源生态可能要彻底乱为一团. 所以不让你提交就对了. 那如何把 clone 后修改的代码提交到 github 呢? github上 不是有个fork么, 好,那么给别人的项目提交代码的方式就有了,先fork下别人的代码,于是你的github上就出现了同名的项目,这个项目就属于你自己了

[转] github上 fork + Pull Request 开发模式

4.1. Fork + Pull模式 参与GitHub中的项目开发,最常用和推荐的首选方式是“Fork + Pull”模式。在“Fork + Pull”模式下,项目参与者不必向项目创建者申请提交权限,而是在自己的托管空间下建立项目的派生(Fork)。 如果一个开源项目派生出另外的项目,通常意味着项目的分裂和开发团队的削弱,而GitHub中的项目派生则不会,而且正好相反,GitHub中的项目派生是项目壮大的体现。所有的派生项目都会有链接指向原始项目,派生项目没有独立的缺陷追踪系统(ISSUE),而是必须利用创建者本人的项目中的缺陷追踪系统。至于在派生项目中创建的提交,可以非常方便地利用GitH

用Gitlab 在linux 上搭建自己的 git 服务器

如何在 linux 上使用 gitlab 搭建自己的 git 服务器 gitlab 虽然 GitWeb 相当简单。 但如果你正在寻找一个更现代,功能更全的 Git 服务器,这里有几个开源的解决方案可供你选择安装。 因为 GitLab 是其中最出名的一个,我们将它作为示例并讨论它的安装和使用。 这比 GitWeb 要复杂的多并且需要更多的维护,但它的确是一个功能更全的选择。 安装 GitLab 是一个数据库支持的 web 应用,所以相比于其他 git 服务器,它的安装过程涉及到更多的东西。 幸运的是,这个过程有非常详细的文档说明和支持。 这里有一些可参考的方法帮你安装 GitLab 。 为

React 学习 JSX语法与原生HTML

JSX 可以看作JavaScript的拓展,看起来有点像XML。 使用React,可以进行JSX语法到JavaScript的转换。 为什么使用JSX 使用React,不一定非要使用JSX语法,可以使用原生的JS进行开发。但是React作者强烈建议我们使用JSX,因为JSX在定义类似HTML这种树形结构时,十分的简单明了。简明的代码结构更利于开发和维护。 XML有着开闭标签,在构建复杂的树形结构时,比函数调用和对象字面量更易读。看个直接的对比: //使用JSX React.render( <div> <div>

[随笔] http-server 快速创建node.js 静态服务器

说到node.js 创建服务器,首先想到 express 之前和大家分享过 关于http-server快速创建node服务 http-server 首先需要 全局安装 http-server npm install -g http-server http-server 启动 http-server -a 127.0.0.1 -p 7070 上面的一句命令启动了一个node.js 的静态服务器. 监听本地 7070 端口. 静态目录就是当前运行 命令所在的目录 如果你的当前项目中存在 public 文件夹,那么默认静态目录会指定到 public 如果没有 public

m3u8 跨平台 全兼容 移动 web在线视频 播放器

什么是m3u m3u是一个纯文本文件,虽然我们平时看到播放器首先加载了此文件,但是它并不是一个音频文件。 播放器并不是播放它,而是根据它的记录找到网络地址进行在线播放 什么是m3u8 m3u8 是在 m3u 格式下扩展出来的, 可以播流或者点播形式,目的是实现时实性及保密性它会不让你获取它的视频所在地址 浏览器使用的是 m3u8 文件。 m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。 播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。 整个直播过程就是依靠一个不断更新

NPM如何发布node模块到社区

如何把自己写的 node.js 模块发布到 npm 开源社区 有下面几个前提条件: 你需要是 npm 社区注册的会员 如果你还没有,点击下面的链接注册 https://www.npmjs.com/ 你的开发环境需要 安装node.js 和 npm 创建repository 接下来我们需要创建module所需的repository,默认你拥有一个github账号(如果没有自行解决),这个repository用来托管我们module的代码,并方便用户报告bug,最重要的是可以让其他开发者向module贡献代码,这也是乐趣所在。 初始化package.json 接下来我们创建pa

pormise Q 使用文档简单描述

关于 promise 介绍和使用方法 请点击浏览其他博客. 今天分享的是针对 Q 开源包 api 的简单白话版本. promise.then(onFulfilled, onRejected, onProgress) then 回调接收 3个参数 ,分别是 成功时,失败时,持续读取状态时 前两个函数对应Promise的两种状态的回调函数fulfiled 和 rejected,第三个函数用于处理进度信息 promise.catch(onRejected) promise 遇到异常时执行 promise.then(undefined, onRejected) 当catc

webpack 前端加载工具 让 浏览器端 javascript 执行 CommonJS规范

#为什么用webpack 如果我们 前端 javascript 能像 node.js 一样 require 去引用一个依赖包,那么前端的世界就不会像现在这么乱 现在为什么乱? 假设: a.js 依赖 b.js b.js 依赖 c.js c.js 依赖 d.js 如果在我们前端去引用这些依赖的时候,往往是这样的: <script src='a.js'></script> <script src='b.js'></script> <script src='c.js'></script> <scri

CommonJS 是什么 规范

概述 CommonJS是服务器端模块的规范,Node.js采用了这个规范。 根据CommonJS规范,一个单独的文件就是一个模块。 加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。下面就是一个简单的模块文件example.js。 console.log("evaluating example.js"); var invisible = function () { console.log("invisible"); } exports.message = "hi"; exports.say = function () { c

promise Q.all 方法使用 及 spread 分散返回结果

promise 规范 点击查看此博文了解 promise规范让你解脱callback回调噩梦 promise 规范 开源包 Q 使用 点击查看博文 node.js下如何使用q 当promise 遇到 forEach 当你的一个业务需要执行多个异步方法时,最后统一返回 计数器法 顾名思义,用一个计数器来统计遍历/调用函数的次数,最后一次统一返回结果 假设我们有一个 实现 promise 规范的函数 test var test=function(a){ var defer=Q.defer(); defer.resolve(a+1); return defer.p

levelDB 数据操作接口 实现 promise 规范

什么是levelDB google 公司开发的一款 高性能KV型nosql数据库 ,你可以点击链接查看以前的介绍. node.js 下使用leveldb 请移步到这里. 但是之前的所有leveldb 操作接口都是基于 callback 回调.所以今天这篇就是分享下leveldb 数据接口实现promise 规范. 什么是promise promise 规范让javascript拜托callback回调 请移步到上面的博文查看 levelup levelup 是 leveldb 在node.js 上的实现开源包. github地址: https://github.com/L

javascript 动态加载按顺序加载运行 js

javascript 在浏览器中的加载是如何的? 如何你的 script 上没有任何 异步,阻塞 等标注: 浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript Defer属性标记 defer是html4.0中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。 也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致. 但是defer属性在各个浏览器中支持程度有点不同,就是说,有的浏览器不完全支持. Async属性标注 as

react 组件生命周期 相关事件 方法

一般来说, React 组件是一个组件类由 extends Component 创建,并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法来定义。 一个简单的例子: import React, { Component } from 'react'; import { render } from 'react-dom'; class LikeButton extends Component { getInitialState() { return { liked: false }; } handleClick(e) { this.

React Native 学习 如何使用 style 样式

关于 React Native 学习 系列之如何定义css 样式 样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理。 声明样式 在 React Native 中声明样式的方法如下: var styles = StyleSheet.create({ base: { width: 38, height: 38, }, background: { backgroundColor: '#222222', }, active:

React 理解 及 与其它框架区别

在 React 下,我们需要考虑的,是每个组件在任意一个状态下应该怎么渲染。 (状态就是数据) React 会把这些组件装配成页面。 然后当数据更新后, React 又把新数据传给组件,于是又根据新数据重新渲染 React 把重新渲染的结果和之前渲染的结果进行比对,找出需要更新的部分,进行更新。 我们只需要正确的更新数据/状态,不必再在渲染时考虑数据发生了什么变化(例如是增加了一条记录还是减少了一条记录?增加到什么位置?不需要考虑这些也就不需要考虑我们在进行 DOM 操作时插入到哪里等问题)。 我们只需要指定好规则(即给出任意一种状态,这个组件应该怎么渲染),并正确的更新状态,这些

JSX 语法使用

利用 JSX 编写 DOM 结构,可以用原生的 HTML 标签,也可以直接像普通标签一样引用 React 组件。这两者约定通过大小写来区分,小写的字符串是 HTML 标签,大写开头的变量是 React 组件。 使用 HTML 标签: import React from 'react'; import { render } from 'react-dom'; var myDivElement = <div className="foo" />; render(myDivElement, document.getElementById('mountNode')); HTML 里

JSX 语法了解,我们为什么要学习它

传统的 MVC 是将模板放在其他地方,比如 script 标签或者模板文件,再在 JS 中通过某种手段引用模板。按照这种思路,想想多少次我们面对四处分散的模板片段不知所措?纠结模板引擎,纠结模板存放位置,纠结如何引用模板……下面是一段 React 官方的看法: We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and

MP4Box 借用HTML5 file api 本地读取 mp4 头信息

上一篇博文介绍了 html5 file api html5 提供了一套可以操作本地文件的 api ,但是有一定的局限性 必须由用户发起一个事件,所以你不要妄想着用户浏览器加载某个站点时,主动去读取他本地硬盘的资料....不可能的. 你的浏览器必须支持 html5 的 file api ,所以你也不要妄想去兼容IE6 用户发起行为比如: file upload 操作, 文件拖拽 等. 最近遇到一个需求 1.本地上传视频要保存到七牛服务器 2.提交切割视频任务 (大文件切割成多份) 3.返回视频截图 (按视频长短截取图片,供管理员审核视频内容) 七牛这边提供的有 j

HTML5读取 本地文件 File Api 使用

javascript 访问本地文件,已经成为可能. HTML5 file api 该规范主要定义了以下数据结构: File FileList Blob HTML5 访问文件和大部分语言是一致的,先获取文件句柄,然后调用文件访问接口,打开文件句柄,读取文件! 选择文件 首先检测一下当前浏览器是否支持File Api: function isSupportFileApi() { if(window.File && window.FileList && window.FileReader && window.Blob

node.js 下 promise 开源包 q 使用

promise 规范 可以让你从繁杂的 callback 中解脱出来. 如果我们在传统的 callback 中执行 5个 步骤,应该是下面这样的: setp1(function(res)){ setp2(function(res)){ setp3(function(res){ setp4(function(res){ setp5(function(res){ //终于执行完了 }); }); }); });

React Native 学习 安装 Android 运行环境

React Native 安卓应用程序所需要的开发环境的基本安装步骤 安装和配置 SDK 安装最新的 JDK. 安卓 SDK brew install android-sdk 将它添加到 ~/.bashrc, ~/.zshrc 或者任何其他您的 shell 所使用的路径: export ANDROID_HOME=/usr/local/opt/android-sdk 启动一个新的 shell 并且运行 android ➜ /Users/zhangzhi >android Android SDK 生成工具版本 23.0.1 Android 6.0 (API 23

React Native 中文版 安装 入门 环境部署

要求 OS X - 当前仅支持 OS X 推荐使用 Homebrew 的方式来安装 nvm,watchman 和 flow。 安装 Node.js 4.0 或者更新的版本。 使用 Homebrew 来安装 nvm 或者参考 它的安装指南。 接着运行 nvm install node && nvm alias default node, 它可以让您安装最新版本的 Node.js 并设置您的终端,所以你可以通过键入 node 来运行它。使用 Nvm 可以让您安装多个版本的 Node.js 并且在它们之间轻松切换。 npm 的更新之处。 brew 安装 wa

回到顶部