HTML5有哪些新特征

2020-04-20 17:20:56易采站长站整理

一、HTML5 中的一些有趣的新特性:

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search
二、HTML5 视频<video>
1、视频格式

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
2、<video> 标签的属性

 *标签<source>规定多媒体资源,可以是多个
3、实例
  (1)
 
复制代码
<!DOCTYPE html PUBLIC “-//WC//DTD XHTML . Transitional//EN” “http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd”>
<html xmlns=”http://www.w.org//xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-” />
<title>视频</title>
</head>
<body>
<video src=”.%20HTML音频视频-编解码工具.mp” controls=”controls” width=”px” height=”px”></video>
</body>
</html>

  效果:

(2)HTML5 <video> – 使用 DOM 进行控制(用JS来控制视频的播放/暂停以及放大、缩小)

   <小知识:在JS函数里输入console.log("hello");表示在浏览器控制台输出hello,若控制台可以输出hello,则表示函数是可以调用的。

复制代码
<!DOCTYPE html PUBLIC “-//WC//DTD XHTML . Transitional//EN” “http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd”>
<html xmlns=”http://www.w.org//xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-” />
<title>视频</title>
</head>
<body>
<video id=”video” src=”.%20HTML音频视频-编解码工具.mp” width=”px” height=”px”></video>
<button onclick=”clickA()”>播放/暂停</button>
<button onclick=”clickBig()”>放大</button>
<button onclick=”clickSmall()”>缩小</button>