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

HTML5学习之四：多媒体播放

2015-10-06 23:56 447 查看

（本内容部分节选自《HTML 5从入门到精通》)

就是新增了audio和video，它们有很多属性，我也不想在此一一探究，不过可以看一下下面的示例：

效果图：

1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>多媒体</title>
6 <script language="javascript">
7 var video = document.getElementById('video0')[0],
8 <!--通过querySelector方法获取div标签中的class值，然后赋值给变量-->
9 wrapper = document.querySelector('.videochrome'),
10 buffer = document.querySelector('.videochrome.controls.buffer'),
11 playhead = buffer.querySelector('.playhead'),
12 play = wrapper.querySelector('.play'),
13 duration = wrapper.querySelector('.duration'),
14 currentTime = playhead.querySelector('span');
15
16 video.addEventListener('loadeddata', canplay, false);//监听准备播放事件
17 function canplay(){
18 	initControls();
19 }
20 function initControls(){
21 	duration.innerHTML = asTime(video.duration);//播放时间以分和秒的形式输出
22 	play.onclick = function(){
23 		if(video.ended){//如果播放结束，从0开始，不然，三元运算决定播放还暂停
24 			video.currentTime = 0;
25 		}
26 		video[video.paused ? 'play' : 'pause']();
27 	};
28 }
29 function asTime(t){
30 	t = Math.round(t);
31 	var s = t % 60;
32 	var m = ~~(t / 60);
33 	return m +':'+ two(s);
34 }
35 function two(s){
36 	/*--if(s<10){
37 		return "0"+s;
38 	}
39 	else{
40 		return s;
41 	}*/
42 	s += "";
43 	if(s.length<2) s="0"+s;
44 	return s;
45 }
46
47 video.addEventListener('play', playEvent, false);//事件播放监听
48 video.addEventListener('pause', pausedEvent, false);
49 video.addEvnetListener('ended', function(){
50 	this.pause();
51 },false);
52 function playEvent(){play.innerHTML = '暂停';}
53 function pausedEvent(){play.innerHTML = '播放';}
54
55 video.addEventListener('durationchange', updateSeekable, false);
56 video.addEventListenre('timeupdate', updatePlayhead, false);
57 function updateSeekable(){duration.innerHTML=asTime(video.duration);}
58 function updatePlayhead(){currentTime.innerHTML=asTime(video.currentTime);}
59 </script>
60 </head>
61 <body>
62 <video controls id="video0" width="425" height="344" src="video/Frozen.Fever.mov"></video>
63 <div class="videochrome paused">
64 <div class="controls">
65 <div class="scrub">
66 <table width="150" border="0" cellpadding="0" cellspacing="0">
67 	<tr>
68     	<td width="50" scope="row"><button class="play" title="play">播放</button></td>
69         <td width="50" align="center"><div class="duration">0:00</div></td>
70         <td width="50" align="center"><div class="loaded"><div class="buffer"><div class="playhead"><span>0:00</span></div></div></div></td>
71     </tr>
72 </table>
73 </div>
74 </div>
75 </div>
76 </body>
77 </html>
78

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航