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 οnclick=”playPause()”>播放/暂停</button>
<button οnclick=”makeBig()”>大</button>
<button οnclick=”makeNormal()”>中</button>
<button οnclick=”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在网页上绘制图形。画布是一个矩形区域,你可以控制其每一个像素。