»一款非常强悍的HTML5视频和音频播放器jPlayer
昨天向大家介绍了一款HTML5视频播放器VideoJS，效果还不错。今天要介绍的jPlayer也是基于HTML5的，不过与VideoJS不同是，jPlayer不仅支持播放视频，而且还能播放音频，并且提供了2套默认的皮肤，都非常漂亮，同时它也是基于jQuery的。 由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。所以为了方便大家欣赏和学习，我已经将几个demo整理好了...
»HTML5视频播放器VideoJS介绍【源码及示例】
好几天没更新博客了，接下来几天可能会给大家分享几个HTML5视频和音频播放器，敬请期待。 今天来分享一个HTML5视频播放器VideoJS。简单介绍一下VideoJS的特点。 开源，我们可以利用VideoJS的源码将它应用到自己的程序中，并且可以修改其源码，但要遵循开源协议。 轻量级，没有使用图片。 完全可以用CSS定制播放器的外观。 不依赖其他脚本库。 使用非常简单。 不仅使用简单，扩展也非...
»html5中使用Web SQL Database
WebSQLDatabaseAPI不包含在html5规范中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API。所有现代浏览器都支持此API。它使用的SQL是SQLite。 html5中使用 Localandsessionstorage本地存储非常的方便，键值对方式虽说是使用方便，但对一些大量的数据结构处理就力有不及了，而WebSQLDatabase正适合这种类型的数据存...
»HTML5中的8种表单验证方法详解
前一篇，我们介绍了HTML5中新的表单特性和函数，今天就继续来谈谈HTML5的表单验证。在深人探讨表单验证之前，让我们先思考一下表单验证的真实含义。就其核心而言，表单验证是一套系统，它为终端用户检测无效的控件数据并标记这些错误。换言之，表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误。 但是真正的表单验证是什么？ 是一种优化。 之所以说表单验证是一种优化，是因为仅通过表单验证机...
»HTML5中新的表单特性和函数
我们先来讨论HTML5新增的表单特性、函数和元素。如同新增的输人型控件一样，不管目标浏览器是否支持新增表单特性，我们都可以放心使用这些表单元素。因为市面上的浏览器在不支持这些表单特性时，会直接忽路它们，而不是报错。 1、placeholder 当用户还没有输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。这在目前流行的用户界面框架中很常见，而主流Javas...
»HTML5中WebSockets API使用详解
一、检测浏览器是否支持HTML5WebSockets 在使用HTML5WebSocketsAPI之前，首先需要确认浏览器的支持情况。如果浏览器不支持，我们可以提供一些替代信息，提示用户升级浏览器。下面的代码是检测浏览器支持情况的一种方法： functionloadDemo(){ if(window.WebSocket){ document.getElementById("support").in...
»HTML5结合jQuery实现图像灰度渐变效果
本文用示例向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前，实现这个效果需要两幅图像，彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效，因为灰色图像将会直接从原始文件生成。 示例：HTML5灰度渐变(http://webdesignerwall.com/demo/html5-grayscale/) 目的 这个示例的目的是向你展示如何使用...
»用HTML5绘制人脸
先看我们要绘制的人脸效果图： 你可以在线查看效果：在线演示 这里主要使用了HTML5的Canvas进行绘制。 下面我们开始整个绘制过程： 1.HTML(index.html) <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"/> <title>HTML5FaceBui...
»HTML5中XMLHttpRequest使用介绍
作为XMLHttpRequest的改进版，XMLHttpRequestLevel2在功能上有了很大的改进。本文主要从跨源XMLHttpRequest和进度事件（Progressevents）这两个方面来说明HTML5XMLHttpRequest的使用。 1、跨源XMLHttpRequest 过去，XMLHttpRequest仅限于同源通信。XMLHttpRequestLevel2通过CrossOr...
»HTML5中postMessage API使用方法介绍
本文将详细地介绍HTML5postMessageAPI的使用方法，希望能给大家带来帮助。 1、浏览器支持惰况检测 在调用postMessage之前，应该首先检测浏览器是否支持它。下面就是一种检测是否支持postMessage的方法: if(typeofwindow.postMessage===“undefined”){ //postMessagenotsupportedinthisbrowser...
»HTML5中Geolocation位置请求详解
目前，有两种类型的位置要求: 单次定位请求， 重复性的位置更新请求。 1.单次定位请求 在许多应用中，只检索或请求一次用户位置即可。例如，如果要查询在接下来的一个小时内放映某大片的最近的电影院，就可以使用以下代码所示的简单的HTML5GeolocationAPI。 voidgetCurrentPosition(inPositionCallbacksuccessCallback, inoptio...
»如何检查浏览器是否支持HTML5 Geolocation API
开发人员在调用HTML5GeolocationAPI函数前，需要确保浏览器支持其所要完成的所有工作。这样，当浏览器不支持时，就可以提供一些替代文本，以提示用户升级浏览器或安装插件(如Gears)来增强现有浏览器功能。下面的代码是浏览器支持性检查的一种途径。 functionloadDemo(){ if(navigator.geolocation){ document.getElementById...
»HTML5中使用video元素播放视频
我们已经讨论了很多简单的应用。后面的示例中，我们将尝试提高一些复杂度。HTML5video元素同audio元素非常类似，只是比audio元素多了一些特性，关于audio元素的使用，可以参考上一篇文章。video元素的特性见下表： 特性 值 poster 在视频加载完成之前，代表视频内容的图片的URL地址，可以想象一下“电影海报”。该特性不仅可读，而...
»HTML5中使用audio元素播放音乐
如果你已经了解了HTML5中的audio元素和video元素的共享特性，那就基本认识了audio元索所能提供的功能。我们直接看一个简单的示例，它演示了如何通过脚本来控制audio元素。 激活audio元素 如果需要在用户交互界面上播放一段音乐，同时不想被时间轴和控制界面影响页面显示效果，则可创建一个隐藏的audio元素——不设置controls特性，或将其设置为false——然后用自行开发的控制界...
»HTML5如何判断浏览器是否支持audio和video元素
上一篇我们对HTML5中的audio元素和video元素做了一个概览，最后也留下了一个如何检测浏览器是否支持audio和video的问题，这篇文章我们就来解决这个问题。 在HTML5下检测浏览器是否支持audio元素或video元素最简单的方式是用脚本动态创建它，然后检测特定函数是否存在: varhasVideo=!!(document.createElement('video').canPla...