1.video,audio视频和音频的应用
<!doctype
html>
<html>
<head></head>
<body>
<!--<video
src="movie.webm"
controls="controls">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<hr
/>
多资源的视频播放
<video controls="controls"
width="500" height="500" autoplay="autoplay" loop="loop"
poster="PLMM.jpg">
<source src="movie.ogg"
type="video/ogg" />
<source src="movie.webm"
type="video/webm"
/>
您的浏览器不支持视频标签，还不赶快升级。
</video>-->
<hr
/>
使用以下VIDEO标签的API<br />
<video
src="movie.webm" controls="controls" id="video"
autoplay="autoplay">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<br
/>
<button
onClick="bofang()">播放</button>
<button
onClick="zanting()">暂停</button>
<button
onClick="kuaijin()">快进10秒</button>
<button
onClick="kuaitui()">快退10秒</button>
<button
onClick="shutup(this)">闭嘴</button>
<button
onClick="soso()">加速播放</button>
<button
onClick="yu()">减速播放</button>
<button
onClick="normal()">正常播放</button>
<button
onClick="upper()">提高嗓门</button>
<button
onClick="lower()">降低嗓门</button>
<script>
//获取对应的video标签
var
video=document.getElementById(‘video‘);
//播放方法
function
bofang(){
video.play();
}
//暂停方法
function
zanting(){
video.pause();
}
//快进10秒
function
kuaijin(){
video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
}
//快退10秒
function
kuaitui(){
video.currentTime-=10;
}
//静音按钮
function
shutup(obj){
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
//加速播放(3倍速度)
function
soso(){
video.playbackRate=3;
}
//慢速播放(慢三倍)
function
yu(){
video.playbackRate=1/3;
}
//正常倍速
function
normal(){
video.playbackRate=1;//默认的播放倍速是1
}
//调高声音
function
upper(){
video.volume+=0.2;//声音值的范围是0-1
}
//调低声音
function
lower(){
video.volume-=0.2;
}
</script>
<!--poster设置封面就是视频的封面--->
<video
controls="controls" height="500" width="500" poster = "PLMM.jpg"
loop="loop">
<source src="movie.webm"
type="video/webm">
<source src="movie.ogg"
type="video/ogg">
Your browser does not support the
video tag.
</video>
<hr
/>
音频标签的使用<br />
<audio
src="我的好兄弟.mp3"
controls="controls">
您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？
</audio>
</body>
</html>
2.html5拖放
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;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)">
<img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
3.什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
下面的例子是一个简单的 SVG矢量图圆 文件的例子。SVG 文件必须使用 .svg 后缀来保存：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>