码迷,mamicode.com
首页 > Web开发 > 详细

HTML5视频

时间:2015-04-09 14:59:31      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

<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>

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

技术分享




HTML5视频

标签:

原文地址:http://www.cnblogs.com/bingling2015/p/4403327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!