04、HTML5音视频
video
<video controls> //当video里面省略src时，video里面可以插入多个source，当第一个source的格式不支持时，接着使用第二个source... <source src="xxx.mp4"></source> <source src="xxx.webm"></source> <source src="xxx.ogv"></source> 您的浏览器不支持播放这个视频 //当所有的source都不支持时，显示这句话 </video>
src：视频的资源地址
controls：视频播放控件
source：可以放如src，如果播放失败，会继续看下一个source
video标签的支持格式：mp4、webm、ogv（其中ie8及以下不支持video标签，ie9及以上只支持mp4格式）
width：视频的宽度
height：视频的高度
注：两个一起用的话，vieo盒子生效，视频会按比例缩放到最中间的位置
autoplay：自动播放（在chrom浏览器中，默认被禁用）
loop：循环播放
poster：视频封面，没有播放时显示的图片
muted：视频默认静音状态（在chrom浏览器中设置autoplay和muted后，发现autoplay生效了）
video API 事件
<script type="text/javascript"> //code... </script>
play()
//让视频播放 var div = document.getElementById('dd'); div.play();
pause()
//让视频暂停 var div = document.getElementById('dd'); div.pause();
duration
//返回视频的总长度（以秒的形式）。一开始获取不到需要页面都加载完毕之后才能获取到（可以尝试用setTimeout） setTimeout(function(){ console.log(div.duration); },100);//100毫秒后执行
currentTime
//设置/返回当前视频的长度 （以秒为单位） console.log(div.currentTime); //返回当前已经播放了的视频长度 div.currentTime = 30; //把当前的视频长度设置为30秒
src
//设置/返回视频的来源 div.src = "xxx.mp4"; //更改或设置当前视频的src console.log(div.src); //返回当前视频的来源
volume
//设置/返回当前的音量大小(0-1) div.volume = 0.5; //设置当前音量为一半 console.log(div.volume); //返回当前的音量大小 //可以尝试用input的range类型来控制 <input type="range" min=0 max=100 value=50 id="range"> <script type = "text/javascript">
div.volume = 0.5; range.oninput = function(){ //当触发滑动杆的时候，更改音量 div.volume = this.value/100; } </script>
controls
//设置视频是否显示播放控件 div.controls = true; //true表示显示控件，false表示隐藏控件
muted
//设置视频是否静音 div.muted = true; //true表示静音，false表示非静音
networkState
//返回video上面的网络状态
0、未初始化
1、视频已经选区好资源，但是未使用网络
2、浏览器正在下载视频资源
3、未找到视频资源（一开始获取不到需要页面都加载完毕之后才能获取到（可以尝试用setTimeout））
currentSrc
//返回音视频的地址（必须是在音视频可以加载播放的时候才能返回，而且不能赋值）
ended
//返回当前视频是否结束，结束返回true，还没结束返回false
//可以用addEventListener监听事件，当监听到true的是否可以执行函数操作
loop
//设置或返回当前视频是否循环
console.log(videoNode.loop); //打印出视频是否循环，true/false videoNode.loop = false; //把视频设置为不循环
playbackRate
//设置或返回视频的播放速度
console.log(videoNode.playbackRate); //打印出视频的播放速度，默认是1 videoNode.playbackRate = 3; //把视频设置为3倍速度播放
readyState
//返回当前视频的就绪状态
0、没有视频的就绪信息
1、有数据，但是快不足以支撑
2、当前数据是可用的，但是没有数据来播放下一帧
3、数据正在缓冲，当前及下一帧是可用的
4、可用数据足以开始播放
timeupdate
//但视频播放时，执行函数的内容
dd.addEventListener('timeupdate',function(){
console.log("视频正在播放");
},false)
seeked
//当用户 已经完成 拖动进度条时触发，必须要用on
dd.onseeked = function(){ console.log("seeked...."); }
seeking
//当用户 开始 拖动进度条时触发，必须用on
dd.onseeking = function(){ console.log("seeking...."); }
//实践证明seeking的触发频率比seeked高
volumechange
//当音量已更改时触发，必须用on
dd.onvolumechange = function(){ console.log("声音已发生改变"); }
RequestFullScreen
//全屏，必须在用户的事件中调用，且谷歌内核(webkit)、火狐内核(moz)、IE内核(ms) 的方法都不一样
<input type="button" id="full" vallue="全屏" /> var full = document.getElementById('full');
full.onclick = function(){ if(dd.webkitRequestFullscreen) //webkit内核 dd.webkitRequestFullscreen(); else if(dd.mozReuestFullScreen) //moz内核 dd.mozRequestFullScreen(); else if() //IE内核 //code.... }
//如果视频没有加controls，想要退出全屏时，会自动加上controls
load
//重新加载视频资源
<input type="button" id="shuaxin" value = "刷新视频" /> var shuaxin = document.getElementById('shuaxin'); shuaxin.onclick = function(){ dd.load(); }
canplay
//视频已经加载好，可以播放时的事件
dd.addEventListener('canplay',function(){
console.log("视频已经加载好，可以正常播放");
})
audio
<audio controls>
//当audio里面省略src时，audio里面可以插入多个source，当第一个source的格式不支持时，接着使用第二个source...
<source src="xxx.mp3"></source>
<source src="xxx.wav"></source>
<source src="xxx.ogg"></source>
您的浏览器不支持播放这个音频
//当所有的source都不支持时，显示这句话
</audio>
src：音频的资源地址
controls：音频播放控件
source：可以放如src，如果播放失败，会继续看下一个source
audio标签的支持格式：mp3、wav、ogg（其中ie8及以下不支持audio标签，ie9及以上只支持mp3格式）
mp3（所有浏览器都支持）
wav（所有浏览器都支持）
ogg（safari不支持）
如果HTML没有audio标签，JavaScript可以生成如：
console.log(new Audio();); //生成<audio></audio>
autoplay
//chrome、opera浏览器不能自动播放音频，需要进行页面元素交互才能播放
muted
//静音属性
//就算有了这个属性，audio也不会自动播放
loop
//音频循环播放
注：audio不能直接在html里面添加width，需要在css中控制audio的width才能起作用。height也是，不过height只能起到占位的效果
audio API事件
跟video一样
play：当音频播放/不在暂停时
pause：当音频已经暂停时/不在播放时
duration：返回当前音频长度
currentTime：设置或返回当前音频的长度
src：设置/返回当前音频的来源
volume：设置/返回当前音频的音量
controls：设置音频是否显示控件
muted：设置音频是否静音
networkState：返回音频的当前网络状态
currentSrc：返回当前音频的url，不能更改
ended：返回音频的播放是否已结束
loop：设置或返回音频是否循环
playbackRate：设置或返回音频播放的速度
readyState：属性返回音频的当前就绪状态
timeupdate：当目前的音频位置已更改时
seeked：当用户已移动/跳跃到视频中新的位置时
seeking：当用户开始移动/跳跃到音频的新位置时
volumechange：当音量已更改时
load：重新加载音频资源
canplay：音频已准备好，可以开始播放
requestFulScreen：全屏
//用js创建的audio不能控制它全屏，只有在html创建的audio才行
浙公网安备 33010602011771号