HTML5多媒体播放知识点总结

最新推荐文章于 2024-11-12 15:47:14 发布

chenzhong5173

最新推荐文章于 2024-11-12 15:47:14 发布

阅读量182

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/dreamchenming/blog/675979

版权

一.属性

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>

转载于:https://my.oschina.net/dreamchenming/blog/675979