音频：audio
视频：video
音频：
audio：标签属性
属性 值 描述
atuoplay atuoplay 如果出现该属性，则音频在就绪后会马上播放
controls controls 则向用户显示控件，如：播放按钮
loop loop 则每当音频结束后会重新开始播放
src url 表示音频播放的URL地址
muted muted 规定音频输出被静音
preload preload 表示音频在页面上加载时进行加载，并且准备播放
audio对象方法：
方法 描述
addtextTrack() 表示向音频添加文本轨道
canplayType() 检查浏览器是否能够播放指定的音频文件
fastSeek() 表示在音频播放器中指定播放时间
getStartDate() 返回新的date对象，表示当前时间偏移量
load（） 重新加载音频元素
play（） 开始播放音频
pause（） 暂停当前播放的音频
视频：video
<video>标签属性
属性 值 描述
autoplay autoplay 表示视频在就绪后会立即播放、
controls controls 表示显示控件，如：暂停按钮
height pixeis 表示播放器的高度
loop loop 表示当媒介文件完成播放后再次开始播放
muted muted 表示在视频输出音频时被静音
poster URL 表示视频下载时显示的图像
preload preload 表示视频在页面中加载时进行加载，并准备播放
src url 表示视频播放的URL地址
width pixies 表示播放器的宽度
<video>对象方法：
方法 描述
addTextTrack() 向视频里添加文本轨迹
canplayType() 表示浏览器是否能够播放视频的类型
load（） 重新加载视频元素
play（） 开始播放视频
pause（） 暂停当前能播放的视频
多媒体标签的方法：
play():开播放音频和视频
pause()：暂停当前播放音频和视频
muted（）：设置返回音频或者视频是否静音
volume()：设置返回音视频的音量
currentTime():设置或返回音视频中当前播放的位置（以秒为单位）
duration():返回当前音频和视频的长度（以秒为单位）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 80%;
margin: 0 300px;
}
</style>
</head>
<body>
<div id="wrappoer">
<video src="mov_bbb.mp4" id="video"
controls="controls"
width="500px"
height="500px">
</video>
</div>
<div id="content">
<input type="button" name="playButton"
id="playButton" value="播放" onclick="play()"/>
<input type="button" name="pauseButton"
id="pauseButton" value="暂停" onclick="pause()"/>
<input type="button" name="mute"
id="mute" value="静音" onclick="mute()"/>
<input type="button" id="big" value="全屏"/>
<span>播放进度</span>
<progress value="0" id="progress"></progress>
<span>音量</span>
<input type="range" id="ran" value="50"
min="0" max="100" onchange="setVolumn()"/>
</div>
</body>
<script type="text/javascript">
var video = document.getElementById("video");
var playButton = document.getElementById("playButton");
var pauseButton = document.getElementById("pauseButton");
var progress = document.getElementById("progress");
var ran = document.getElementById("ran");
var big = document.getElementById("big");
big.onclick=function(){
// video.webkitRequestFullScreen() //兼容谷歌和safrai
video.mozRequestFullScreen() //兼容火狐
}
var vol;
function play(){
video.play();
playButton.disabled = true;
pauseButton.disabled = false;
setInterval("pro()",100);
}
function pro(){
progress.max = video.duration;
progress.value = video.currentTime;
}
function pause(){
video.pause();
playButton.disabled = false;
pauseButton.disabled = true;
}
//设置静音
function mute(){
if (video.muted == false) {
vol = ran.value;
ran.value = 0;
video.muted = true;
} else{
video.muted = false;
ran.value = vol;
}
}
//设置音量
video.volume = ran.value/100;
function setVolumn(){
video.volume = ran.value/100;
}
</script>
</html>