HTML5的第二天——视频,音频

HTML5的第二天,我们主要学习了视频和音频。

目前实现网页视频播放的技术 - Flash,但是

     Flash并不是浏览器原生支持(第三方组件)

 Flash的性能并不好

 移动端不支持Flash技术

因此,就孕育出了用HTML5技术来实现视频播放效果.

HTML文档中,要想引入视频文件,其实只需要简单几步:

用双标签<video src=视频文件的路径></video>

其中,可以在video开始标签中添加以下属性,来实现不同的效果

autoplay属性 自动播放视频

width属性 设置视频的宽度

        height属性 设置视频的高度 

        style属性 设置CSS样式

class属性 设置CSS样式

        controls属性 提供控制面板

loop属性 循环播放

poster属性 播放之前实现一张图片

preload属性 预加载视频

 none - 不预加载

 auto - 默认值,尽快预加载

 metadata - 预加载除视频之外的内容(宽度、高度等)

 视频高级编程方式

       事件(video还有好几种事件)

         play - 视频播放时触发

  pause - 视频暂停时触发

  ended - 视频播放结束时触发

  error - 视频播放错误时触发

        方法

          play() - 用于播放视频

  pause() - 用于暂停视频

  load() - 用于加载视频

  canPlayType() - 判断当前浏览器是否支持当前视频格式

        属性

          paused - 如果视频为暂停或未播放时,返回true

  ended - 如果视频播放完毕时,返回true

 

  duration - 返回当前视频的时长

  currentTime - 获取或设置视频的当前位置

而音频audio的使用方法跟radio基本类似。为了更好地说明这两种效果,自己就用一个小小的案例来演示吧,这样比单纯的文字记起来快一点。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
	#btn{
		font-size:18px;
		background:#90C841;
		border-radius:5px;
	}
	#adv{
		position:absolute;
		top:61px;
		left:160px;
		width:320px;
		height:132px;
	}
	#img{
		width:320px;
		height:132px;
		position:absolute;
		top:61px;
		left:160px;
		display:none;
	}
  </style>
 </head>

 <body>
	<!--
	需求:1.一打开页面,就会有背景音乐播放
		  2.页面上有一个视频框,并且在视频没有打开之前,画面上有一张图片固定在页面上,并且还有一个小广告
		  3.点击播放或者暂停时,就会出现相应效果
		  4.视频的播放和暂停时通过底下的button按钮来自行控制
		  5.当视频结束后,显示在页面上的还是在正中间的提示图片
	-->
<audio id="audio" src="DATA/S.I.N.G女团 - 灵儿想叮当.mp3" autoplay loop></audio>
<video id="video" src="DATA/oceans-clip.mp4" poster="DATA/oceans-clip.png"></video><br>
<img id="adv" src="DATA/1448466638609.jpg">
<img id="img" src="DATA/oceans-clip.png">
<input id="btn" type="button" value="播放">
<script>
	var video=document.getElementById("video");
	var btn=document.getElementById("btn");
	var adv=document.getElementById("adv");
	var img=document.getElementById("img");
	//给button绑定单击事件
	btn.onclick=function(){
		if(video.paused){
			video.play();
			btn.value="暂停";
			adv.style.display="none";
		}else{
			video.pause();
			btn.value="播放";
			adv.style.display="block";
		}
	};
	video.addEventListener("ended",function(){
		img.style.display="block";
	});
</script>
 </body>
</html>


完整的代码如上,也许就是这么一个小小的案例就可以轻松搞定在HTML5中的视频和音频效果

接下来,我们便开始了canvas的学习,而关于canvas的总结也只有等我们学完之后才来总结了,就先奉上学的这点吧……

 

你可能感兴趣的:(视频,html5,音频)