音频: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="播放" οnclick="play()"/> <input type="button" name="pauseButton" id="pauseButton" value="暂停" οnclick="pause()"/> <input type="button" name="mute" id="mute" value="静音" οnclick="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" οnchange="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.οnclick=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>