一、HTML5有哪些新特性
1.用于媒体播放的<audio>、<video>
2.用于绘画的<canvas>
3.更好的支持本地离线存储
4.新的特殊内容元素,如:article、header、footer、nav等
5.新的表单控件,如:calendar、date、time、email、url、search
二、音频和视频播放
1.简单的音频播放和视频播放
<video width="100%" height="80%" src="./media/CoolShow_02.mp4" controls="controls">你的浏览器不支持该标签</video>
<audio src="./media/My_Destiny.mp3" controls="controls">你的浏览器不支持该元素</audio>
上面的controls属性使用的是<video>和<audio>自带的播放控件,如播放控制、声音控制、全屏控制等。
2.格式问题
由于不同的浏览器支持的播放格式不同,如何实现在不同的浏览器上使用相同的代码?
html5提供了<resource>标签,可以同时提供多套视频格式,浏览器会自动使用第一个能识别的视频格式。
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持该标签
</video>
3.自定义按钮实现播放/暂停、画面大小控制。
<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>
4.视频编解码工具
1)编解码工具
FFmpeg
2)使用命令行进行转码
指令,进入需要转码的文件的路径
cd D:\a
然后,执行转码指令
D:\a>
D:\ffmpeg\bin\ffmpeg -i
a.mp3 -acodec libvorbis
b.mp4
D:\ffmpeg\bin\ffmpeg:为下载的转码工具的路径
三、拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 488px;
height: 370px;
background-color: #aaaaaa;
}
img {
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
//设置拖拽对象,以id的形式进行标记
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//取得对象,存放
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");//获得要拖拽的元素的id
// ev.target.appendChild(document.getElementById("drag1"));
ev.target.appendChild(document.getElementById(data));//2种都可以
}
</script>
</head>
<body>
<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div><br/>
<img id="drag1" src="header.jpg" draggable="true" οndragstart="drag(event)"/>
</body>
</html>
canvas元素本身是没有绘图能力的,所有的绘制工作必须在js中完成。
1.绘制线条
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #FF0000;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");//创建context对象,起始坐标(0,0)
cxt.moveTo(10, 10);//moveTO:移动画笔,不连线
cxt.lineTo(150, 50);//lineTo:连线
cxt.lineTo(10, 50);
cxt.lineTo(10,10);
cxt.stroke();
</script>
</body>
</html>
2.绘制圆形,填充
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000"; //填充颜色
cxt.beginPath();
//参数分别为:圆心坐标x,y,半径,起始弧度,和终止弧度
cxt.arc(70,38,35,4,Math.PI*2,true); //填充的参数
cxt.closePath();
cxt.fill();//完成填充
</script>
</body>
</html>
3.绘制渐变色,使用渐变色进行填充
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var grd = cxt.createLinearGradient(0, 0, 180, 30);//与渐变有关的一些参数值
grd.addColorStop(0, "#FF0000");//起始颜色
grd.addColorStop(1, "#00FF00");//结束颜色
cxt.fillStyle = grd; //将渐变色设置为填充颜色
cxt.fillRect(0, 0, 175, 60);//填充区域
</script>
</body>
</html>
五、SVG
和canvas相似,区别在于SVG绘制的图是可伸缩的矢量图,不依赖与分辨率。
1.绘制五角星
<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200">
<polygon points="100,10,40,180,190,60,10,60,160,180"
style="fill:lime;stroke: purple;stroke-width:5;fill-rule: evenodd;">
</polygon>
</svg>
</body>
</html>
六、Geolocation地理定位