今天,大多数的视频是通过插件(比如Flash) 来显示的,然而并非所有浏览器都拥有同样的插件。
HTML5规定了一种通过video元素来包含视频的标准方法。
视频格式
video元素支持三种视频格式:
Ogg
MPEG 4
WebM
使用方式
<video src="movie.ogg" controls="controls">video>
同视频一样,现在还不存在在网页上播放音频的标准,HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
音频格式
使用方式
<audio src="song.ogg" controls="controls">audio>
之间插入的内容是供不支持 audio 元素的浏览器显示的
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
audio>
draggable 属性值设为true, 元素即可拖动
<img id="drag1" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true"
ondragstart="drag(event)" />
拖动事件
ondragstart 事件 调用drag() 方法,它规定了被拖动的数据; dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover 事件规定在何处放置被拖动的数据。
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法
进行放置-ondrop
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
完整代码
<html>
<head>
<style type="text/css">
#div1 {
width: 198px;
height: 66px;
padding: 10px;
border: 1px solid #aaaaaa;
}
style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
script>
head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<img id="drag1" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true"
ondragstart="drag(event)" />
body>
html>
参考连接
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
<canvas id="myCanvas" width="200" height="100">canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
绘制矩形
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
绘制路径
使用路径绘制图形步骤:
需要用到的方法:
相比于JPEG和GIF等其他图像格式,SVG优势在于:
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
svg>
Canvas
SVG
二者比较
使用getCurrentPosition() 方法来获取用户的位置。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<p id="demo">点击这个按钮,获得您的坐标:p>
<button onclick="getLocation()">试一下button>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else { x.innerHTML = "Geolocation is not supported by this browser."; }
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
script>
body>
html>
getCurrentPosition() 方法-返回数据
若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
实例:
localStorage.lastname="Smith";
document.write(localStorage.lastname);
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
实例
localStorage.lastname="Smith";
document.write(localStorage.lastname);
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
浏览器支持
所有主流浏览器均支持应用程序缓存,除了 Internet Explorer。
实例
<html manifest="demo.appcache">
<body>
The content of the document......
body>
html>
如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:
<html manifest="demo.appcache">
...
html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
请注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。
Manifest 文件
manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。
manifest 文件可分为三个部分:
CACHE MANIFEST
第一行,CACHE MANIFEST,是必需的:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面的 manifest 文件列出了三个资源:
一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
NETWORK
下面的 NETWORK 小节规定文件 “login.asp” 永远不会被缓存,且离线时是不可用的:
NETWORK:
login.asp
可以使用星号来指示所有其他资源/文件都需要因特网连接:
NETWORK:
*
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 “404.html” 替代 /html5/ 目录中的所有文件:
FALLBACK:
/html5/ /404.html
**注释:**第一个 URI 是资源,第二个是替补。
更新缓存
一旦应用被缓存,它就会保持缓存直到发生下列情况:
实例-完整的Manifest文件
CACHE MANIFEST
# 2020-10-31 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
web worker 是运行在后台的 JavaScript,不会影响页面的性能
什么是Web Worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
浏览器支持
所有主流浏览器均支持 web worker,除了 Internet Explorer。
创建web worker 文件
var i=0;
function timedCount(){
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
创建Web Worker对象
从HTML页面调用web worker 文件
if(typeof(w)=="undefined"){
w=new Worker("demo_workers.js");
}
然后我们就可以从 web worker 发生和接收消息了。向 web worker 添加一个 “onmessage” 事件监听器:
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
终止Web Worker
当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w.terminate();
Web Workers 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket是HTML5中的协议,与http没有关系,支持持久连续,http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接,HTTP1.1中的keep-alive,将多个http请求合并为1个
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
Socket.readyState: 只读属性readyState表示连接状态,可以是一下值:
Socket.bufferedAmount: 只读属性bufferedAmount 已被send() 放入正在队列中等待传输,但是还没有发出的UTF-8文本字节数