您的位置：首页 > Web前端 > HTML5

HTML5多媒体播放知识点总结

2016-05-16 00:00 736 查看
摘要: html5的video和audio元素的属性，方法，事件的知识点总结。

一.属性

1.src:多媒体数据的URL地址

2..autoplay:自动播放

3.preload:预加载

4.poster(video独有的属性):指的是当视频不可用时，给用户展示的图片

5..loop:循环播放

6..controls:播放器的控制条

7..width和height( video独有的属性 ):video元素的长宽

8.error:播放出现错误的状态，具体状态参考手册

9.networkState:数据加载过程中读取当前的网络状态，具体状态参考手册

10..currentSrc :读取播放媒体数据的URL地址

11..buffered:

12.readyState:当前播放位置的就绪状态

13..seeking,seekable

14..currentTime:媒体当前播放的位置，startTime:播放的开始时间,duration:媒体播放的总时间

15..played,paused:是否暂停播放,ended:播放是否完毕

16..defaultPlaybackRate :修改和读取播放速率, playbackRate :修改和读取媒体当前的播放速率

17.volume:读取和修改媒体的音量，1表示最大音量，0表示静音。muted:true表示静音状态，false表示不静音状态。运用它时应更改它的状态，就像开关一样，每次都是我们自己开关。

二.方法

1.play()

2.pause()

3.load()

4.canPlayType()

三.事件

1.eventTester("loadstart"); //客户端开始请求数据

2. eventTester("progress"); //客户端正在请求数据

3. eventTester("suspend"); //延迟下载

4. eventTester("abort"); //客户端主动终止下载（不是因为错误引起），

5.eventTester("error"); //请求数据时遇到错误

6. eventTester("stalled"); //网速失速

7. eventTester("play"); //play()和autoplay开始播放时触发

8. eventTester("pause"); //pause()触发

9. eventTester("loadedmetadata"); //成功获取资源长度

10. eventTester("loadeddata"); //

11.eventTester("waiting"); //等待数据，并非错误

12.eventTester("playing"); //开始回放

13. eventTester("canplay"); //可以播放，但中途可能因为加载而暂停

14.eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕

15.eventTester("seeking"); //寻找中

16.eventTester("seeked"); //寻找完毕

17.eventTester("timeupdate"); //播放时间改变

18.eventTester("ended"); //播放结束

19.eventTester("ratechange"); //播放速率改变

20.eventTester("durationchange"); //资源长度改变

21.eventTester("volumechange"); //音量改变

四.自制视频播放器



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自制的视频播放器</title>
<script>
window.onload = function(){
var aV = document.getElementById('video');
var aInput = document.getElementsByTagName('input');
var aSpan = document.getElementsByTagName('span')[0];

aInput[0].onclick = function(){
if(aV.paused){
aV.play();
aInput[0].value = '暂停';
}else{
aV.pause();
this.value = '播放';
}
};
aInput[1].onclick = function(){
if(!aV.muted){
aV.volume = 0;
this.value = '放音';
aV.muted = true;
}else{
aV.volume = 1;
this.value = '静音';
aV.muted = false;
}
};
aInput[2].onOff = true;
aInput[2].onclick = function(){
if(this.onOff){
aV.style.width = document.documentElement.clientWidth + 'px';
aV.style.height = document.documentElement.clientHeight+ 'px';
this.onOff = false;
this.value = '退出全屏';
}else{
aV.style.width = 400 + 'px';
aV.style.height = 300 + 'px';
this.onOff = true;
this.value = '全屏';
}
};
aV.addEventListener('playing',function(){
aV.timer= setInterval(function(){
if(Math.floor(aV.currentTime) + 1 == Math.floor(aV.duration)){
clearInterval(aV.timer);
aInput[0].value = '播放';
}
aSpan.innerHTML= Math.floor(aV.currentTime) + '/'+ Math.floor(aV.duration);
},1000);
},false);
aV.addEventListener('pause',function(){
clearInterval(aV.timer);
},false);
};
</script>
<style>
video{border:1px solid #000;}
</style>
</head>

<body>
<video  poster='1.gif' width="400px" height='300px' id='video'>
<source src='Intermission-Walk-in_512kb.mp4'></source>
<source src='Intermission-Walk-in.ogv'></source>
</video>
<br/>
<input type='button' value='播放' />
<input type='button' value='静音' />
<input type='button' value='全屏' />
<span>/</span>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 前端开发 web前端 HTML5多媒体播放 前端工程师
相关文章推荐
新的分享
章节导航