HTML5教程-优快云博客

本文链接：https://blog.youkuaiyun.com/u012988966/article/details/38757267

本文概要介绍了HTML5中的视频、音频播放技术，包括使用<video>和<audio>元素，以及如何实现拖放操作和使用canvas进行图像绘制。此外，还详细讲解了Web存储解决方案，包括localStorage和sessionStorage，以及应用缓存和WebWorker的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.HTML 视频

Web 上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

主流浏览器支持的视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

1.在浏览器显示视频：

内容在浏览器上不显示

</video>

control属性将在浏览器显示播放控件，比如暂停，快进....

2.加入source元素

一些格式再一些浏览器不能支持，比如.ogg格式再ie和Safari不能支持，

加入source元素解决不兼容问题

</video>

ie8不支持video元素

video属性标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

3.HTML5 <video> 使用HTML DOM控制

大多数浏览器支持的方法，属性，事件

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

利用DOM来控制视频：

<script type="text/javascript">
var myVideo=document.getElementById("video1");//获取对象

function playPause()
{ 
if (myVideo.paused)//视频是否是停止
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()//调整大小
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 
</script>

二.音频

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。

音频格式：

主流浏览器支持的音频格式：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

1.使用<audio>来播放音频

内容浏览器不能显示

</audio>

2.加入source来解决兼容问题

<source src="music.mp3" type="audio/mpeg"

</audio>

3.<audio>的属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。

三.HTML5 拖放

拖放(drag 和 drop)是HTML5的标准组成.

拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放实例：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();//阻止对元素的默认处理（drop 事件的默认行为是以链接形式打开）
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);//设置被拖数据的数据类型和值，"Text"设置为文本类型,值为可拖动元素的ID
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");//接受被拖动元素的值
ev.target.appendChild(document.getElementById(data));//在放置的元素添加被拖动元素
}
</script>
</head>
<body>

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div><!--ondrop事件：在放置数据时触发  ondragover事件：把数据拖至目标元素，但未放置时触发 -->
<img id="drag1" src="img_logo.gif" draggable="true" οndragstart="drag(event)" width="336" height="69" /><!--draggable：true为可拖动对象 ondragstart:刚开始拖动数据时触发-->

</body>
</html>

拖动的步骤：

1.将数据设置为可拖动对象draggable="true",并通过dataTransfer.setData(); 来设置传递的数据类型和值(用ondragstart事件)
2.调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）(用ondragover事件)
3.通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。(用ondrop事件)
4.通过dataTransfer.appendChild() 将元素追加到放置元素内

四.画布

canvas元素

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例：画红色矩形

<!--创建canvas元素-->
<canvas id="canvas" height="200" width="200"></canvas><!--canvas本身不会绘画得通过javascript来进行绘画-->
/*利用javascript来进行绘画：*/
var canvas = document.getElementById("canvas");
var gct = canvas.getContext("2d");//方法返回一个用于在画布上绘图的环境。
gct.fillStyle="#FF0000";//填充颜色
gct.fillRect(0,0,150,150);//坐标(0,0)的位置用红色开始绘制一个height150 width150的矩形

实例：红色实心圆

<!--创建canvas元素-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
/*利用javascript来绘画*/
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();一个画布中开始子路径的一个新的集合
cxt.arc(70,18,15,9,Math.PI*2,true);//画圆弧,arc(x, y, radius, startAngle, endAngle, counterclockwise),xy为圆心坐标,radius为半径,
cxt.closePath();
cxt.fill();
</script>

实例：图像放到画布上

<!--创建canvas：-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas>
<!--利用javascript画图-->
<script>
var canvas = document.getElementById("myCanvas");
var gct = canvas.getContext("2d");
var image = new Image();
image.src=url;
gct.drawImage(image,0,0);//画图像
</script>

五.WEB 存储

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

创建localStorage实例：

<script type="text/javascript">

localStorage.lastname="Smith";//创建localStorage对象
document.write("Last name: " + localStorage.lastname);//访问

</script>

实例：累计访问次数

<script type="text/javascript">
if (localStorage.pagecount)//判断是否以前有访问过
{
  localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
  localStorage.pagecount=1;//没有访问初始化为1次
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

创建sessionStorage 实例：

<script type="text/javascript">

sessionStorage.lastname="Smith";//创建localStorage对象
document.write("Last name: " + sessionStorage.lastname);//访问

</script>

实例：累计访问次数，在关闭浏览窗口时重计

<pre name="code" class="javascript"><script type="text/javascript">
if (sessionStorage.pagecount)
{
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else

  sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

六.应用缓存

什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

Cache Manifest 实例

<html manifest="demo.appcache">
<head>
</head>
<body>
</body>
</html>

Manifest文件

demo.appcache

CACHE MANIFEST
# 2014-09-10 Google Chrome 37.0.2062.103
CACHE:
# 直接缓存的文件
NETWORK:
# 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK:
# 在此标题下列出的文件规定当页面无法访问时的回退页面

七.WEB WORKER

运行在后台的JavaScript脚本

实例

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}

外部文件：demo_workers.js

function fun(){

postMessage(i);
}