您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
HTML5音视频介绍
发布时间：2015-05-18 00:37:51编辑：雪饮阅读（）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<!--
单视频的引入，controls="controls"属性为html5的默认播放器控件
video标签中的提示文字是在浏览器不支持video标签时才显示的
-->
<video src="_RENDER_.webm" controls>
雪饮个人博客温馨提示，你的浏览器不支持video标签，请更换浏览器后来观看本视频
</video>
<hr/>
<!--
多视频的引入，下面引入了两个视频，分别是不同的类型不同的视频文件
浏览器在多个视频中进行识别，会加载当前浏览器所支持的那个视频，如果多个视频都支持则默认加载第一个，这样以来如果我们要兼容多个浏览器可以播放就可以将一个视频多转码几个类型，都分别引入进来。
另外需要判断如果当前浏览器不支持video标签就会输出引入资源列表标签下面的提示信息
width和heigth分别定义视频的宽高
autoplay属性不在用户同意的情况下刚加载完网页就直接播放视频
loop属性可以使视频循环播放
poster属性定义视频封面
-->
<video cont<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="7.jpg" id="video">
<source src="Miley Cyrus - Wrecking Ball (Vorbis-VEVO-1080p-Vp8).webm" type="video/webm" />
<source src="movie.ogg" type="video/ogg" />
雪饮个人博客温馨提示，你的浏览器不支持video标签，请更换浏览器后来观看本视频
</video>
<!--
html5中精简了html4中按钮的声明，直接用button标签代替，而不是像html4中需要设置其类型
-->
<button onClick="Fastforward()">快进</button>
<button onClick="mute()">静音</button>
<button onClick="addspend()">加速播放</button>
<button onClick="Slowdown()">减速播放</button>
<button onClick="conventional()">常速播放</button>
<button onClick="upvolume()">增加音量</button>
<script type="text/javascript">
var video=document.getElementById("video");
function Fastforward(){
video.currentTime+=50;
//currentTime属性获取video标签中当前播放视频的当前时间
}
function mute(){
video.muted=true;
//muted属性可以使当前视频静音
}
function addspend(){
video.playbackRate=2;
//playbackRate属性可以设置视频的播放速度（倍数），那么要减速可以设置为1/2
}
function Slowdown(){
video.playbackRate=1/2;
}
function conventional(){
video.playbackRate=1;
}
function upvolume(){
video.volume+=1/2;
//volume属性可以获得当前视频音量值，值的单元音量值是0.1
}
</script>
<hr/>
<!--音频标签audio和视频标签video基本一致，只是仅仅保留了音频部分所需属性等-->
<audio src="董贞 - 幽狐.mp3" controls="controls" />
雪饮个人博客提醒你，你的浏览器不支持audio标签，请更换后重试
</audio>
</body>
</html>
案例源码下载：http://pan.baidu.com/s/1qWvAdNu
关键字词：html5,视频,个人博客
下一篇：canvas标签介绍