html5学习笔记一
HTML5学习笔记
<video>标记:定义视频，Ogg、MPEG4、WebM三种格式
<video src=”movie.ogg” controls=”controls”>
您的浏览器不支持video标签。（提供不支持video元素的浏览器显示）
</video>
这个标签有的属性：
controls:向用户显示该控件，比如播放、暂停、音量按钮
height,width定义高宽
autoplay:如果出现该属性，则视频在就绪后马上播放
loop:如果出现该属性，完成播放后再次开始播放
preload:如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用”autotype”，则忽略该属性。
src:要播放的视频的url
子标签：
source定义源文件，<video>可以有多个source元素，浏览器使用第一个可识别的格式：
<video width=”320” height=”240” controls=”controls”>
<source src=”movie.ogg” type=”video/ogg”>
<source src=”moive.mp4” type=”video/mp4”>
Your brower does not support the video tag.
<video>
Viedo+DOM:
html5<video>元素同样拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<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 |
|
例子：
<html>
<body>
<div style=”text-align:center;”>
<button onclick=”playPause()”>播放/暂停</button>
<button onclick=”makeBig()”>大</button>
<button onclick=”makeNormal()”>中</button>
<button onclick=”makeSmall()”>小</button>
<br/>
<video id=”video1” width=”420” style=”margin-top:15px;”>
<source src=”/example/html5/mov_bbb.mp4” type=”video/mp4”/>
<source src=”/example/html5/mov_bbb.mp4” type=”video/ogg”/>
Your browser does not support HTML5 video.
</video>
</div>
<script type=”text/javascript”>
Vvar myVideo=document.getElementById(“video1”);
function playPause(){
if(myVideo.pause){myVideo.play();}
else myVideo.pause();
}
function makeBig(){
myVideo.width=560;
}
function makeNormal(){
myVideo.width=420;
}
function makeSmall(){
myVideo.width=320;
}
</script>
</body>
</html>
<audio>标记：定义音频
<audio src=”someaudio.wav” controls=”controls”>
您的浏览器不支持audio标签
</audio>
|
属性 |
值 |
描述 |
|
autoplay |
如果出现该属性，则音频在就绪后马上播放。 |
|
|
controls |
如果出现该属性，则向用户显示控件，比如播放按钮。 |
|
|
loop |
如果出现该属性，则每当音频结束时重新开始播放。 |
|
|
preload |
如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
|
|
url |
要播放的音频的 URL。 |
<canvas>标记：定义图形，比如图标和其他图像
<canvas id=”myCanvas”></canvas>
<script type=”text/javascript”>
var canvas=document.getElementByID(“myCanvas”);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000’;
ctx.fillRect(0,0,80,100);
</script>
Html5的canvas元素使用javascript在网页上绘制图形。画布是一个矩形区域，你可以控制其每一个像素。
