你的位置:首页 > 网页设计

[网页设计]HTML5视频


<video>标签用于定义视频。

案例1:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video width="300" height="300" controls="controls">
<source src="gsd.mp4" type="video/mp4">
<source src="gsd.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
</body>
</html>

效果图1(浏览器支持)

 

效果图2(浏览器不支持)

注释:
(1)controls 用于向用户显示播放、暂停和音量按钮,属性值为:controls;
(2)autoplay 用于控制视频就绪后马上播放,属性值为:autoplay;
(3)loop 用于控制视频播放完成后再次开始播放,属性值为:loop;
(4)preload 用于控制视频在页面加载时进行加载,准备播放,若已经使用“autoplay”,则忽略该属性,属性值为:preload;
(5)src 视频链接,video元素允许多个格式不同的source元素,浏览器将会使用第一个可识别的格式;
(6)可以在<video></video>之间放置文本内容,这样浏览器可以显示不支持此标签的相关信息;
(7)<video>拥有方法、属性及事件play()、pause()等,案例如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function clickA(){
var a = document.getElementById("ex_1");
if(a.paused){
a.play();
}else{
a.pause();
}
}
</script>
</head>
<body>
<video id="ex_1" width="300" height="300" controls="controls">
<source src="gsd.mp4" type="video/mp4">
<source src="gsd.ogg" type="video/ogg">
您的浏览器不支持video标签
</video>
<br/>
<button onclick="clickA()">播放/暂停</button>
</body>
</html>

效果图:(浏览器支持情况下)