当前位置：首页 > 行业动态 > 正文

hrml5新的api

HTML5新增Canvas绘图、Geolocation定位、Web Storage本地存储及WebSockets实时通信等API，支持音视频原生播放与拖放功能，通过Web Workers实现多线程处理，IndexedDB提供结构化数据存储，显著提升网页交互性能与离线应用能力

HTML5 新 API 详解

多媒体 API

音频/视频控制（<audio> & <video>）

属性/方法 说明
controls 显示播放控件（如播放/暂停按钮、进度条）
autoplay 自动播放（需谨慎使用，可能被浏览器限制）
loop 循环播放
currentTime 获取/设置当前播放时间（单位：秒）
volume 设置音量（0.0~1.0）
ended 布尔值，表示播放是否结束

示例： 

<video src="movie.mp4" controls autoplay></video>

媒体事件监听

事件名 触发时机
play 开始播放时
pause 暂停时
ended 播放结束时
timeupdate 播放进度变化时（每秒触发一次）
error 加载或播放错误时

示例： 

const video = document.querySelector('video');
video.addEventListener('ended', () => {
  alert('视频播放完毕！');
});

通信 API

WebSockets API

属性/方法 说明
WebSocket(url) 创建 WebSocket 连接
onopen 连接成功时的回调
onmessage 接收到消息时的回调
onclose 连接关闭时的回调
send(data) 发送数据
close() 关闭连接

示例： 

const ws = new WebSocket('ws://example.com');
ws.onopen = () => console.log('连接成功');
ws.onmessage = (event) => console.log('收到消息:', event.data);

Server-Sent Events (SSE)

属性/方法 说明
EventSource(url) 创建 SSE 连接
onmessage 接收到消息时的回调
onerror 发生错误时的回调
close() 手动关闭连接

示例：

hrml5新的api 第1张

const es = new EventSource('sse-endpoint');
es.onmessage = (event) => console.log('推送消息:', event.data);

图形与动画 API

Canvas API

方法/属性 说明
getContext('2d') 获取 2D 绘图上下文
fillRect(x, y, w, h) 绘制填充矩形
strokeRect(x, y, w, h) 绘制矩形边框
arc(x, y, radius, start, end) 绘制圆弧
toDataURL() 导出为图片

示例： 

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillRect(10, 10, 100, 50); // 绘制矩形

SVG 支持增强

  • 直接嵌入 SVG：通过 <svg> 标签内联矢量图形。
  • CSS 样式控制：支持 fill、stroke 等属性的 CSS 定义。
  • JavaScript 操作：可通过 document.querySelector 操作 SVG 元素。

示例： 

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

地理定位 API

Geolocation API

方法/属性 说明
getCurrentPosition(successCallback, errorCallback) 获取当前位置
watchPosition(successCallback, errorCallback) 持续监听位置变化
clearWatch(id) 停止监听位置变化

示例： 

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((pos) => {
    console.log(`纬度: ${pos.coords.latitude}, 经度: ${pos.coords.longitude}`);
  });
}

本地存储与离线应用

Web Storage API

类型 说明
localStorage 持久化存储（数据长期保存，除非手动清除）
sessionStorage 会话级存储（页面关闭后数据消失）

关键方法：

  • setItem(key, value)：存储数据。
  • getItem(key)：获取数据。
  • removeItem(key)：删除指定数据。
  • clear()：清空所有数据。

示例： 

localStorage.setItem('username', 'JohnDoe');
console.log(localStorage.getItem('username')); // 输出: JohnDoe

IndexedDB API

  • 用途：存储大量结构化数据（如数据库）。
  • 特点：异步操作、支持事务、容量大（通常数 hundred MB~数 GB）。
  • 核心对象：IDBDatabase、IDBTransaction、IDBObjectStore。

相关问题与解答

问题 1：Canvas 和 SVG 的区别是什么？

解答：

  • Canvas：基于像素的绘图，适合动态渲染（如游戏、动画），一旦绘制完成，内容无法直接修改（需重绘）。
  • SVG：基于矢量的图形，适合静态图形（如图标、图表），支持 CSS 和 JavaScript 直接操作 DOM 元素。

问题 2：如何检测浏览器是否支持某个 HTML5 API？

解答：

  1. 特性检测：检查对象或属性是否存在。 
    if ('geolocation' in navigator) {
  // 支持地理定位 API
}
  2. 兼容性处理：提供备选方案。 
    const video = document.querySelector('video');
if (video.canPlayType('video/mp4')) {
  // 支持 MP4 格式
} else {
  // 提示用户浏览器不兼容
0

相关文章