从头整理学习。。然后加练习中。
以代码示例为主。
1. video
control 属性供添加播放、暂停和音量控件。
使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。
Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。
1 1 <video width="320" height="240" controls="controls">
2 2 <source src="/i/movie.ogg" type="video/ogg">
3 3 <source src="/i/movie.mp4" type="video/mp4">
4 4 Your browser does not support the video tag.
5 5 </video>
2 2 <source src="/i/movie.ogg" type="video/ogg">
3 3 <source src="/i/movie.mp4" type="video/mp4">
4 4 Your browser does not support the video tag.
5 5 </video>
| 方法 | 属性 | 事件 |
|---|---|---|
| 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 |
在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。
2. audio
很多用法与video一致~
1 <audio controls="controls">
2 <source src="song.ogg" type="audio/ogg">
3 <source src="song.mp3" type="audio/mpeg">
4 Your browser does not support the audio tag.
5 </audio>
2 <source src="song.ogg" type="audio/ogg">
3 <source src="song.mp3" type="audio/mpeg">
4 Your browser does not support the audio tag.
5 </audio>
3. 拖拽
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script type="text/javascript">
5 function allowDrop(ev)
6 {
7 ev.preventDefault();
8 }
9
10 function drag(ev)
11 {
12 ev.dataTransfer.setData("Text",ev.target.id);
13 }
14
15 function drop(ev)
16 {
17 ev.preventDefault();
18 var data=ev.dataTransfer.getData("Text");
19 ev.target.appendChild(document.getElementById(data));
20 }
21 </script>
22 </head>
23 <body>
24
25 <div id="div1" ondrop="drop(event)"
26 ondragover="allowDrop(event)"></div>
27 <img id="drag1" src="img_logo.gif" draggable="true"
28 ondragstart="drag(event)" width="336" height="69" />
29
30 </body>
31 </html>
2 <html>
3 <head>
4 <script type="text/javascript">
5 function allowDrop(ev)
6 {
7 ev.preventDefault();
8 }
9
10 function drag(ev)
11 {
12 ev.dataTransfer.setData("Text",ev.target.id);
13 }
14
15 function drop(ev)
16 {
17 ev.preventDefault();
18 var data=ev.dataTransfer.getData("Text");
19 ev.target.appendChild(document.getElementById(data));
20 }
21 </script>
22 </head>
23 <body>
24
25 <div id="div1" ondrop="drop(event)"
26 ondragover="allowDrop(event)"></div>
27 <img id="drag1" src="img_logo.gif" draggable="true"
28 ondragstart="drag(event)" width="336" height="69" />
29
30 </body>
31 </html>
1）为了使元素可拖动，把 draggable 属性设置为 true
2）拖动什么 - ondragstart 和 setData()
3）放到何处 - ondragover
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法 4. Canvas
需要JS辅助绘图。
画圆：
1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 cxt.fillStyle="#FF0000";
10 cxt.beginPath();
11 cxt.arc(70,18,18,0,Math.PI*2,true);
12 cxt.closePath();
13 cxt.fill();
14
15 </script>
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 cxt.fillStyle="#FF0000";
10 cxt.beginPath();
11 cxt.arc(70,18,18,0,Math.PI*2,true);
12 cxt.closePath();
13 cxt.fill();
14
15 </script>
画线：
1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 cxt.moveTo(10,10);
10 cxt.lineTo(150,50);
11 cxt.lineTo(10,50);
12 cxt.stroke();
13
14 </script>
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 cxt.moveTo(10,10);
10 cxt.lineTo(150,50);
11 cxt.lineTo(10,50);
12 cxt.stroke();
13
14 </script>
引入图片：
1 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 var img=new Image()
10 img.src="/i/eg_flower.png"
11 cxt.drawImage(img,0,0);
12
13 </script>
2 Your browser does not support the canvas element.
3 </canvas>
4
5 <script type="text/javascript">
6
7 var c=document.getElementById("myCanvas");
8 var cxt=c.getContext("2d");
9 var img=new Image()
10 img.src="/i/eg_flower.png"
11 cxt.drawImage(img,0,0);
12
13 </script>