什么是H5页面？_随笔

H5，是HTML5的简称，它就是一种高级网页技术。相比H4，H5有更多的交互和功能，最大的优点之一是在移动设备上支持多媒体。平时看到那些邀请函、幻灯片、小游戏??都是H5网页，它跟平时上网看到的那些网页本质上没有任何区别。

HTML 5 的第一份正式草案于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

扩展资料：

特性

1.语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

2.本地存储特性（Class: OFFLINE &STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

3.设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。

HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

4.连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。

HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

参考资料：百度百科——html5

首先使用node.js 搭建一个简易的 websocket服务器：

var cons = new Array()

var ws = require('ws').Server

var server = new ws({ port: 8888 })

server.on('connection', function (ws) {

console.log('new connection founded successfully')

cons.push(ws)

ws.on('message', function (data) {

for (var i = 0i <cons.lengthi++) {

cons[i].send(data)

}

})

ws.on('close', function () {

for (var i = 0i <cons.lengthi++) {

if (cons[i] == ws) cons.splice(i, 1)

}

})

console.log('websocket-server running...')

接下来为了更容易理解，我在这分为两个页面，一个为视频者页面，另一个是观看者页面

下面代码为视频者页面：

<!DOCTYPE html>

<head>

$(function () {

var video = document.getElementById("video")

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d")

var w

if (navigator.webkitGetUserMedia) {

navigator.webkitGetUserMedia({ video: true }, function (stream) {

video.src = window.webkitURL.createObjectURL(stream)

video.play()

w = new WebSocket(url)

w.onopen = function () {

sendImg()

}

w.onmessage = function (e) {

sendImg()

}

}, function () {

console.log("video error")

})

var host = 'localhost'

var port = 8888

var url = 'ws://' + host + ':' + port + '/'

function sendImg() {

context.drawImage(video, 0, 0, 320, 320)

var imgData = canvas.toDataURL()

w.send(imgData)

}

})

</script>

</head>

<body>

</body>

</html>

接下来是观看者页面：

<!DOCTYPE html>

<head>

$(function () {

var host = 'localhost'

var port = 8888

var url = 'ws://' + host + ':' + port + '/'

var w = new WebSocket(url)

w.onmessage = function (e) {

$("#canvas").attr("src", e.data)

}

})

</script>

</head>

<body>

</body>

</html>

注：希望可以帮到你!

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7066110.html

什么是H5页面？

发表评论

评论列表（0条）