赞
踩
HTML 5 的 <video>
视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ;
可以在 <video>
视频标签 中 放 ogg 和 mp4 两种格式的视频 , 所有的浏览器都可以播放视频 ;
如果浏览器的版本太老 , 什么格式都不支持 ;
视频标签 video 语法格式 :
<video src="url地址" controls="controls"></video>
视频标签 video 属性简介 :
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
</style>
</head>
<body>
<video src="media/fengjing.mp4" controls="controls"></video>
</body>
</html>
执行结果 :
默认状态 :
播放视频后效果 :
通过修改 video 标签的宽度 , 修改视频尺寸 ;
video {
width: 400px;
}
修改后的代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
video {
width: 400px;
}
</style>
</head>
<body>
<video src="media/fengjing.mp4" controls="controls"></video>
</body>
</html>
显示效果 :
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 视频标签示例</title>
<style>
video {
width: 400px;
}
</style>
</head>
<body>
<!-- 浏览器加载页面 , 发现 video 标签
读取该 video 标签 , 发现第一个 source 字标签 , 该标签配置 mp4 视频文件
- 如果浏览器支持 mp4 就播放该 mp4 文件
- 如果不支持 mp4 格式 , 则继续读取下一行
第二个 source 标签配置的是 ogg 格式的视频文件
- 如果浏览器支持 ogg 就播放该 ogg 文件
- 如果不支持 ogg 格式 , 则继续读取下一行 显示提示信息 -->
<video autoplay="autoplay" muted="muted" loop="loop" poster="media/pig.jpg">
<source src="media/fengjing.mp4" type="video/mp4" />
<source src="media/fengjing.ogg" type="video/ogg" />
很抱歉 , 当前浏览器不支持现有视频格式 ~
</video>
</body>
</html>
执行结果 :
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。