html5方案,Html5标准

如何使用html5?

1、video src="hangge.mp4" controls/video1

成都创新互联是少有的成都做网站、成都网站制作、营销型企业网站、重庆小程序开发公司、手机APP,开发、制作、设计、买友情链接、推广优化一站式服务网络公司,成立与2013年,坚持透明化,价格低,无套路经营理念。让网页惊喜每一位访客多年来深受用户好评

2,通过width和height设置视频窗口大小

video src="hangge.mp4" controls width="400" height="300"/video1

3,预加载媒体文件

设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件:

(1)值为auto:让浏览器自动下载整个文件

(2)值为none:让浏览器不必预先下载文件

(3)值为metadata:让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)

!-- 用户点击播放才开始下载 --video src="hangge.mp4" controls preload="none"/video12

4,自动播放

(1)使用autoplay属性可以让浏览器加载完视频文件后立即播放。

video src="hangge.mp4" controls autoplay/video1

(2)如果启用自动播放,可以将播放器设置为muted状态。这样自动播放时会静音,防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

video src="hangge.mp4" controls autoplay muted/video1

5,循环播放

使用loop属性让视频播放结束时,再从头开始播放。

video src="hangge.mp4" controls loop/video1

6,设置替换视频的图片(封面图片)

通过poster属性可以设置,浏览器在下面三种情况下会使用这个图片:

(1)视频第一帧未加载完毕

(2)把preload属性设置为none

(3)没有找到指定的视频文件

video src="hangge.mp4" controls poster="hangge.png"/video1

7,浏览器兼容,如何让每一个浏览器都能顺利播放视频

现在大部分浏览器都能支持H.264格式的视频,但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频,通常有下面几种方案:

(1)使用多种视频格式

video和audio元素有个内置的格式后备系统。我们不使用src属性,而是在其内部嵌套一组source元素,浏览器会选择播放第一个它所支持的文件。

我们可以添加WebM格式的视频提供对Opera的支持。

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video1234

(2)添加Flash后备措施(推荐)

上面那个方法不推荐,应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的,同时Flash还能兼容IE8这种连video元素都不支持的老浏览器。

这里使用Flowplayer Flash作为备用播放器(本地下载 :flowplayer-3.2.18.zip)

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

object id="flowplayer" width="400" height="300"

data="flowplayer-3.2.18.swf"

type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

/object

/video1234567891011

(3)也有人优先使用Flash,而HTML5作为后备措施。

这么做是因为Flash普及率比较高,而HTML5作为后备可以扩展iPad和iPhone用户

object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"

param name="movie" value="flowplayer-3.2.18.swf"

param name="flashvars" value='config={"clip":"hangge.mp4"}'

video controls

source src="hangge.mp4" type="video/mp4"

source src="hangge.webm" type="video/webm"

/video

/object

使用 html5 怎么开发一个动态网站?

使用 html5 开发一个动态网站方法:

工具/原料

HBuilder6.6

MUI2.5

方法/步骤

为了演示HTML5 APP页面是如何做到动态调整布局。

1、首先,我们创建一个移动APP项目,然后,添加一个index.html页面。代码里,添加一个图标,以及添加引入一个JS文件,该文件的作用在于:请求后台JS文件。

2、接下来,我们看看service.js文件是如何请求后台JS文件的。编写该service.js文件的重点是:A、如何异步请求后台JS文件;B、请求回来的后台文件,如何动态添加到页面的Head里。

3、紧接着,我们对APP项目进行打包操作:选择需要的打包类型,然后,填写相应的证书信息。如果选择IOS打包,请在打包证书里,添加需要安装的苹果手机UDID(未提供UDID,则不能安装APP)。

4、打包完成后,便可以下载安装APP。先用苹果手机连接电脑,然后通过工具安装APP。当然,这种连接数据线安装的方式,只能适合个人测试使用。如果想给别人批量安装测试,请参考《HTML5 APP开发之APP测试》经验。

1HTML5 APP开发之APP测试

5、APP安装完成后,我们看看打开APP现有的效果是怎样的。我们看到APP页面的左上角,显示了一个联系人的图标。

6、由于菜果手机不同系列的屏幕大小不一样,而且屏幕的分辨率也不一样【安桌手机的也一样】。导致同一个页面布局,在不同的手机上,显示的位置有时偏差比较大,有时也好。当然,这也加大了开发和测试的难度。不可能因一些位置问题,就重新发布APP。下面是苹果手机不同系列的屏幕大小分辨率说明:

7、所以,才有了动态调试页面布局的想法。回到第二步,我们是有请求后台JS文件的(showJSPage.js)。下面看看showJSPage.js,是如何编写的:A、首先判断手机操作系统类型;B、判断屏幕大小。

8、添加了showJSPage.js代码后,启动后台服务。然后,关闭原来打开的APP软件,再重新打开APP软件,便可查看修改后的效果。

9、整个方案的理解重点在于:熟悉JS执行的先后顺序,以及对手机屏幕大小与屏幕分辨率的关系。才能灵活运用,达到自己想要的目的。

html5 本地存储有多少种方案

html5 本地存储有五种方案。

1、LocalStorage

LocalStorage就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用,示例代码如下:

function save(dataModel){

var value = dataModel.serialize();

window.localStorage['DataModel'] = value;

window.localStorage['DataCount'] = dataModel.size();

console.log(dataModel.size() + ' datas are saved');

return value;

}

function restore(dataModel){

var value = window.localStorage['DataModel'];

if(value){

dataModel.deserialize(value);

console.log(window.localStorage['DataCount'] + ' datas are restored');

return value;

}

return '';

}

function clear(){

if(window.localStorage['DataModel']){

console.log(window.localStorage['DataCount'] + ' datas are cleared');

delete window.localStorage['DataModel'];

delete window.localStorage['DataCount'];

}

}

2、Cookie

这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,举例如下:

function getCookieValue(name) {

if (document.cookie.length 0) {

var start = document.cookie.indexOf(name + "=");

if (start !== -1) {

start = start + name.length + 1;

var end = document.cookie.indexOf(";", start);

if (end === -1){

end = document.cookie.length;

}

return unescape(document.cookie.substring(start, end));

}

}

return '';

}

function save(dataModel) {

var value = dataModel.serialize();

document.cookie = 'DataModel=' + escape(value);

document.cookie = 'DataCount=' + dataModel.size();

console.log(dataModel.size() + ' datas are saved');

return value;

}

3、Indexed Database API

IndexedDB可以存储结构对象,可构建key和index的索引方式查找,目前各浏览器的已经逐渐支持IndexedDB的存储方式,其使用代码如下,需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式,特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式,因此和NodeJS一样使用上不如同步的代码容易。

function save(dataModel){

var tx = db.transaction("meters", "readwrite");

var store = tx.objectStore("meters");

dataModel.each(function(data){

store.put({

id: data.getId(),

tag: data.getTag(),

name: data.getName(),

meterValue: data.a('meter.value'),

meterAngle: data.a('meter.angle'),

p3: data.p3(),

r3: data.r3(),

s3: data.s3()

});

});

tx.oncomplete = function() {

console.log(dataModel.size() + ' datas are saved');

};

return dataModel.serialize();

}

4、FileSystem API

FileSystem API相当于操作本地文件的存储方式,目前支持浏览器不多,其接口标准也在发展制定变化中,因此也可以动态生成图片到本地文件,然后通过 filesystem:http:*** 的URL方式直接赋值给img的html元素的src访问。

function save(dataModel) {

var value = dataModel.serialize();

fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {

console.log(fileEntry.toURL());

fileEntry.createWriter(function (fileWriter) {

fileWriter.onwriteend = function () {

console.log(dataModel.size() + ' datas are saved');

};

var blob = new Blob([value], {type: 'text/plain'});

fileWriter.write(blob);

});

});

return value;

}

5、Application Cache

window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态:

var appCache = window.applicationCache;

switch (appCache.status) {

case appCache.UNCACHED: // UNCACHED == 0

return 'UNCACHED';

break;

case appCache.IDLE: // IDLE == 1

return 'IDLE';

break;

case appCache.CHECKING: // CHECKING == 2

return 'CHECKING';

break;

case appCache.DOWNLOADING: // DOWNLOADING == 3

return 'DOWNLOADING';

break;

case appCache.UPDATEREADY: // UPDATEREADY == 4

return 'UPDATEREADY';

break;

case appCache.OBSOLETE: // OBSOLETE == 5

return 'OBSOLETE';

break;

default:

return 'UKNOWN CACHE STATUS';

break;

};

HTML5是什么?具体是干什么的?

HTML的全称是超文本标记语言,是一种标记语言。它包括一系列标签,可以统一网络上文档的格式,将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本,可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言,它是一种标记语言。它包括一系列标签,可以统一网络上文档的格式,将分散的互联网资源连接成一个逻辑整体。


当前名称:html5方案,Html5标准
当前路径:http://myzitong.com/article/dsdeeec.html